初心者から始めるPhotoshopでWEBデザインその⑤

どうもこんにちは。 WEBデザイナー・ディレクターのやったんです。

5回目の今回で「初心者から始めるPhotoshopでWEBデザイン」はいよいよ最後です。
今回行うのは、地図の作成とインスタグラムのデザインです。

※Photoshopは最新版を使用してください(執筆時のバージョンはCS6)。記事では、Mac OS Xを基本に解説しています。ショートカットは、「command(Ctrl)」のように、Windowsの場合を括弧内で表記しています。

■今回作るデザイン

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!

地図のデザインの作成方法

最近の地図のデザインのトレンドは、画面幅一杯に地図を配置するかコンテンツ幅に合わせるかの2つかなと思います。今回はコンテンツ幅に合わせた地図デザインです。

1.地図を表示する枠を作る

パレットメニューから「長方形ツール」を選択して、地図を配置する画像枠を作ります。横幅はコンテンツサイズなので1200pxとします。縦幅は今回480pxとしています。
見出しは先に作っておきます。(テキスト打ちでも良いですし、コピーしてきても良いです)

2.地図をキャプチャする

地図は、本番のコーディング時にはGoogle Mapの埋め込みになるのでデザイン時ではキャプチャを貼り付けます。
まずGoogleMapにアクセスして住所を入力して検索します。出てきた地図を見やすいレベルまで拡大縮小して、キャプチャをとります。

参考:おすすめ画面キャプチャツール 「Fireshot」 

3.キャプチャ画像を配置する

キャプチャした画像をPhotoshopへ貼り付けます。

4.画像を1で作った画像枠に合わせてマスクする。

キャプチャ画像をはりつけるとだいぶ画像サイズを大きいと思います。それを先に作っておいた、画像枠に合わせてマスクをします。レイヤーパレットの画像枠とキャプチャ画像の間を「option(alt)」を押しながらクリックです。
※マスクのやり方は、何度もやってきましたのでもう大丈夫ですよね。必要であれば過去記事をご参照ください。

5.場所を表すピンを格好よくデザインする

ここで地図は完成と言いたいところなのですが、余裕があればもう一手間入れるとデザインも1ランクアップします。
この場所を表すgoogle標準のピンが少しダサいので、これを変えましょう。

ツールパレットから「楕円形ツール」を選択して丸を書きます。「shift」を押しながら書くと正円が書けます。
次に「多角形ツール」に持ち替えて三角形を作ります。すると下記のような画像ができます。

この上の店舗名を入力しましょう。

ここで地図のデザインができたので、地図の下に店舗の住所と電話番号をテキストで入力すれば地図エリアは完成です。

インスタグラムデザインの作成方法

最近WEBサイトの中にインスタグラムの投稿画面を設けるものも多くなってきましたね。お店位のリアルなイメージも伝えられるし、商品やサービスを見せる意味でもとても良いと思います。

1.インスタグラムのロゴを持ってくる

インスタグラムのロゴは、google画像検索で「インスタグラム ロゴ」と入力して検索してみてください。たくさん出てくるのと思いますので、最新のロゴを持ってきて貼り付けてください。(今回は、ロゴとロゴネームがセットになっている画像を使っています)

2.画像枠を作る

今回のインスタグラムの画像枠は、横6個の2行とします。
まずは画像の枠を1つ作成します。
「長方形ツール」を選択し縦130px横130pxの正方形を作ります。色は白にします。
次に作成した画像枠にレイヤー効果をつけます。

1.レイヤーパネルの作成した画像をダブルクリックしてレイヤースタイルを表示する
2.左メニューから「光彩(外側)」を選択
3.右メニュー「不透明度」を25%に
4.「カラー」をグレーに
5.「スプレッド」を20%に、「サイズ」を5pxに
6.「範囲」を50%に
すると下記のように画像枠の外にグラデーションのフチができたのがわかるかと思います。

次に作成したフチ付きの画像枠の上に「長方形ツール」を使って縦120px横120pxの画像枠を作ります。色は何色でもOKです。

最後に内側の画像枠に画像を配置して、マスクをかけて完成です。

3.作成したインスタ画像枠をコピーして画像を差し替える

1個画像枠をさくせいしたらあとは、それをコピーしましょう。今回は、横6個2行にしています。画像サイズごとのスペースは、それぞれ10pxとしています。

コピーのやり方も最後に見ておきましょうか。色々やり方はあるので自分がやりやすい方法を使ってみてください。

・レイヤーパレットから「レイヤーを複製」する方法
コピーしたいレイヤーをレイヤーパレット上で選択をしておきます。選択されたレイヤーを右クリックして「レイヤーを複製」を選択。レイヤーがコピーされます。

・範囲選択してカーソルでコピーする方法
移動ツールを使ってコピーしたい対象を選択します。選択された状態で「option(alt)」+「→」。これだけです。(カーソルの矢印は、←でも↑でもどれでも大丈夫です)

・範囲選択して移動しながらコピーする方法
移動ツールを使ってコピーしたい対象を選択します。選択された状態で、移動ツールで「option(alt)」を押しながらドラッグ、コピーしたい場所でドロップします。
これが一番使い勝手がいいかもですね。「shift」を合わせれば、水平・垂直移動もできます。

上記のコピーの方法を使ってインスタ枠を12個分コピーしてください。
その後、それぞれの画像を差し替えたら完成です。

最後に、「Follow」ボタンを作りますが、これはすでに作っているリンクボタンをコピーしてえテキストを打ち直すだけです。

以上で地図エリアとインスタグラムエリアのデザインが完成です。どうでしょうか?
たいして難しい技術は使っていないのがお分かりになるかと思います。

最後に

今回で「初心者から始めるPhotoshopでWEBデザイン」編は、終了となります。
ここでのデザイン制作を通してお伝えしたいのは、Photoshopで使っている機能やスキルは本当に基本的なものしか使っていないことです。

みなさんお気づきになられましたか? フィルタ機能を使って、すごい加工を行ったり、画像同士を統合したりとか一切使ってないですからね。Photoshopの教本のほんとうに最初の部分で習うスキルしか使ってないです。

Photoshopを完全にマスターしないとデザインできないとかって全然ないですから。
ツールの使い方よりも何を作るか、「未経験・初心者からのWEBデザインの作り方」でも書きましたけど、ソフトを使う前の方がよっぽど大事なんですよね。

それでは最後に、第一回から第5回までのデザインを全て合わせた完成されたデザインを掲載しておきます。(一部説明していない箇所もありますが、簡単すぎるところや説明している技術で全てできるところは飛ばしています。)

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!


スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク