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

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

» 2014年04月22日 18時00分公開

[岡本紳吾，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」の記事を一部引用しながら、現場で使える具体的な制作手順とテクニックをまとめて紹介しよう。