• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2013/08/29

Webデザイナーになりたい全ての人が読むべき本「プロになるためのWebデザイン入門講座」

プロになるためのWebデザイン入門講座
ゼロからWebデザイナーを目指すならば必読の書だぜ!

フリーランスのWebデザイナーであり、社会人のためのWebデザインスクールの講師、そしてブログStocker.jpの主宰でもあります庄崎 大祐( @Stocker_jp )さんの書籍、「プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド」を著者様より頂戴いたしました。
ありがとうございます:)

っていうかこの本、2年前に欲しかったぜ!


内容

Webデザインのプロを目指す方に、Photoshop、Illustratorを使った制作テクニックを解説します。第一線で働くプロの多くは、Photoshopを使用してWeb制作を行っています。本書は、Photoshopでいかに美しく、かつ制作効率を上げてWebデザインを作るかを重視した解説、実際に手を動かしながらの演習というスタイルを採っています。バナー制作による演習を経てから、Webサイトのデザインカンプ制作にステップアップ。制作物を実際にWebで表示できるよう、HTML/CSSコーディングの初歩まで学習できます。

via: Amazon.co.jp: プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド: 庄崎 大祐: 本

Fireworksが開発終了を発表した今、WebデザインはそのほとんどがAdove PhotoshopとIllustratorを使って行われます。本書は、PCの基本操作ができる方ならば、Web制作に必要なノウハウの基礎のほとんどを習得できるように作られています。

目次

1 Webに求められるデザインって何だろう?
2 必要なアプリケーションと画像にについての基礎知識
3 PhotoshopをWebデザインで効率的に使う方法
4 必要な場面でIllustratorを使えるようにしておこう
5 バナーのデザインでひと通りのテクニックを身につけよう
6 標準的なワークフローに沿ってWebサイトをデザインしてみよう
7 Dreamweaverによるコーディングの基礎を学ぼう

via: Amazon.co.jp: プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド: 庄崎 大祐: 本

 

配色について
まず1、2章ではWebページの基礎的な知識、配色について、また使用するアプリケーションの解説がなされております。特に1章の「配色について」のページは初めてWebデザインをする方であれば(と言うかデザインをする人であれば)読んでおいてまず損はありません。
綺麗に見える、失敗の無い配色についての根っこを学ぶことができます。

 

Webデザイン用セットアップ
そして3章では、Photoshopを使ってWebデザイン制作の基礎を学んでいきます。非常に丁寧だなと感動したのが本章冒頭にある「WebデザインをPhotoshopでする上での環境設定について」の項。

実は私も2年前に初めてWebデザインをPhotoshopで起こした時に困ったのがこの辺りの設定についてでした。
それまで紙のデザインしかやったことが無く、カラーも単位も今まで触れたことの無いものを扱うこととなり、どこをどうすればWebに適したデータ作成をすることができるのかが分からず途方に暮れた記憶があります。
泣きました。ママの胸に抱かれながら泣きました。それはそれは暖かく私を包んでくれました。

本章ではまず、その環境設定について数ページが割かれており、そのまま流れるように各ツールの基本操作説明→レイヤースタイルを使用したボタンの作成チュートリアルへと移っております。

 

パスツール
続いて4章ではIllustratorを使用した「ペンツール」の使い方についてを学びます。当ブログでもこんな記事こんな記事を書いておりますが、ここではそれ以外にPhotoshopとIllustratorの使い分けについてや環境設定についても触れられております。

 

バナーの作り方
5章では、「エステサロンの広告バナー」と「旅行券キャンペーンのバナー」の制作を通じてPhotoshop、Illustratorの応用的な(しかしよく使われる)テクニックを学べます。

 

カンプ作成
そして、最も多くページの割かれている6章では、↑のようなサイトを目指していよいよデザインカンプを作成する作業へ入ります。宴もたけなわです。

本章では

  • アイコン
  • ページの土台
  • ロゴ
  • サイドバー
  • コンテンツ
  • フッター

の6パーツにサイトを分解し、各々にあった効率の良いデザイン作成方法を学んでいくことができます。

 

コラム
作業が上手くいかない時には欄外のコラムやヒントを手がかりにすればきっと思い通りのデザインカンプが作成できるでしょう:)

 

コーディング
そして最終章Chapter 7は、Dreamweaverを使用してのコーディングについて。

 

画像の書き出し
印刷物のデザインをする人にとってはなじみの無い「画像の書き出し」についても詳しく触れられております。私もWebデザイン初心者の頃はこれでえらい頭を悩ませました……まぁ今では「Slicy」のおかげでPhotoshopからのスライス作業が死ぬほど楽になりましたが、これも2年前の私に見せてあげたい章です。


プロになるためのWebデザイン入門講座
そんなわけで、「プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド」のご紹介でした。

これからWebデザインをやってみたい!と言う方には超オススメの一冊です。なつきさん、素晴らしい本をありがとうございました:)

こんな記事もオススメです

「htmlすら知らなかった私が2週間でWordpressの新テーマを作成するまでにやったこと」と参考にした記事まとめ

Illustrator初心者の方へ送る、ベジェ曲線を描く際知っておくと便利なことと練習法(サンプルテキストもあるよ)

これが出来れば中級者!Illustrator初心者のための「ロゴ作成講座」

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×