Photoshopで作るWEBデザイン入門

15,057 views

Published on

プログラマには目からうろこ?デザイナーには当たり前なWEB デザイン入門です。

Published in: Design
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,057
On SlideShare
0
From Embeds
0
Number of Embeds
586
Actions
Shares
0
Downloads
0
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

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. ありがとうございました。 が ざ

×