せっかくillustratorを持っているのだからサイトのロゴとかアイコンとか自分で作りたい…！！
そう思ってサイトアイコンを作ってみました。
勘違いしてたこと、失敗したことについても書いてみます。
サイトアイコン＝サイトイメージだと勘違いしてた…
Twitterで私のサイトをツイートする際、リンクに表示される画像がCocoonの最初の設定の画像のままでした。
「これは…自分で超絶オシャレな画像を作らなければ！！」と思いillustratorを起動。
できたのが以下の画像です。
なんかちょっと画質悪い…のは置いといて（書き出しの際の設定がまずかったのだろうか…）。
テキトーに作った割にはいい感じだと自分では思っています。
当初はカラフルな音符が散らばっているイメージで画像を作りたかった。
だけど斜めにきれいに線弾くの難しいし、いろいろな色使うの面倒だしと思ってこんな感じになりました。
色は黄緑とオレンジの2色しか使ってません。
音符は真円にして棒の部分は上から垂れ下がっているみたいな感じにしました（「しました」っていうか面倒だったので直線引いたら結果的にこうなった）。
私の生粋のめんどくさがりが功を奏して思いのほかシンプルで洗練された画像ができました（自画自賛）。
ツイートしたときにこの画像が表示されるように早速サイトアイコンを変更だ！と思って設定しましたが…。
「サイトアイコン」ではなく「サイトイメージ」でした。
「サイトアイコン」とは、あくまで「アイコン」なので小さくしか表示されません。
めんどくさいので今はサイトアイコンにも上記の画像を使っていますが文字が見えないので意味ナッシング。
「サイトアイコン」は時間があるときに作り直します…。
「サイトイメージ」もこの画像に変更したのですが何故かツイートしても反映されません。
いろいろ調べたのですがまだはっきりした原因がわかりませんが、たぶん画像の容量が重いからだと今のところ考えています。
ヘッダー部分のロゴはこの画像を350×100pxにトリミングしたものを使っています。
ヘッダーのロゴも時間があったら新しく作り直したいかも。
tommy17のサイトで使われている画像素材の作り方
シンプルすぎて作り方の説明なんかいらないと思いますが…作り方を知りたいという稀有な人のために一応記載しておきます。
まずillustratorを起動し新規作成でwebを選択、サイトアイコンを作るつもりだったため推奨サイズの512×512px、カラーモードをRGBカラーにして作成をクリック。
まず音符の丸い部分を描いていきます。
楕円形ツールを選択し、塗りは黄緑、線はなしに設定します。
shiftキーを押しながらドラッグすると黄緑の真円を描くことができるのでいくつか適当に真円を作ります。
今度は棒の部分をつくるため線で描画する必要があります。
直線ツールを選択して塗りをなし、線を黄緑（先程選択した色と近ければOKです）、真円の右側からshiftキーを押して上にドラッグ、そうすると真上にまっすぐとした線が描けます。
続いて文字の部分です。
まずペンツールを使って以下のような波打った線を描きます。
続いてパス上文字ツールを選択し、先程描いたパス（線）を選択して文字色とフォントの大きさと字体を好みに設定し文字を入力します。
あとは書き出しすればOKです。
速い人なら5分ぐらいで完成すると思います。
ただこれくらいの簡素な画像素材だったら無料のツールでもできる気がします。
無料の画像作成ツールだとCanvaが有名ですね。
ぱっと調べたところ文字を曲げたりもできるそうなので私が作ったものと同じようなものが作れるかと思います。
Windowsに元から入っているペイントでもある程度のものまでは作れますが機能が少なすぎて上記の画像の「tommy17のサイト」という形状を再現するのはやや難しい…っていうかできないかもしれないですね。
illustratorは買い切りのソフトではないので毎月お金がかかりますが、いろいろできて便利は便利です。
名刺のデザインも試しに作ったので、そのうち必要があれば印刷会社にデータを送って発注するかもしれないです。
ということで今回はここまで！
コメント