Web・デザインスクールホームページ作成講座レッスンノート illustratorを用いた立体的なボタン作成とphotoshopを用いた画像トリミングなど

illustratorを用いた立体的なボタン作成とphotoshopを用いた画像トリミングなど

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

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

前回に引き続き、秦野市の観光サイト/写真投稿サイトづくりを進めていきました。

まず前回から今回までの間に考えてきてもらった、ページの構成やデザインを確認させていただきました。

こちらからの情報発信もするけど、それについてのユーザー投稿写真も連動してみせたいということを確認しました。

普通の観光サイトにならないように、ユーザー投稿型という軸をぶらさずに、同じ仕組みで各コンテンツを入れ替えていくことにしました。

次に、illustratorで立体的なボタンを作ろうとしてみたけれど、うまくできなかったということで、一緒にやってみることにしました。

http://illustrator-mania.com/innerglow-3d-ico/

ポイントはグラデーションツールの使い方です。
グラデーションを作りたい色を2色つくって、その色をスウォッチパネルへとドラッグすることで、登録しておきます。
グラデーションの設定ウィンドウに出てくる小さい四角に、先ほど登録しておいた色をドラッグすることで指定することができます。

それと、事例としてでてくる大きさと、今回つくりたい大きさが異なるので、光彩フィルタの指定でのぼかしのピクセル数を事例よりも小さくしてあげることもポイントです。プレビューにチェック入れながら、目的のような立体感が出ているかを目でみながら確認していきます。


次に、おみやげや料理などでやりたい、写真の背景抜きの作業を行いました。
テーブルに乗ったお皿と料理の写真で試しにやってみることにしました。

写真のトリミングや加工はphotoshopで行います。

左側のツールメニューから自動選択ツールを選んで背景をクリックしてみます。
背景に微妙に色の違いがあるので、初期状態では、部分的に選択されてしまう状態でした。
許容値を調整して大きくして、再度クリックすることで、背景の机全体を選択することができます。

そして、選択範囲を反転して使いたいところを選択してコピーすることで、新規ファイル作成ー背景を透明に指定して貼り付けることで、料理などを切り抜いて、背景を透過させた画像素材などを作成することができます。

トリミングの仕方としてより複雑な色やかたちの場合は、パスをクリックして選んでいくという方法も確認しました。

使いたい画像の大きさを調整したり、トリミングをする方法も確認しました。

写真をphotoshopで開いた状態で、イメージーカンパスサイズで大きさを合わせる方法があります。
これだと自動的にトリミングされてしまいます。
自分が使いたい場所を選んで大きさも調整したい場合の効率が良い方法としては、高さか幅を合わせてから選択ツールでトリミングすることで目的の大きさで切り出すことができます。
このレッスンノートを書いたコーチ

自身の作品がグッドデザイン賞を受賞!実務・講師経験ともに豊富なので安心

自分で作る夢のマイホームページ作り講座
栗林賢 (ホームページ作成)

高田馬場・池袋・練馬・石神井公園・秋津・小手指・入間市・仏子・所沢・西武新宿

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

ホームページ作成情報

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

twitter

ホームページ作成の先生

@HomepageCyta