Web・デザインスクールホームページ作成講座レッスンノート アイコンの差し替え、一部メニューを縦書から横書きに変更

アイコンの差し替え、一部メニューを縦書から横書きに変更

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

前回のレッスン、お疲れ様でした!
ちょっと仕事が立てこんでおりまして、レッスンノートが遅れまして申し訳ありません。。
さて前回ですが、引き続きフォトショップでの作業を行いました。

メニュー部分を作成してきて頂いたので、その部分の調整やアイコンの差し替え、一部メニューを縦書から横書きに変更、などをやってみました。
あとは、下部のボタンの作成もやりましたね。

まず竹のアイコンについてですが、これは素材集に入っている画像がepsというファイルだけ背景が透明だったので、これを利用しました。
前回と同じですが、画像を開き、必要な部分だけ切り抜きツールを使い切り抜き、その後いらない部分を消しゴムツールで消しました。その画像を選択範囲(点線)で囲み、コピー→ホームページ用のファイルに貼付けしました。

文字の縦書きから横書きへの変更は、文字を選択し最上部メニューの「書式」→「方向」から横書きを選びました。
あとは文字やアイコンの「整列」もやりました。整列させたいものを全て選択すると、上に四角で作られたマークがいくつも出てくると思います。
このマークを押すことで整列できます。
どのマークがどのように並ぶのか、についてはここで書くのはちょっと大変なので割愛しますが、今回はこの中から「上端揃え」や「水平方向を分布」などをやってみました。それにより、頭が揃い、等間隔で並びました。

あとはボタン部分の作成でした。扇の画像の一部を切り抜き、これを画像縮小、回転などを行い、ボタンにあしらいました。
背景のテクスチャは、ダウンロードし、これの一部に選択範囲を作成、コピーをして、貼付けました。この際、ボタンの大きさを予め決め、或いは調べておくとよいです。
選択範囲を作成し、最上部メニューから「選択範囲」→「選択範囲の変形」とすると、選択範囲のサイズを変えたり、位置を変えたり、ということを数値できめられます。

そうしてできたテクスチャの画像レイヤーを右クリックし、レイヤー効果を選択。そこから「ドロップシャドウ」を選び、影を落としました。

その後、レイヤーを整理するのと、それぞれの画像をパーツとして、別の画像で書きだすために「グループ」を作成し、ボタンに必要な画像などは一つのグループとし、画像の名前を英語で書き、拡張子(gifなど)をつけました。

かなりレイヤー構造が解りやすくなったかと思います。
このレッスンノートを書いたコーチ

元・グラフィックデザイナー。ゼロ~大手企業サイト制作で培ったコツまで

誰でもできる!Web教室
シバタダイスケ (ホームページ作成)

新宿・吉祥寺・三鷹・中野・高円寺・阿佐ケ谷・荻窪・西荻窪・武蔵境・東小金井・武蔵小金...

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta