オリジナルバナー画像の作り方 その２
こんばんわ！
０円アメブロカスタマイズのペカルマンです。
昨日の続きになります。
昨日はボタンを透明にした画像の上に、色つきのボタン素材を乗せました。
上図のココという場所にアイコンをはみ出させて、更にテキストを
挿入していきましょう！
ちなみに完成品はコチラになります。
・・・・・とその前に、アイコン（ドーナツ）を拾ってこないといけませんでしたね。
今回はIconFinder というサイトから拾ってきました。
めちゃくちゃたくさんのアイコンが、しかも綺麗なアイコンがたくさんです。
【１】
pixlrより「ファイル」⇒「画像をひらく」の順にクリックして、ドーナツの画像を
選択しましょう。
このままだと、ドーナツのアイコンが大きすぎますよね＾＾；
ボタン素材に合うように縮小します。
【２】
画面上部の「画像」⇒「画像サイズ」の順にクリック。
【４】
するとこのような窓が出るので、縮小する数値を入力します。
今回は７０pxくらいでやってみます。
【５】
縮小されたアイコン（ドーナツ）をボタン素材に乗せます。
「編集」⇒「全て選択」⇒「編集」⇒「コピー」の順にクリック。
ドーナツのアイコンをコピーしたという操作です。
【６】
ボタン素材の方の窓内を１回クリックします。
「編集」⇒「貼り付け」の順にクリック。
【５】【６】はアイコン画像をコピーして、ボタン素材に貼り付けしたという操作です
このようになりました。
あ、ドーナツの位置は移動済みの画像でした；；
【７】
ドーナツの移動は画面左ツールバーの移動ツールをクリックして
パソコンの矢印キーで移動させます。
【８】
次にテキストを入れていきます。
画面左のツールバーの中のタイプツールをクリックします。
次に、テキストを挿入したい場所（だいたいの位置でOK)をクリックします。
すると上図の右側のようなテキスト窓が出ますので
フォント、サイズ、スタイル（レギュラーか太字でOK)、色を選択して
テキスト欄にテキストを入力すると、左側の画像にプレビューされますので
よかったら、「OK」をクリックします。
！ここで改行して１度に３行書いてもいいんですが、行間を調整出来ないし
行ごとに文字サイズを変えたいので、【８】の操作を３回繰り返して書きます。
なお、文字の移動はテキスト入力して「OK」を押した後、移動ツールを使って
移動します。【７】の操作ですね＾＾。
これで完成です！！
あと、アドバイスなのですが
レイヤー窓の使い方なんですが、例えばテキスト３行を移動した後に
う～ん、なんかテキストの位置が気に入らないなぁ・・・とか
ドーナツアイコンの位置を変えたいなぁ・・・・。とか思った場合
これがレイヤー窓なんですが、「美味い」のテキストを移動させたい時は
レイヤー窓内の「美味い」というレイヤーをクリック。
ドーナツアイコンを移動させたい場合はドーナツアイコンのレイヤーをクリック。
つまり、移動とか修復したいレイヤーを選択してやればいいんです。
１枚の紙の上に、文字とか画像とかを貼り重ねているとイメージして頂ければ
いいかと思います。
【関連記事、使用サイト】
ブログランキング参加してます。
応援してください。よろしくお願いします。
最後までお読みいただき有難うございました。
０円アメブロカスタマイズのペカルマンでした。
