制作実績

【制作実績】IllustratorCC 2019の起動画面のオマージュヘッダー

イラレ姉さん(みえさん)

こんにちは!
fuyu_na(@fumm_ii)です。

先日、Webデザイナーのコミュニティ「masacaデザイン部」の東京オフ会に参加しました。

そこで初めてお会いし写真を撮らせて頂いたみえさん(@meat_446に、Illustrator CC 2019起動画面をオマージュしたTwitter用ヘッダーを作らせてもらったのでご紹介します。

Illustrator CC 2019 起動画面風ヘッダー

※実際にヘッダーとして使用されている画像は、上部やアイコン部分に余白を多くとって画像が切れないようにしています。

▼本家様との比較画像
今回のヘッダーを制作した経緯ですが、写真に写っているみえさん(@meat_446)のTwitterアイコンが「adobe Illustrator CC 2019の起動画面に似ている」ということがきっかけでした。

masacaデザイン部東京オフ会の日、みえさんがイラレのお姉さんと同じ洋服を作って着て来てくれました。それはもう大喜びで写真を撮らせて頂き、いそいそと帰りの新幹線の中で編集を開始したのでした。

(洋服、ポージング、表情すべて高クオリティで、オフ会の会場は一時記者会見状態になってました)

縦横比を変えたバージョン

どうやって編集したか

画像の編集は、PhotoshopとIllustratorを使って行いました。

最初はPhotoshopで写真を加工

1番最初の加工前の写真がこちら。
(みえさんには許可頂いてます)

照明はやアングルはかなり良い感じなのですが、肌をオレンジにする必要がありました。

グラデーションマップで肌の色を変える

そこで、グラデーションマップで本家の起動画面と同じ色い、とりあえずデュオトーンの画像にしてみました。

肌の色がいっきにオレンジ色になったのは良いのですが、洋服の色まで変わってしまったので、消しゴムで洋服の部分は消してしまいました。

背景がこの時点では本家と同じにするか決まっておらず、オレンジのままでも良いかも…と思う部分があったので全体にグラデーションマップをかけました。

この後、背景も本家と同じように加工することに決めたので、一度元に戻して肌の部分だけ範囲選択、グラデーションマップをかけました。

写真の部分だけを切り抜いてIllustratorに移動

続いて、背景の加工をするためにみえさんの写真の部分だけを切り抜いて、Illustratorに移動した後白いアートボードを作ってみえさんを貼り付けます。

背景と四角いボックスを作っておく

続いて本家の画像を見ながら背景と四角いボックスをそれっぽく作っていきます。

タッチペンでイラストを書く

ここからはもう、手作り感を出すため基本全部手書きでした。

手書き加工の時はいつも「スタイラス タッチペン」でトラックパッドの上で書いてます。マウスで書くよりも個人的に楽です。普段イラストを書くわけでもないけど、手書き加工もするので板タブがわりに使ってます。

最後に、ツイッターのヘッダーに設定して切れる部分を確認して完成!

とても楽しくPhotoshop・Illustratorの練習をさせて頂きました。モデルになって頂いたみえさん、どうもありがとうございました!

みえさんのツイート

楽しく作らせて頂いた上に喜んでもらえてよかったです!

おわりに

今回は、Illustrator CC 2019の起動画面のオマージュデザインをしてみました。

みえさんのポージングや手作りの洋服の完成度の高さには大興奮で、めちゃくちゃ楽しく作業させて頂きました。現在の起動画面は2019年限定ですが、このタイミングでみえさんに出会えたこと、出会いの場を作って下さった方々に深くお礼申し上げます!

ABOUT ME
fuyuna
理学療法士から独学でデザインを学んだデザイナー / 東京のデザイン会社勤務 / グラフィックとWebが中心 / 大人可愛いデザイン / 本とお出かけが好き