ウェブデザインB 第1回 - ウェブデザインB | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザインB 第1回

はじめまして、こんにちわ。
ウェブデザインBの講義を担当する龍弥デザインの脇坂といいます。

今後半年間にわたって、AdobeのPhotoshopやIllusratorを使って、様々な画像表現のテクニックの習得を行ったり、オリジナルのウェブサイトのデザインを制作する作業を行います。

webdesignb01

ウェブデザインB 第1回

本講義について

講師自己紹介

講師:脇坂 基徳

フリーランスでWebデザイン制作の仕事をしています。龍弥デザイン

カバーしているスキルは、

  • HTMLコーディング
  • CSSコーディング
  • jQuery
  • PHP(必要に迫られて)
  • WordPress(そこそこ使えてると思われます)

といったところ。

現在までに制作したWebサイトは、直接のクライアントさんであれば、飲食店カーディーラーNPO法人クリニック鍼灸院住宅メーカーなど、それなりに色々とお手伝いさせていただいてます。

また、直接的なクライアントさんとのつながりでのお仕事もありますが、代理店さんを通してお仕事をさせていただいて活動を続けられています。

ご飯を食べていくために代理店さんのお仕事をこなし、楽しむために直のクライアントさんのお仕事をしてるっていうのが正直なところで、報酬面や精神面など様々なバランスをとっています。

(-人-)アリガタヤ〜

本講義の目的

本講義は、「ウェブデザイン実務士」という資格取得のための必修科目になります。
ウェブデザイン実務士とは、

インターネット利用技術に関する知識と技能、ウェブページの意匠計画に関する基礎的、専門的知識、および、ウェブページの管理運営に関して必要な技能を身につけていると認定される資格。

とのことです。

・・・と、講義の大義名分はそうなんですが、
この講義が、将来のWebデザイナーを生み出すきっかけ作りになればいいなと思っています。

本講義の提出物など

ウェブデザインBは、半年間、15回にわたって講義をすすめていきますが、15回までの間に、それぞれの回の講義で学んだ課題(Photoshop・Ilustratorでの画像加工技術課題)を何度か提出するようになります。

そしてもう一つ、1回から15回を通して1つのウェブサイトのデザインに取り組み、最終的に完成した皆さんのウェブサイトデザインを最後の講義で課題提出するようになります。

以上のように、提出物は2種類、日々の課題の提出状況などを採点方法にするので、定期試験はありません。

基礎知識:Adobe Photoshopについて

Adobe Photoshopとは?

PhotoshopはAdobeが販売している、画像編集に特化したソフトです。写真の加工やWebサイトのデザインなどに用いられることが多く、僕のようなクリエイターの使用頻度が極めて高いツールの一つです。

なお、教室のPCにはすでにAdobeのソフトがインストールされていますので、そちらを使用して講義を進めることになりますが、基本的にはライセンスを買って初めて使うことができる有料ソフトになります。

Adobe Photoshopを使用するユーザータイプ

Adobe Photoshopは、主に以下のようなタイプのユーザーに向いています。

  • ウェブデザイナー
  • グラフィックデザイナー
  • イラストレーター
  • カメラマン

もちろんこの他にも様々なユーザーに使われています。

基礎知識:Adobe Illustratorについて

Adobe Illustratorとは?

IllustratorもPhotoshop同様に、Adobeが販売している、その名の通り、イラストやロゴや、DTP(Desk Top publishing)と呼ばれるPCを使った広告デザインや印刷物の制作などを行うために使われるツールです。

Illustratorも教室のPCにすでにインストールされていますが、こちらも通常であればライセンスを買う有料ソフトです。

Adobe Illustratorを使用するユーザータイプ

  • ウェブデザイナー
  • グラフィックデザイナー
  • イラストレーター
  • その他のクリエイター

PhotoshopもIllustratorもウェブデザインでもグラフィックデザインでも使いますので、それぞれ重きを置いているポイントや得意な分野が違うだけで、使っているユーザー自体はそんなに変わらないと思います。

Webサイト制作に向いたPhotoshopの各設定

ウェブデザインB 第1回目は、Photoshopの基本設定を調整し、Webサイト制作時に、より効率よくデザイン制作が行えるような状態にしていきます。

なおこの教室のPCは毎回初期化されるようで設定を毎回調整しなければいけなくなりますが、PCをシャットダウンするまでは設定が有効になります。

それでは手を動かしていきましょう。
Adobe Photoshopを起動してください。

単位設定

画像サイズや解像度、などとよく耳にすることがありますが、画像などには大きさを表す様々な「単位」があります。ウェブサイトを制作する際に用いられる単位は多くの場合「px(=ピクセル)」という単位を使います。

webdesignb01_01

例えばこのサイトのメインコンテンツ部分の横幅は、「728px」で、サイドの部分の横幅は「250px」で構成されています。

ウェブサイトのデザインを組む(=制作する)際、この「px」を単位として使うようになります。

ただ、Photoshopの初期設定された単位は「mm(=ミリメートル)」です。なぜ「mm」なのか?というと、一応Photoshopでも印刷物(パーツも含めて)を作ることがあるため。

さらに厳密にいうと、Photoshopは写真の加工がメインであって、純粋なウェブサイトデザインのツールというわけではないからです。

とはいえPhotoshopはウェブサイトデザインのためにはなくてはならないツール。この講義も、さらに後期授業のウェブデザイン演習でもPhotoshopを使いますので、設定を行ってから使いましょう。

「編集」 →「 環境設定」 → 「単位・定規」で単位設定を変更

webdesignb01_02

「単位」の項目にある「文字」「定規」を「pixel」に変更

webdesignb01_03

これで単位はpixelで編集・表示できるようになります。

ガイド設定

ウェブサイトのデザインではpixelをベースに作りますが、全体の作りやすさなどを考えると正確にサイズを把握する必要があります。ただ、なんの指標もなしに正確にサイズを把握するのはなかなか難しいもの。

では自分で編集可能な定規を使って、それに沿ってサイズを決めるようにしましょう。

「編集」 →「 環境設定」 → 「ガイド・グリッド・スライス」で設定を変更

webdesignb01_04

「グリッド」項目にある「グリッド線」を「10pixel」に「分割数」を「10」に指定

さらに、左側の「移動ツール」を選択し、キーボードの「Shift」+ マウスの左クリックを押しっぱなしでキャンバスを移動すると、10pixelずつ移動するガイドラインが生成され、目標地点で左クリックを離すとガイドを引くことができます。

webdesignb01_06

レイヤー選択設定

Photoshopでデータを編集するときに、「移動ツール」を使ってレイヤーを選択してデザインを作っていきますが、初期の状態だと「移動ツール」を使ってもレイヤーではなくグループに設定されていますので、これを「レイヤー」にし、かつレイヤーの自動選択を有効な状態にして、レイヤーごとに選択できるようにしておきましょう。

移動ツールを選択し、自動選択にチェックを、プルダウンをレイヤーに変更

webdesignb01_07

これでレイヤーごとに選択して移動することができます。

本日のまとめ

いかがでしたか?学校のPCの場合はこの設定を毎回しなくてはいけないんですが、Adobeを契約して自分のPCで業務を行う場合には一度設定してしまえば変更しない限りは有効な状態のままになります。

ちょっと面倒だとは思いますが、効率化のため毎回設定を行いましょう。

引用元:Photoshop初心者が知っておきたい使い方・基本設定まとめ | 株式会社LIG

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE