PhotoshopでWebデザイン

簡単なアクションを作る

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
繰り返し行われる作業をアクションとして登録し、デザインワークを自動化と高速化させる方法をみていきます。
講師:
05:05

字幕

Webデザインをしていると、似た作業の繰り返しが多いことに気が付きます。Photoshopには、作業を自動化させる機能がいくつか備わっています。日々のデザインワークをスピードアップさせる機能を見ていきましょう。まずはアクション。アクションは一度実行した作業を記録して使い回すことができる機能です。ここの例では、このロボットの画像を使ってRetina 用の 2 倍画像と通常サイズの 2 枚をワンクリックで切り替えられる様なものを作っていきたいと思います。では、「アクション」パネルを開いていきましょう。もし、この「アクション」パネルがない場合は「ウィンドウ」>「アクション」で出すことができます。一番最初に、「初期設定のアクション」というアクションセットが用意されています。中を開いてあげると中に沢山アクションが入っています。こういう風にアクションをまとめているこのフォルダのことを「アクションセット」という風に言います。アクションセントを作成するには一番下のこのフォルダのボタンを押します。アクションの種類によって別々のアクションセットを作って名前を付けて保存しておくといいと思います。今回は、Retina 用のテストをしたいものをまとめておくのでMobile Testing とします。 その中にアクションを作成していきましょう。このボタンが新規アクションの作成ボタンです。「名前」を Retina DisplayTest にしましょうか。Retina Display Testその下、「セット」とあります。どのアクションセットに保存するかなのでMobile Testing で問題ありません。次、「ファンクションキー」もし、キーボードのショートカットを付けたい場合は、ここを選んであげます。F1+Shift とかできます。Shift+F1で、このアクションが実行とかすることが可能です。「なし」にしましょう今回は。その下、「カラー」色を付けることができます。これは、この「アクション」パネル「ボタンモード」という裏モードがあります。それにした時に、このカラーがあるとより押しやすいという感じになっています。今回は「レッド」にしましょうか。後でボタンモードも見ていきたいと思います。「記録」「記録」にしてあげるとこのレコードのボタンが赤くなります。この後に行った作業が全て記録されていきます。時間は関係ないので焦らずに記録していきましょう。まずは、今のこの状態Retina バージョンではないこの 1 倍のサイズを記録しておきたいので「ヒストリー」からこの「スナップショット」ボタンをおします。 スナップショットを作成して今の状態を保存します。そうすると、RetinaDisplay Test の下に「作成:スナップショット」と入りました。作業は全て記録されています。次に、Retina ディスプレイ用の2 倍サイズにしていきたいと思います。「イメージ>「画像解像度...」単位を「%」に切り替えて「200」と2倍サイズにします。OKそうすると、「アクション」の中に「画像解像度」中を見てみると「200%」だという風に書いてあります。記録を終わらせる時は隣の「停止」ボタンを押します。アクションが作成できました。では一回このドキュメントを一番最初の状態に戻したいので「ファイル」>「復帰」これで、このドキュメントを開いた一番最初の状態に戻ります。この状態で、この RetinaDisplay Test を選択します。この「再生」ボタンを押してあげると自動的に先ほど記録したアクションを全て実行してくれます。「ヒストリー」パレットを見るとスナップショットが作成されています。尚且つ、サイズは 2 倍になっています。ボタンモードを見ていきましょう。「アクション」パネルの右上のこのボタンクリックして「ボタンモード」に切り替えます。 ボタンモードの一番下に先ほど作った Retina Display Testというボタンが出来上がっています。これが先作ったこのアクションに対応しています。ボタンモードの場合は「再生」ボタンを押す必要がありません。Retina Display Test のこのラベルをクリックするだけで実際にスナップショットが作成されて尚且つ、2 倍になっているかと思います。「ヒストリー」のパネルを開いてスナップショット、Retina サイズ簡単に切り替えが行える様になりました。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。