Successfully reported this slideshow.
Your SlideShare is downloading. ×

Photoshopで作るWEBデザイン入門

Ad

Photoshopで作る
WEBデザイン入門
   デザイ 入門
   デザ

                        2009/7/18
               h i@            b
               ...

Ad

WEBデザインとは
   デ

Ad

ディレクション


        WEBデザイン
  基本的に、
  WEBデザインはコーディング前の作業


コーディング(開発)

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 17 Ad
1 of 17 Ad

More Related Content

Photoshopで作るWEBデザイン入門

  1. 1. Photoshopで作る WEBデザイン入門 デザイ 入門 デザ 2009/7/18 h i@ b hori@corocoro-web.com
  2. 2. WEBデザインとは デ
  3. 3. ディレクション WEBデザイン 基本的に、 WEBデザインはコーディング前の作業 コーディング(開発)
  4. 4. コ ディング前にデザインすると コーディング前にデザインすると・・・ ●出来上がりイメ ジの相違を防ぐ。 ●出来上がりイメージの相違を防ぐ ●クライアントのイメ ジをしっかりと固めてから ●クライアントのイメージをしっかりと固めてから コ ディングに入れる。 コーディングに入れる。 ●クライアントのモチベーションを上げ、作成に協力 ラ チ げ、作成 協力 してもらいやすくなる。
  5. 5. WEBデザインの環境 デ
  6. 6. コーディング(開発) ディ グ(開発) ホームページ作成ソフトかエディタ ホ ムペ ジ作成ソフトかエデ タ (Dreamweaver、秀丸 ) (Dreamweaver、秀丸・・・) WEBデザイン 画像編集ソフト (Photoshop、Fireworks、Illustrator・・・) p
  7. 7. 大まかな流れを説明すると 流
  8. 8. ① デ ザ イ ン ンを を作 る
  9. 9. ② パ ー ー ツを を切 り 出 head.gif g menu01.gif g main.jpg jpg す
  10. 10. ③ imgフォルダ フ ォ ル ル ダに に保 存 head.gif menu01.gif main.jpg
  11. 11. 画面デザインのメリット ●デザインにまとまりができる ●コンテンツの整理ができる ●空白欄有効利用の提案ができる ●サイズ指定が先に決まっているので コ ディングが早い コーディングが早い ●効率化
  12. 12. 画像切り出しに使用するツール スライスツール スライス選択ツール
  13. 13. 一般的に喜ばれるデザイン ●クライアントが描いているイメージを いい感じに裏切る ●背景やテキストにグラデーション活用 ●写真の淵に変化を(角丸、ぼかし) ●写真の選び方・トリミングの仕方
  14. 14. WEBデザインの前に・・・ ●デザインのイメ ジをもつこと。 ●デザインのイメージをもつこと ベースカラー・インパクトカラー・サブカラーを あらかじめ決めておくと作りやすい。 あら 決 く 作 やす ●商用利用OKな素材を準備しておく。 ●商用利用OKな素材を準備しておく ・写真 ・イラスト イラスト ・フォント(書体) フォント(書体)
  15. 15. 写真素材(高解像度) 無料 ●リ ク タイ ●リンクスタイル http://www.linkstyle.co.jp/free.html ●写真素材 足成 http://www.ashinari.com/ イラスト素材(EPSデ タ) イラスト素材(EPSデータ) 無料 ●クリップア トファクトリ ●クリップアートファクトリー http://www.printout.jp/clipart/
  16. 16. フォント フリーフォントセレクション リ ト ク ¥2,079 ( , (本体 ¥1,980+税) , ) 著者:深沢英次 発行:株式会社インプレスジャパン 付録:CD-ROM 1枚 使える素材情報募集中♪
  17. 17. ありがとうございました。 が ざ

×