複数パーツを爆速で書き出す無料Photoshopプラグインがスゴい

thumbnail
出典:render.ly

Webサイトや販促物のデザインをしていて、こんな悩みは無いでしょうか?

「クライアントから部分的にパーツを変えた複数パターンのデザインを見たいと要望があるが、photoshopでレイヤーを消したり表示したりしながら書き出していると、時間も取られて混乱してくる。」

この問題を解決できる、Adobe Photoshop用の無料プラグイン「render.ly」の使い方をご紹介します。

もう時間を無駄にしない!複数パターンの書き出しを実現する無料Photoshopプラグインrender.ly

もう時間を無駄にしない!複数パターンの書き出しを実現する無料Photoshopプラグインrender.ly

今回ご紹介する無料Photoshop(CC&CS6対応)プラグイン「render.ly」は非常に便利で、Webデザイナーの作業を効率化することができると思います。自分でも使ってみましたが、是非シェアしたいと思いました。

「render.ly」は、デザインパーツ(レイヤー)を組み合わせ、複数パターンのデザイン画像を書き出してくれる機能を持っています。そのスゴさは、Mashableが「THE 12 BEST PLUGINS FOR DESIGNERS」に選ぶほどです。

こんな形で、複数のパターンとボタンパーツを書き出すことができます。(以下は書き出したものを1枚の画像で貼付けたものです。実際は個別ファイルとして書き出されます。)

render.lyレンダリング結果

この機会に、使い方をみなさんに共有します。

 1:インストール・設定
 2:レイヤー名にプレフィックスを付与
 3:ボタン1つでレンダリング

1:インストール・設定

thumbnail

render.ly」のWebサイトにアクセスし、「GET STARTED」をクリックし、無料登録を行います。

データをダウンロードし、「renderly.zxp」というファイルを開くと、自動的にインストールが行われます。※Adobe Extension Managerがインストールされている必要があります。

インストールが完了したら、Adobe Photoshopを開きます。

Adobe Photoshopメニュー

Photoshopのメニューから「Photoshop > 環境設定 > 一般」を開きます。

Adobe Photoshop一般設定

上の画像の通り、3カ所のチェックボックスをチェックし、パスワード欄に任意のパスワードを入力します。(6文字以上であればOKです。できるだけセキュリティレベルの高いものをお選び下さい。)設定が終わったら、Photoshopを再起動します。

Photoshopエクステンション

Photoshopのメニューから「Photoshop > ウィンドウ > エクステンション > Renderly」を開きます。

Renderlyログイン

会員登録時に入力したメールアドレスとパスワードを入力し、「LOGIN」ボタンを押します。

Photoshop Renderly

先ほど「環境設定」で入力した、サーバーにアクセスするパスワードを入力し、「SAVE」ボタンを押して、インストール・設定は完了です。途中でプロセスが止まってしまう場合は、Photoshopを再起動して、再度試してみて下さい。

2:レイヤー名にプレフィックスを付与

renderlyサンプル

今回はこちらのサンプルを使用してご説明します。(もし必要でしたら、こちらよりPSDファイルをダウンロードして下さい。)

Renderlyを使用するには、レイヤー名に「+」や「-」などのプレフィックスを追加する必要があります。

Renderly説明

今回、設定したプレフィックスを順番に説明していきます。

[+]:これがRenderlyで特に重要な部分です。「+ bg green」と「+ bg blue」という形で「+」を付与すると、複数のレイヤー/レイヤーグループを切り替えて、それぞれのパターンの画像を書き出すことができます。今回は分かり易いように、背景色の切り替えで使用しました。

[-]:「- description」のように「-」を付与すると、書き出す画像から除外できます。説明や後から使用するレイヤー/レイヤーグループに適応して、レンダリング結果から除外できます。

[*]:「* logo」のように「*」を付与すると、「+」で追加したどのパターンでも表示することができます。共通して書き出すレイヤー/レイヤーグループに付与することになります。

[btn]&[:]:「btn blk」のように「btn」を付与し、構成するレイヤー/レイヤーグループに[:]を追加すると、それぞれの状態のボタン画像を書き出すことができます。

この他、[ico]や[img]が用意されています。これらのプレフィックスを設定したら、準備は完了です。

3:ボタン1つでレンダリング

Renderlyレンダリング

後は、ボタン1つで書き出せます。

RENDER SCREENS

[RENDER SCREENS]:複数パターンの画面イメージを全て書き出します。

RENDER ASSETS

[RENDER ASSETS]:ボタン・アイコン・背景画像など指定したパーツを書き出します。

最後に:より効率的に、よりクリエイティブに。

非効率な作業はイライラを生み、Webデザイナーのストレスになります。ストレスは、クリエイティブな思考を阻害してしまうでしょう。

今回ご紹介したような無料の素晴らしいツールを活用して、日々の作業を効率化し、ストレスを軽減して下さい。

より効率的に、よりクリエイティブに。

是非、クライアントのために、そして、その制作物を見るユーザーのために、今日もお仕事頑張って下さい。