【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 2 自作のお店ロゴをつくる 【Adobe Fresco】【Adobe XD】
背景
アイスクリーム専門店の仮想LPの作成過程をまとめています。
前回は、ワイヤーフレーム作成についてまとめました。
続いて、画像素材の作成へ。
本記事では自作ロゴの制作についてまとめていきます！
制作物
実際のWebデザインカンプでは、
トップ前画面のボタンとヘッダー部分に使用しています。
制作期間
制作期間 : 1/31、2/3 2日間
合計制作時間 : 約6.0h
使用ソフト/ツール
手順
- ロゴのコンセプト決め
- Frescoでスケッチ作成
- 水彩色塗りと色決定
- FrescoからPhotoshop(PC)へファイル共有
- Astro PadでiPad/Apple Pencilをペンタブ利用
- Photoshopで文字入れ、色塗りと細かい修正
ロゴのコンセプト決め
ロゴの大体のデザインを決めるのに、大変参考になったのが画像素材サイトとロゴ制作サイトでした。
例 : Adobe Stockにて"ice cream shop logo"で検索、
フィルターで"ベクター"指定
これらを参考に、以下のように決定しました。
- コーポレートカラー : 明るいピンク(PCCSでb2)
- カップアイスクリームの手描き絵を挿入
- 店名とスローガンを入れる
- 全体は円形(アイスクリームに合わせて)
- ポップ/カラフル(サイトとお店のコンセプトより)
参考 :
Frescoでスケッチ作成
大体のレイアウトをつくるのに、毎日さわっていたFrescoで描いてみました。...が！
円形のロゴを想定していたので○を描きたい、
しかしPhotoshopやXDにあるような楕円形ツールがなかったので、
ハードペンの直径を巨大に設定してポンと1回タッチで大きい円形を描画、
少し直径を小さくした消しゴムツールでもう1回タッチして中の空いた円を描きました。
アイスクリーム絵と店名部分の配置を決めて、次へ。
水彩色塗りと色決定
その他の自作素材でもFresco水彩で荒ぶる予定←だったので
ロゴにも水彩をとりいれてみることに。
カップアイスクリームのアイス部分を水彩で塗りましたが、
立体感が出せるようにハイライトと影に加えて反射光も描くようにしました。
色については、
コーポレートカラー・2つのアイスクリーム色・ロゴ内背景色・文字色
で調和がとれるように工夫。
コーポレートカラー : 明るいピンク(b2)
アイスクリーム(大) : ピンク(lt2,p2)
アイスクリーム(小) : オレンジ(b6,lt6)
ロゴ内背景色 : スカイブルー(p14)
文字色 : ホワイト(w)
コーポレートカラー・アイスクリーム(大)とアイスクリーム(小)とロゴ内背景色で
スプリットコンプリメンタリー配色、
トーンについては明清色のみで類似トーンとしました。
参考 :
スプリットコンプリメンタリー配色 - みずねこ色彩研究所HP
PCCS-tone/ライト・トーン - IROUSE/DATABASE・Color harmony
https://www.noie.co/colorkoza/2258/
FrescoからPhotoshopへファイル共有
Frescoで描いた作品はAdobe Creative Cloudに保存され、
PCで起動したPhotoshopのホーム画面からそのまま開くことができました。(便利...)
Astro PadからiPad/Apple Pencilをペンタブ利用
PCでつかうペンタブを持っていなかったのですが、
Astro PadというアプリでiPad/Apple Pencilをペンタブ化できるときき、試してみました。
こんな感じで、iPad上にも設定範囲内でPC画面を表示。
このままApple Pencilを使用する形です。
参考 :
iPadでPhotoshopが使える！iPadを液タブ化するアプリ「Astropad」を使ってみた【mac】 | HASHIMOTO NAOKIブログ
Photoshopで文字入れ、色塗りと細かい修正
フォントや機能面から店名とスローガンなどの文字入れはPhotoshopで行いました。
また、Frescoで描いたエッジだと楕円ツールがないことで
歪んでいたり閉じていなかったりしていたため、清書してから色塗りをしました。
あとはレイヤーごとに配置を整えるなど、細かい面を修正して... 完成！
PNGで出力して、XDカンプに挿入しました。
まとめと感想
今まで、自分のポートフォリオサイト等を作成する際に
参考程度にロゴ制作サイトを覗いたことはありましたが、
本格的にPhotoshopなど用いての自作が初めてでした。
今回は、特に色彩とトーンの知識を活かしたものがつくれたように思います。
(色彩検定2次の試験問題が懐かしい)
素材制作の環境としてもiPadでの制作とPC作業とを繋げることができ、
新しいやり方を見つけることが出来ました。
反省点・改善点としては...
いざデザインカンプの中でロゴをみてみると、素材のみで見ていた時とは印象がちがっていて、
特に店名フォントサイズはもっと大きくてよかったのでは？(視認性悪いかも？)と気になる点がありました。
ロゴやバーナー素材などでのフォントの使い方、文字入れのお作法は今後リサーチしたい。。
あとは、Photoshopで作り込む中での技術的な部分でしょうか。
半円の波形部分(文字が入っている部分の背景)はもっと丁寧に作れたのでは？とか
作っている中で意図せずレイヤーが分かれてしまうなどがありました。
アウトプットを重ねるなかで改善していきたいです！！
次回
つぎは、メニュー部分につかった自作素材。
水彩デジタル背景素材(Fresco)です！
