Photoshopでこんな事やってます!web編

おはようございます!コペンカレッジの渡邉です☺︎ Photoshop月間第二弾は、

私がweb制作の際によく使用している機能やツールについてご紹介したいと思います^^ photoshopは、写真加工などでよく使用されますが、

画像の要素を多く使用するwebデザイン制作時もphotoshopを使用することが多いです!!

そこでお役立ちツールを今回は3つピックアップしました♪

1. スライスツール

スライスツールとは、

1枚のデータから複数の画像を分割して保存することができる機能です^^

「ここで少しwebのお話を!!」

web制作をする際は、デザイン制作後にコーディングというHTMLとCSSと言った言語を使用してweb上にデザインを反映させる作業があります!コーディングをする際は、1ページでデザインされているものをパーツ(バナーやボタンなど)ごとに切り出していく必要があります。

「ここで!スライスツールが必要になります!」

スライスツールは、各パーツに合わせてドラッグしていくだけで一気にパーツを切り出すことができるようになります!(※image1の青枠のようなイメージです)ドラッグし終わったら、「ファイル」→「書き出し」→「web用に保存」を押し、それぞれのパーツに画像形式(jpg,pngなど)を指定して、保存します^^ このツールを使うことで、一括で各パーツの保存が可能なので、web制作時は、マストで使用しています^^


image1

2.アセット機能

アセット機能は、レイヤーに画像の形式名を指定しておくと、自動的にそのファイル形式で画像を書き出してくれる機能になります。スライスツールと同じく、1つのファイルから複数のパーツを個別で保存したい場合などに使用します。

スライスツールは、自分でパーツをドラッグして指定してあげないといけませんでしたが、アセット機能はレイヤーベースでパーツを保存してくれるので、画像やアイコン等1つのレイヤーで完結するパーツを保存したい際に使用します。 「ファイル」→「生成」→「画像アセット」を選択し(※image2参照ください)、各レイヤーの名前に画像の形式名をつけます。すると、自動的にphotoshopデータと同じ階層にアセット専用フォルダが作られて、そこに保存されます^^


image2

3.アクション機能

アクション機能とは、作業を記録し、同じ作業が必要になった時に、ボタンひとつで記録した作業通りにアクションを起こしてくれる機能になります。

webのお仕事をする際、複数枚の画像に対して、加工やリサイズを施す必要があります。その際に、使用するのがこのアクション機能です^^ 「ウィンドウ」→「アクション」から動作を記録させ、「ファイル」→「自動処理」→「ドロップレットを作成」を押すと添付3のような→のアイコンが表示されます!

このアイコンに効果を適用させたいものをドラッグするとアクションに登録した動作を自動的に行ってくれるのです!添付の内容は、640pxに画像を加工してくれるようにアクションを登録してます^^


image3

以上のように、webに関わる作業効率をUPしてくれる機能がPhotoshopには複数あります^^ 新しい機能を覚えるのは、少し時間がかかったり、慣れるまで少し大変ですが、慣れてしまえば爆発的に作業効率UPなんてことも多々あるので、ぜひ今回共有させてもらったもので知らなかった!というものがあれば、取り入れてみてください^^

そして、ぜひみなさんがweb制作時にオススメの機能やツールなどがあれば

共有くださいね♪

8回の閲覧

© 2018 by Copen College & Copen Flap

  • Black Facebook Icon
  • Black Instagram Icon
  • Black YouTube Icon
  • Black Twitter Icon