My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

4/1 [Illustrator] 透過PNG画像作成 / [Photoshop] バナー作成

f:id:sntkk3:20140228225012g:plain

  1. 透過PNG画像作成 [Illustrator]
  2. バナー作成 [Photoshop]

透過PNG画像作成 [Illustrator]

昨日作成した以下ペンギン画像を透過PNG画像として保存します。

f:id:sntkk3:20140401180436p:plain

透過PNGとは、
画像の背景が透明になっているPNG形式画像です。

では、以下、その手順をご紹介しておきます。

【手順】
1. 必要な大きさで切り出す

1.対象画像を長方形ツール(塗りつぶしなし)で囲む
2.「オブジェクト-アートボードに変換」を選択

2. WEB画像として保存
  表示された設定画面で
  「PNG-24」「透明部分」「アートボードサイズでクリップ」を設定して保存

 



透過PNG画像の作成(2)

龍の画像を作成する[Illustrator]

【手順】
1. 下絵を準備する
  こちらのサイトから下絵の元となる龍の画像をコピー
  http://yahoo.jp/box/9WRNRh

2. 龍の絵をペンツールでトレース

3. ドロップシャドウを追加

【完成図】
  完成図はこちらです↓

バナー作成 [Photoshop]

  次は、バナー制作に挑戦してみます。
  なお、制作の手順は、以下のサイトでの指導に従い作成しています。
(講師ブログ:
「Webデザインの勉強|Webサイト制作科補足と初心者の勉強法」
http://d.hatena.ne.jp/web-0127/
より)
※参照記事が以前のURLに存在しないため、記事画像ファイル添付にてご紹介いたします。

素材ファイル:http://yahoo.jp/box/CPno3M
 

 【完成図】
 ↓ 以下、参考サイトの手順に従い、応用編として作成したバナー完成図です。