たのまなの在宅ワークスタートパック、webデザインコースで、ここまでで写真の加工や調整の方法、それからレイヤーを重ねて画像を合成する方法を学びました。
今回からはそれらの講座で身に付けたスキルを使い、実際のお仕事に近い作業をメインとした講座になります。
手始めに学ぶのはPhotoshopを利用したポストカードの作成方法。
一枚の紙に画像やロゴ、文章などのテキストを配置していき、簡単な地図も作っていきます。
同じやり方でチラシなども作成することができます。
より実務に近い作業を学習していくので、モチベーションも上がってきますね。
素材となる画像の準備。
単純に写真を背景にして、そこに文字を追加していくだけでもポストカードは作れるでしょう。
今回の教程では、文字の後ろに黒板の画像を配置しますので、背景用の画像と黒板の画像を用意します。
ただし、配布される黒板の画像は背景が白地になっているので、以前学習した"被写体を選択"を使ってマスクをかけて背景を透過させます。
この2つの画像素材を使って、ポストカードを作っていきます。
画像素材は教材の中に含まれているので自分で用意する必要がないのはかなり助かりますよ。
画像を配置する。
新規でPhotoshopのプロジェクトを立ち上げます。プリセットの中からポストカードに最適なハガキを選択しますが、印刷用の画像なので解像度を350に上げておきます。（WEB用なら72でOKです。）
ここにまずは背景となる写真を配置。
レイヤーとして配置されるので、背景に変更してロックをかけておきます。
そこに黒板の画像を配置しますが、PhotoshopではPSDファイルもそのまま画像として配置できるので、黒板の画像は先ほど背景を透明にしたPSDファイルを配置しても良いんです。
配置したPSDファイルは、再びPhotoshop上で調整して保存すると、現在作成しているポストカードのファイル上にも反映されるので、さすがPhotoshopといった感じでとても便利です。
この黒板の画像にドロップシャドウという効果をつけて、より自然に見えるように配置しておきます。
Photoshopでロゴを作る。
ロゴというとオリジナルのデザインの物を想像しますし、Illustratorを使ってロゴを作れば本格的。
しかしながら今回は、Photoshop講座という事で、既存のフォントに境界線や影などの効果を加えてロゴっぽくしていきます。
Adobeのサブスクの契約をしていれば、魅力的なフォントを数多く使う事ができますが、パソコンにインストールされていないフォントを使う場合のフォントの追加方法もこの教程で覚えておきましょう。
既存のフォントでもオシャレでロゴっぽくなるフォントは多数あります。
これに境界線で縁取りをしたり、影を付けて立体感を出せば、Photoshopでもなかなか良い感じのロゴが作れます。
テキストの入力。
ポストカードに加える文字を、横書き文字ツールを使って入力していきます。
文字の調整には文字パネルを使いますが、なかなか多機能なので複雑ですね。
文字組みというのはかなり奥が深いのですが、今回の教程では基本的な作業で文字の大きさや行間を整え、バランスよく配置していきます。
少し長めの文章に関しては、文字を入力するエリアを先に作り、その中に文字を流し込むというもう一つのテキスト入力のやり方の解説もありますので、これも覚えておくと良いですね。
Photoshopで地図を作る。
最後にPhotoshopで地図を作成していきます。直線や円を使って、Photoshopでも簡単な地図が簡単に作れます。
長方形ツールや楕円形ツールを使って、シェイプを描き、地図を作ります。
この教程の目的はPhotoshopで地図を作ることですが、この作業をする事で、馴染みのないパス・シェイプとは何か？という事も身に付き、Illustratorを使う時にも役立ちます。
確かに複雑な図形で地図を作るとなるとIllustratorの方が向いていますが、Photoshopでも様々な図形を描く事ができるので、シェイプと呼ばれる図形を組み合わせれば、Photoshopでも地図が作れます。
Photoshopで作業が完結できるのであれば、それに越した事はないのではないかな？と思います。
Photoshopでのポストカード作り。
たくさんの工程がありますが、一つ一つはそれほど難しい作業はありません。
でも実際にやってみると、簡単に見えるポストカードでも以外とレイヤー数が多くなりますね。
同様にチラシ作りもこの作り方でできます。
ポストカードやチラシは印刷物ですが、webデザインの仕事の中でも最初によくある仕事としてのバナー作成も、基本的な作り方は同じです。
解像度や単位の設定が変わりますが、バナーは画像とシェイプとテキストを使って合成した画像ですね。
ここで得られたスキルが、これからwebデザインへと活かされていく訳です。
たのまなの在宅ワークスタートパックのwebデザイン講座では、このように順を追って学習する事で、ソフトの使い方からすんなりとwebデザインへと進む事ができます。
