事例紹介サービスブランディング構築ホームページ制作ロゴデザインパッケージデザイン会社案内・パンフレットブログFAQお問い合わせ採用プレオ日誌blogこのパーツ、どうやって作られているの?デザイン基礎知識2017.04.14こんにちは!プレオデザインのおおつぼです。このパーツ、どうやって作られているの?を書くことになったワケを知ってもらうためにまずは自己紹介させていただきます^^デザイナーになるには、専攻がある高校へ行ったり、専門学校へ行ったり、大学へ行ったり...様々な道があると思いますが、私はどの道も通らず、全然関係のない学問を自由奔放に学び、最終的にデザイン事務所に入ってしまったへんてこな経歴の持ち主です。最初はイラストレーター?フォトショップ?キイタコトアルカモ...使い方わかんないよー、えーーん><な状態です。いう感じのデザインしたいけどやり方わかんないや。やって作ってるのか解説して欲しいよー!といつも思っていました。いや、いつも思っています!ということで、そんな私がこのパーツはどうやって作るのかなーと調べた過程をみなさんに発表するブログとなっております!これからデザインを勉強していく人に向けて、一緒に頑張ろうねという気持ちを込めて、そんなこともわざわざ説明するの?ってくらいに書いていこうと思います^^SALEでよくある呼びかける構図SALEでよくある呼びかける構図を使ってプレオデザインの架空SALEを宣伝するシンプルなパーツを作りました。こちらのパーツを作っていく手順を説明していきたいと思います。いくつかショートカットを紹介する場面がありますが、Macでの操作を想定してご紹介していきます。余談ですが、この構図を使ったバンドの有名なジャケットがあるのですが、それもオマージュで、元々はロシアのアレクサンドル・ロトチェンコさんという方の作品がオリジナルです。写真を探す現実にこのプレオSALEは存在しないので、今回は撮影ではなくUnsplashという写真素材サイトで素材を探しました。著作権表示無しで商用利用できるサイトです。loud...など叫んでいるっぽい言葉で見つけたのがこの少年です(ちなみにチンパンジーなんかもありました)。ダウンロードしました。写真を切り抜くダウンロードした画像をフォトショップで開いて切り抜きます。自動選択ツールを下の写真のような設定に。選択されている必要ない範囲を自動選択ツールで削っていきます。今回は全体的に白っぽいので許容値を低く設定しても綺麗に切り取れませんでした。少年が削れてしまったり背景が残ってしまったりしています。削れてしまった部分を足したり↓(なげなわツールで処理していきました。shiftを押しながら使うと、囲んだ部分が選択範囲に足されます。)残ってしまった背景の部分を削っていき、↓(なげなわツールをoltを押しながら使うと囲んだ部分が選択範囲から削除されます。)少年だけ選択している状態にしました。選択した少年をコピーアンドペーストします。フォトショップの画面右にあるレイヤーパネルに新規レイヤーで表示されます。目玉のマークをクリックして背景を隠します。綺麗に切り抜けているか確認しましょう。確認ができたら、元の画像があるレイヤーは削除して、切り抜いた画像を程よい大きさにして保存します。画面右上のイメージの画像解像度から、変更します。web用に画像解像度72、今回は大きさを幅500mmにしました。最後にscreamboy.psdと名前を付けて画像を保存しました。保存した画像をイラストレーターで開きました。boyは私が向いてほしい方と逆を向いていましたので、向きを変えました。画像を選択し右クリック→変形→リフレクトリフレクトの設定画面が出たら垂直をチェックしてokしました。次は三角の部分を作っていきます。色はロゴのカラーにしたかったので、ホームページのロゴをスクリーンショットして、スポイトで色を吸い取りました。Macで範囲を指定してスクリーンショットする場合は、(⌘+shift+4)です。カーソルが+の形になるので、スクリーンショットをしたい範囲をドラッグします。boyのアートボードの外側のどこかに先ほどのロゴを配置します。ピンクの三角形を作るので、スポイトツールでピンク色を吸い取りました。多角形ツールで三角形を作ります。多角形ツールで適当にドラッグすると、六角形が表示されます。ドラッグした指を離さずに、キーボードの(▼)を押すと角の数が減っていきます。角が三つになったところで、キーボードで(shift)を押します。ここで手を離すと、水平を向いた正三角形が配置できます。三角形を吹き出しの形に変形していきます。三角形を選択し(shift)を押しながら三角形の向きを変えると、45度ずつ回転できます。横向きの二等辺三角形にしたかったので、三角形の上下右をアートボードの端に合わせました。少年の口が隠れるくらいに右の点の位置を調節。(shift)キーを押しながら動かすと横のライン上で動かせます。完成した三角形を一番後ろへ配置します。(⌘+shift+[)もしくは(右クリック→重ね→順最背面へ)三角の配置完了です!!!丸ゴールドの丸を作ります。何も選択していない状態で、三角を作った時と同じようにスポイトでゴールドの色を吸い取りました。配置したい大体の場所に楕円形ツールで正円を作ります。(shift)キーを押しながら円を作ると正円になります。この円を一番後ろへ配置し(⌘+shift+[)、丸を少年の頭が真ん中に見えるような位置と大きさに微調節しました。背景のパターンを作るホームページの背景でも使われているので、黄色のボーダーを背景に敷きたいなあと思いました。そこでまず背景に使うボーダーのパターンを作ります。長方形ツールで128pxの白い正方形を作ります。(shift)キーを押しながら作ると正方形になります。128pxというのは、スクリーンショットしたボーダーのと大体同じくらいだなと思った幅16pxを8個並べた大きさです。128×16pxの長方形を白い正方形の上に作ります。長方形を作ったあとに画面右上から大きさを調節できます。Wが横幅でHが高さです。(shift)キーを押しながら黄色い長方形と白い正方形両方とも選択した状態にします。整列ツールで、水平方向左に整列を選択。長方形と正方形が左に整列します。整列ツールの垂直方向上に整列を選択します。長方形と正方形が上方向にもに整列し、ピッタリはまった状態になります。ボーダーにするために、この黄色い長方形と同じものを右に32pxにずらした位置に配置していきたいです。黄色い長方形だけを選択した状態にして、キーボードで(⌘+shift+v)を押すと同じ場所の最上面に長方形が複製されます。32pxずらしたいので、画面右上のx軸入力枠に「+32」と入力すると32px右に動かすことができます。x軸は横に動き、右が「+」で左が「-」です。y軸は縦に動き、上が「-」で下が「+」です。同じ方法であと2つ長方形を配置すると、黄色と白のボーダーができました。作ったボーダーを全て選択して、スウォッチにドラッグドロップ。ボーダーがパターンに追加されました。背景を敷く背景用に長方形ツールでアートーボードいっぱいに長方形を作りました。ホームページの背景のボーダーは斜めでしたよね。ここで斜めのボーダーに変えます。ボーダーの長方形を選択して、回転ツールをダブルクリックします。回転ツールの設定画面が開いたら、プレビューにチェックを入れて、-30度、パターンの変形にチェックが入った状態でokします。長方形の向きはそのまま、パターンだけが-30度の向きに変形します。ボーダーの長方形を一番後ろへ配置しました。SAAAAALE!!と書きました。すっごくセールですね。吹き出しに合わせて変形させたいので、文字を選択して、アウトラインをかけました。文字を選択して、(⌘+shift+o)で文字にアウトラインがかかります。吹き出しと文字を垂直方向に中心を揃えたいので、整列ツールで揃えました。吹き出しと文字を選択した状態で、吹き出しをクリックし、(吹き出しを基準に整列することができます。)整列ツールで垂直方向中央に整列を選択しました。変形したい形にガイドラインを作ります。吹き出しを選択し、(⌘+shift+v)で同じ場所に吹き出しを複製します。ガイドとなるように複製した吹き出しの塗りをなくして、白い線にします。(alt)キーを押しながら、変形したい形まで高さを縮めていきます。最後に文字を吹き出しに合わせて変形します。文字を選択し、自由変形ツールでパスの自由変形を選択します。文字のパスの右端2点を片方ずつ掴んで、ガイドの上に持っていきます。(shift)キーを押しながら持っていくと縦のライン上で動かせます。boy、完成しましたー!!以上です。最後まで読んでいただきありがとうございます。デザイナーさんには何の為にもならないとは思いますが、デザインに興味があるどこかの誰かの「へえ〜」に役立てばと思います。PREODESIGN。