連載
» 2014年04月22日 18時00分 UPDATE

Webサイト作成手順を勉強するまとめ(1):初心者でもPhotoshopの基本的な使い方が分かる入門記事9選 (1/3)

新社会人のWeb制作者/デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。初回はWeb制作現場で役立つPhotoshopの使い方について。初期設定、レイヤー、シェイプ、レタッチ、スライス、画像アセット機能の使い方、テキストの効果的な見せ方、イラレデータの扱い方から、Edge Reflowと連携したレスポンシブWebデザインまで紹介。

[岡本紳吾,hatte.Inc]

Web制作現場では、フォトショぐらい使えないと話にならない

 この春から新しく社会人になったり、転職したりして新しい環境にチャレンジしている方は、そろそろ1カ月がたとうとしていることだろう。新しい環境には慣れてきただろうか? 新社会人はもちろん、転職して新しい業界に足を踏み入れた方も、今は覚えることがたくさんあり過ぎて大変かもしれない。できることなら、ちょっと楽して、さまざまな知識を手に入れたいのではないだろうか?

 例えば、Web制作現場に入社した人なら、Adobe Creative Cloudをインストールしてもらって「取りあえずDreamweaverだけ使えればいいから」なんて言われてDreamweaverだけやっていると、後でちょっと困ったことになるかもしれない。

 なぜなら、Webサイト/サービスの元デザインはPhotoshop(よく「フォトショ」と略される)などで作られた一枚絵で渡されることが、ほとんどだからだ。Photoshopは、慣れていればとても便利なツールだが、何も知らない状態でポンと渡されてしまうと、どうしていいのか混乱しがちだ。もちろん、親切に教えてくれる人が近くにいる場合もあると思うが、忙しくて相手にしてもらえない場合も多いことだろう。

 そんなときに参考になるのが、Web上にある情報源だが、膨大なWebの中からどれを選んで、どのように学んでいくのが効率が良いか悩んでいる人も多いはずだ。例えばPhotoshopの基本操作は、提供元であるアドビシステムズ(以下、アドビ)が「Adobe Pinch In」というサイトで使い方を無料で解説してくれているので、ここを参考にしない手はない。

 そこで本稿では、HTMLやCSS、JavaScriptからWebデザインまで、初心者に優しい入門記事やアドビ製品の使い方を公開している「Adobe Pinch In」の記事を一部引用しながら、現場で使える具体的な制作手順とテクニックをまとめて紹介しよう。

【ステップ1】初期設定を済ませて「レイヤー」の使い方をマスターしよう

 そもそもPhotoshopは写真などの画像を扱うためのツールなので、DTPなどを目的として使われることが多い。そのため、初期設定もそれにならったものになっている。

 例えば[定規]を表示すると、「mm」「cm」といった単位が使われている。Webデザインの場合、このような単位を使うことはまれで、どちらかと言うと「pixel」単位がほとんどだろう。

 まずは下記記事を参照して初期設定を済ませて、レイヤーの使い方をマスターしよう。

【ステップ2】「シェイプ」でワイヤーフレームをサッと作成

 Photoshopはシェイプという機能を使って、簡単にボタンなどを作ることができる。シェイプを極めれば「ワイヤーフレーム」をサッと作成することもできる。今はそのような機会に恵まれなくても、いずれその機会はやってくる。覚えておいて損は無いだろう。

       1|2|3 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。