<h3>前置き</h3>
<div style="padding-left: 15px;">
便利なPhotoshopですが<br />
隠れに隠れた機能が多いアプリケーション</p>
<p>そんなの知ってるよ！</p>
<p>と思うのも多々あるかと思いますが備忘録的な感じで紹介します</p></div>
<h3>特徴</h3>
<div style="padding-left: 15px;">
<p>WindowsではControlキーがMacのCommandキーに相当します。</p>
<ul>
<li>Shift : 選択範囲など「プラス」のイメージ</li>
<li>Control : コマンド実行、他Shift, Alt等との組み合わせ識別</li>
<li>Alt : 選択範囲など「マイナス」のイメージ</li>
</ul>
</div>
<h3>良く使うキー組み合わせ</h3>
<div style="padding-left: 15px;">
<table>
<tbody>
<tr>
<th>キー・マウス動作</th>
<th>動作内容</th>
</tr>
<tr>
<td>Control + T</td>
<td>選択されたレイヤーの自由変形</td>
</tr>
<tr>
<td>Control 押しながらドラッグ</td>
<td>選択レイヤーの移動</td>
</tr>
<tr>
<td>Control + Shift + クリック</td>
<td>複数レイヤー選択</td>
</tr>
<tr>
<td>Control + E</td>
<td>上位レイヤーと結合</td>
</tr>
<tr>
<td>Control + Shift + E</td>
<td>表示されているレイヤー統合</td>
</tr>
<tr>
<td>d</td>
<td>描画色・背景色を黒白に初期化</td>
</tr>
<tr>
<td>x</td>
<td>描画色・背景色の入れ替え</td>
</tr>
<tr>
<td>q</td>
<td>クイックマスクモード切り替え</td>
</tr>
<tr>
<td>Control + R</td>
<td>定規の表示・非表示切り替え</td>
</tr>
<tr>
<td>Tab</td>
<td>メインウィンドウ以外の表示・非表示切り替え</td>
</tr>
</tbody>
</table>
<p>※ 上記は設定で「ツールの変更にShiftキーを使用」を敢えて外しています</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/DL3J_nBjDG0?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/W8fgF99Q3YA?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
</div>


ps.jpg

Webデザインで使えそうなPhotoshop小技変

<p>UIという文字を頻繁に見かけるようになり、ワイヤーフレームやモックアップを制作するツールが多く生まれてきています。</p>
<p>以前、下記記事にてツールを紹介しましたが（すごい簡単にですが）<br />
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84.html" target="blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a><br />
(cometはまだ動きがないようですね・・・)</p>
<p>こういったツールではなく、素材として制作を提供してくれるサイト、ブログがあります。<br />
しかもフリーで！！<br />
その中でいいと思った3つをご紹介します。</p>
<h3>ChatアプリのUIテンプレート</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg" alt="Free Chat UI kit for Photoshop and Sketch  InVision" width="640"  class="alignnone size-large wp-image-9747" srcset="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg 1024w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-300x199.jpg 300w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-768x508.jpg 768w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-228x151.jpg 228w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision.jpg 1109w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Chatアプリの制作に役にたちそうなkitです。そのままでもいい感じなのですが、これを元に制作していくと良さそうです。</p>
<p>photoshopかsketchか選択してダウンロードできます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png" alt="スクリーンショット 2016-03-01 12.33.46" width="640" class="alignnone size-large wp-image-9748" srcset="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png 1024w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-300x209.png 300w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-768x534.png 768w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-228x159.png 228w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82.png 1088w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>デザインに使わなくて、どういったページが必要かを把握するだけでも十分良さそうです！<br />
こんなのがフリーだなんてどうかしてますね、すごいな・・・invision。</p>
<p><a href="http://www.invisionapp.com/chat" target="_blank" class="link">Free Chat UI kit for Photoshop and Sketch | InVision</a></p>
<h3>ワイヤーフレーム、フローチャートを作れるKIT</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg" alt="UI Tiles- Website Flowcharts" width="640" class="alignnone size-large wp-image-9749" srcset="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg 1024w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-300x201.jpg 300w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-768x515.jpg 768w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-228x153.jpg 228w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>これはデザイナーはもちろん、ディレクターにも良いと思います！<br />
こちらも凄まじい種類のページテンプレートが用意してあり、PNG,AI,PSD,SKETCH形式のものがダウンロードできます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png" alt="スクリーンショット 2016-03-01 12.49.02" width="400"  class="alignnone size-full wp-image-9751" srcset="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png 639w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-260x300.png 260w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-228x263.png 228w" sizes="(max-width: 639px) 100vw, 639px" /></p>
<p><a href="https://pixelbuddha.net/ui-tiles/" target="_blank" class="link">UI Tiles: Website Flowcharts</a></p>
<h3>高品質なECサイトのUIテンプレート</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg" alt="Portland UI Kit Free Sample  Craftwork – Thoroughly Handpicked UI Freebies" width="640" class="alignnone size-large wp-image-9750" srcset="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg 1024w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-300x201.jpg 300w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-768x515.jpg 768w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-228x153.jpg 228w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>こちらは無料ではTOPページのみになりますが参考になります。</p>
<p><a href="http://getcraftwork.com/portland-ui-kit/" target="_blank" class="link">Portland UI Kit Free Sample | Craftwork – Thoroughly Handpicked UI Freebies</a></p>
<p>というかここのサイトがすごい。。。</p>
<p><a href="http://getcraftwork.com/ui-kits/" target="_blank" class="link">UI Kits | Craftwork – Thoroughly Handpicked UI Freebies</a></p>
<p>こういうの活かしながらより良いサイト制作に勤しみたいと思います。</p>


UIデザイン制作にすごい役立ちそうなフリー素材３つ

<p>ECにおいて商品画像は売れ行きを左右するとても大事な要素です。</p>
<p>ジュエリーのように小さい商品を撮影する際にはマクロレンズを使用する事が多々あると思います。</p>
<p>マクロレンズで撮影をする際にジュエリー全体をきれいに見せるために絞りを開いてピンとが合う領域を多くすると照明が足りなくなったり、ブレの原因になったりなかなか撮影がスムーズにいきません。</p>
<p>そこでピントが合う領域を少しずつずらした写真を合成する多焦点合成の方法をお伝えしたいと思います。</p>
<h2>同ポジで撮影</h2>
<p>まずは下のように同ポジで商品を撮影します、この時できるだけ細かくピンをずらした方が合成がきれいに仕上がります。3枚しか載せていませんが合計6枚撮りました。</p>
<p>合成する際に明るさや色味についても修正が可能ですが、できるだけそろえて撮影する事をお勧めします。</p>
<p><a href="/uploads-archive/2016/02/2-2.jpg" rel="attachment wp-att-9625"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9625" src="/uploads-archive/2016/02/2-2.jpg" alt="2" width="640" height="425" srcset="/uploads-archive/2016/02/2-2.jpg 640w, /uploads-archive/2016/02/2-2-300x199.jpg 300w, /uploads-archive/2016/02/2-2-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="/uploads-archive/2016/02/4-1.jpg" rel="attachment wp-att-9627"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9627" src="/uploads-archive/2016/02/4-1.jpg" alt="4" width="640" height="425" srcset="/uploads-archive/2016/02/4-1.jpg 640w, /uploads-archive/2016/02/4-1-300x199.jpg 300w, /uploads-archive/2016/02/4-1-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="/uploads-archive/2016/02/5-1.jpg" rel="attachment wp-att-9629"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9629" src="/uploads-archive/2016/02/5-1.jpg" alt="5" width="640" height="425" srcset="/uploads-archive/2016/02/5-1.jpg 640w, /uploads-archive/2016/02/5-1-300x199.jpg 300w, /uploads-archive/2016/02/5-1-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<h2>位置を揃える</h2>
<p><a href="/uploads-archive/2016/02/1-1.png" rel="attachment wp-att-9633"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9633" src="/uploads-archive/2016/02/1-1.png" alt="1" width="640" height="390" srcset="/uploads-archive/2016/02/1-1.png 640w, /uploads-archive/2016/02/1-1-300x183.png 300w, /uploads-archive/2016/02/1-1-228x139.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>つぎに撮影した画像をレイヤーとして取り込みます。このときレイヤーはラスタライズされている必要があります。</p>
<p>全てのレイヤーを複数選択して、「編集」から「レイヤーを自動整列」のダイヤログを開きます。</p>
<p>投影法は自動設定にチェックを入れてOKをクリックします。</p>
<p>これで位置（上下左右）のズレは修正ができました。</p>
<h2>画像を合成する</h2>
<p>続いて全てのレイヤーを選択した状態で「編集」から「レイヤーを自動合成」をクリックします。</p>
<p><a href="/uploads-archive/2016/02/7.jpg" rel="attachment wp-att-9636"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9636" src="/uploads-archive/2016/02/7.jpg" alt="7" width="640" height="499" srcset="/uploads-archive/2016/02/7.jpg 640w, /uploads-archive/2016/02/7-300x234.jpg 300w, /uploads-archive/2016/02/7-228x178.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>画像をスタックにチェックをいれてOKをクリックすれば合成が完了します。</p>
<p>「シームレスなトーンカラー」にもチェックを入れておくと色味の修正も同時に行てくれます。</p>
<h2>完成</h2>
<p>下の画像が6枚を合成した画像です。</p>
<p><a href="/uploads-archive/2016/02/8.jpg" rel="attachment wp-att-9640"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9640" src="/uploads-archive/2016/02/8.jpg" alt="8" width="640" height="429" srcset="/uploads-archive/2016/02/8.jpg 640w, /uploads-archive/2016/02/8-300x201.jpg 300w, /uploads-archive/2016/02/8-228x153.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>今回は白バックですが、抜けがあって、全ての写真で抜けがボケている場合は商品だけにピンが来るように合成されます。</p>


商品撮影で役立つ！photoshopで多焦点合成を行う方法

<p>photoshop ccやsketchでも使えるというプラグインです。</p>
<p>UI designを助けてくれるという触れ込みです。</p>
<p><a href="http://labs.invisionapp.com/craft" class="link" target="_blank">Craft by InVision LABS</a></p>
<p>以下の流れは基本「Photoshop」での話になりますのでご了承下さい。</p>
<h2>Craftのインストール</h2>
<p>まずは公式HPへリンクし、インストーラーをダウンロードします。<br />
windows/macは自動で判断しますので迷うことはありません。</p>
<p>インストーラーをダウンロードしたら起動します。<br />
そして、「sketch」か「photoshop」のどちらをインストールするか選択します。</p>
<p>これでインストール完了です。<br />
（photoshopを再起動させれば、エクステンションに追加されています。）</p>
<p>こちらのプラグインには、<br />
「Duplicate」「Type」「Photos」<br />
と大きく3つの機能があります。</p>
<p>簡単にはなりますがちょっとずつ説明していきます。</p>
<h3>Duplicate</h3>
<p>要素やシェイプを複製できるもので、ギャラリー等の制作に最適かもしれません。</p>
<p><a href="/uploads-archive/2016/02/6ap6Jo4mVg.gif" target="_blank"><img decoding="async" src="/uploads-archive/2016/02/6ap6Jo4mVg.gif" alt="6ap6Jo4mVg" width="640" class="alignnone size-large wp-image-9541" /></a></p>
<p>まず一つ元となるものを作り、それを選択し、<br />
縦、横にいくつ、<br />
どのくらいのマージンで、<br />
複製をするのかを決める感じです。</p>
<h3>Type</h3>
<p>こちらはあらゆるダミーテキストを一瞬で挿入できます。<br />
名前、見出し、文章、住所、日付、メールアドレス等など&#8230;</p>
<p>こちらも元のテキスト（なんでもOK）を用意し、それを選択しておきます。<br />
パネルを開き、変更したいものをクリックするだけで変更されます。</p>
<p><a href="/uploads-archive/2016/02/93JN3Zl7lD.gif" rel="attachment wp-att-9544"><img decoding="async" src="/uploads-archive/2016/02/93JN3Zl7lD.gif" alt="93JN3Zl7lD" width="640" class="alignnone size-large wp-image-9544" /></a></p>
<p>同じボタンを押してもランダムなので違う内容になります。</p>
<p>惜しいのは英語しかないという点ですね。日本語版があればすごくいいのに。。。</p>
<h3>Photos</h3>
<p>こちらは写真を挿入する機能になります。</p>
<p>ただ写真を貼り付けるだけなのかなと思っていましたが、作ったシェイプに合わせて写真を当て込んでくれるものでした。</p>
<p><a href="/uploads-archive/2016/02/sisGyFJoe1.gif" rel="attachment wp-att-9545"><img decoding="async" src="/uploads-archive/2016/02/sisGyFJoe1.gif" alt="sisGyFJoe1" width="640" class="alignnone size-large wp-image-9545" /></a></p>
<p><a href="https://unsplash.com/" target="_blank">Unsplash</a>というサイトから持ってこれますが、パソコンのフォルダやdropboxも指定できます。</p>
<p>どの場合も写真を選べるわけではなく、ランダムで入れてくれます。<br />
(自身のPCの場合、どこかのフォルダを選ぶと、そのフォルダ内にある写真をランダムで挿入します)</p>
<p>ですので、ダミー写真を用意するのに便利かと思います。</p>
<h2>終わりに</h2>
<p>管理画面、モックアップの作成にかなり使えるプラグインだと思いました。<br />
特に、SNS系、メディア系なんかのサイトに威力を発揮できるかもしれません。</p>
<p>僕は第一校のデザインは、全部同じ写真で出しちゃったりするので、ぜひ使用してみたいと思います。</p>
<p>おまけですが、こちら載せておきます。<br />
<a href="http://photoshopvip.net/ultimate-ps-tip" target="_blank">意外と知らない、Photoshop CCの隠し小技テクニック20個まとめました。 &#8211; PhotoshopVIP</a></p>


Photoshopが便利になるプラグイン「craft」

<p>前回に引き続きPhotoShopの機能を紹介します。</p>
<p>バッチ処理、、、いい響きですね。楽が出来て楽しいです。</p>
<p>難しく考える必要はありません。以下の手順を参考にしてみてください。</p>
<h2>アクションを作ってみる</h2>
<div style="padding-left: 15px;">
ざっくり行きます。<br />
ウィンドウに「アクション」を表示させておきます。</p>
<p>アクション表示の下部にフォルダのようなものがあるので押下。<br />
<a href="/uploads-archive/2015/12/7d3d6eb4ee703155109128d8dbbe7fd6.jpg" rel="attachment wp-att-8970"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/7d3d6eb4ee703155109128d8dbbe7fd6-300x231.jpg" alt="01_create_action_set のコピー" width="300" height="231" class="alignnone size-medium wp-image-8970" srcset="/uploads-archive/2015/12/7d3d6eb4ee703155109128d8dbbe7fd6-300x231.jpg 300w, /uploads-archive/2015/12/7d3d6eb4ee703155109128d8dbbe7fd6-228x176.jpg 228w, /uploads-archive/2015/12/7d3d6eb4ee703155109128d8dbbe7fd6.jpg 757w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>さらにアクションをフォルダの中に作ってみます。<br />
<a href="/uploads-archive/2015/12/e982681a6286a4a19cf98e851dacd734.jpg" rel="attachment wp-att-8972"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/e982681a6286a4a19cf98e851dacd734-300x244.jpg" alt="02_create_action のコピー" width="300" height="244" class="alignnone size-medium wp-image-8972" srcset="/uploads-archive/2015/12/e982681a6286a4a19cf98e851dacd734-300x244.jpg 300w, /uploads-archive/2015/12/e982681a6286a4a19cf98e851dacd734-228x185.jpg 228w, /uploads-archive/2015/12/e982681a6286a4a19cf98e851dacd734.jpg 734w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>アクションを作ったら自動的に「録画ボタンのような何か」が赤くなっています。<br />
この状態で録画？開始となります。<br />
<a href="/uploads-archive/2015/12/05d3004d9221e523d04cd87319b4d897.jpg" rel="attachment wp-att-8973"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/05d3004d9221e523d04cd87319b4d897-300x182.jpg" alt="03_action_start のコピー" width="300" height="182" class="alignnone size-medium wp-image-8973" srcset="/uploads-archive/2015/12/05d3004d9221e523d04cd87319b4d897-300x182.jpg 300w, /uploads-archive/2015/12/05d3004d9221e523d04cd87319b4d897-228x138.jpg 228w, /uploads-archive/2015/12/05d3004d9221e523d04cd87319b4d897.jpg 719w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>記録した内容は「背景と思われる白い部分を選択して、そこから画像を抽出して特定のフォルダに保存する！」です。<br />
<a href="/uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b.jpg" rel="attachment wp-att-8974"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b-300x230.jpg" alt="04_action_contents のコピー" width="300" height="230" class="alignnone size-medium wp-image-8974" srcset="/uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b-300x230.jpg 300w, /uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b-768x590.jpg 768w, /uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b-1024x786.jpg 1024w, /uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b-228x175.jpg 228w, /uploads-archive/2015/12/070d56034f1bdf52f606a5c6bbf63e3b.jpg 1180w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>あとはメニューの「ファイル」＞「自動処理」＞「バッチ」を選択し、<br />
一括処理したいフォルダを選択、あるいは開いてるファイルをプルダウンで選択してOKを押すだけです！
</p></div>


PhotoShopで自動処理を活用してみよう！

<p>画像加工の中でもWeb制作において<br />
使用頻度が高いであろうトリミングにフォーカスを当ててみました。</p>
<p>筆者自身はイラストレーターでもデザイナーでもないので<br />
あくまでデータの扱い方という側面で記載します。</p>
<h3>画像抽出におけるコツ</h3>
<div style="padding-left: 15px;">
  おおまかに分けると以下に集約されます。</p>
<ol>
<li>抽出したい画像の輪郭に対して内外の特徴を把握する</li>
<li>部分的に1が異なればパーツパーツに分けて捉える</li>
<li>内側と外側の特徴を差別化し、その差を作業レイヤーで強調する</li>
</ol>
<p>  文面では解りづらいと思うので<br />
  実例にて紹介していきます。
</p></div>
<h3>実例</h3>
<div style="padding-left: 15px;">
  今回はある程度トリミングのしやすい画像を選びました。<br />
  動物(モフモフ系)は毛の境が非常に高度なテクニックを要するので割愛です。</p>
<div id="attachment_8763" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/maneki5_pic1.jpg"><img aria-describedby="caption-attachment-8763" decoding="async" loading="lazy" src="/uploads-archive/2015/12/maneki5_pic1-300x200.jpg" alt="ターゲット元画像" width="300" height="200" class="size-medium wp-image-8763" srcset="/uploads-archive/2015/12/maneki5_pic1-300x200.jpg 300w, /uploads-archive/2015/12/maneki5_pic1.jpg 1024w, /uploads-archive/2015/12/maneki5_pic1-228x152.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8763" class="wp-caption-text">ターゲット元画像</p></div>
<p>  招き猫を抽出します。<br />
  背景はグレーのグラデーションがかかったホワイト系。ターゲットは金と黒。</p>
<p>  やることは「白はより白く、色味(金等)・黒はより濃くして差別化する」です。</p>
<p>  作業レイヤーを作って「自動選択」で大雑把に選択して選択範囲を2,3px縮小して反転。<br />
  その後、彩度をグッと上げると招き猫が怖い感じに強調されます。<br />
<div id="attachment_8773" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1.png"><img aria-describedby="caption-attachment-8773" decoding="async" loading="lazy" src="/uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-300x169.png" alt="色味を強調" width="300" height="169" class="size-medium wp-image-8773" srcset="/uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-300x169.png 300w, /uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-1024x576.png 1024w, /uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-228x128.png 228w, /uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8773" class="wp-caption-text">色味を強調</p></div></p>
<p>  ここでのポイントは「背景はほぼ無彩色」です。<br />
  なので、ある程度選択範囲の中に背景が入っていてもターゲット(だけ)の色が変わります。</p>
<p>  次に、色味のあるところを濃く(暗く)して背景と更に差を作りましょう。<br />
  選択範囲とレイヤーはそのままで、「特定色域の選択」にて「レッド」「マゼンタ」などのブラック要素を増やしましょう。<br />
  　※ 絶対値のラジオボタンをONにしておくのがコツです。</p>
<div id="attachment_8774" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41.png"><img aria-describedby="caption-attachment-8774" decoding="async" loading="lazy" src="/uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-300x169.png" alt="有彩色を濃くした" width="300" height="169" class="size-medium wp-image-8774" srcset="/uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-300x169.png 300w, /uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-1024x576.png 1024w, /uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-228x128.png 228w, /uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8774" class="wp-caption-text">有彩色を濃くした</p></div>
<p>  ズームアップしてみるとこんな感じまでなりました。<br />
<div id="attachment_8775" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71.png"><img aria-describedby="caption-attachment-8775" decoding="async" loading="lazy" src="/uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-300x169.png" alt="輪郭ズーム" width="300" height="169" class="size-medium wp-image-8775" srcset="/uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-300x169.png 300w, /uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-1024x576.png 1024w, /uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-228x128.png 228w, /uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8775" class="wp-caption-text">輪郭ズーム</p></div></p>
<p>  今度は逆に、背景のグレー寄りをホワイトよりにしましょう。<br />
  背景を自動選択でザックリ選択後、拡張2,3pxして「特定色域の選択」にて<br />
  ホワイト、グレーのブラック要素をマイナスします。さっきの逆です。<br />
<div id="attachment_8776" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921.png"><img aria-describedby="caption-attachment-8776" decoding="async" loading="lazy" src="/uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-300x169.png" alt="背景をよりホワイトに" width="300" height="169" class="size-medium wp-image-8776" srcset="/uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-300x169.png 300w, /uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-1024x576.png 1024w, /uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-228x128.png 228w, /uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8776" class="wp-caption-text">背景をよりホワイトに</p></div></p>
<p>  あとは最後の仕上げです。<br />
  輪郭部分を強調します。上述の方法を同じく範囲選択後、「アンシャープマスク」をかけます。<br />
  微調整は画像を見ながら、基本的に全ての設定値は「大きめ」で。<br />
<div id="attachment_8777" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1.png"><img aria-describedby="caption-attachment-8777" decoding="async" loading="lazy" src="/uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-300x169.png" alt="エッジ強調" width="300" height="169" class="size-medium wp-image-8777" srcset="/uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-300x169.png 300w, /uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-1024x576.png 1024w, /uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-228x128.png 228w, /uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8777" class="wp-caption-text">エッジ強調</p></div></p>
<p>  最後に背景を選択します。<br />
  適当に「自動選択」後、必要に応じてギザギザをごまかすために「輪郭を滑らかに」1-2px,<br />
  輪郭をぼかす 1-2px した後で「選択範囲を反転」し、作業用に作ったレイヤーは削除して切り抜くだけです！</p>
<div id="attachment_8778" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661.png"><img aria-describedby="caption-attachment-8778" decoding="async" loading="lazy" src="/uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-300x169.png" alt="切り抜かれた招き猫" width="300" height="169" class="size-medium wp-image-8778" srcset="/uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-300x169.png 300w, /uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-1024x576.png 1024w, /uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-228x128.png 228w, /uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8778" class="wp-caption-text">切り抜かれた招き猫</p></div>
<p>  <div id="attachment_8771" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/maneki5_pic1.png"><img aria-describedby="caption-attachment-8771" decoding="async" loading="lazy" src="/uploads-archive/2015/12/maneki5_pic1-300x200.png" alt="出来た画像" width="300" height="200" class="size-medium wp-image-8771" srcset="/uploads-archive/2015/12/maneki5_pic1-300x200.png 300w, /uploads-archive/2015/12/maneki5_pic1.png 1024w, /uploads-archive/2015/12/maneki5_pic1-228x152.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8771" class="wp-caption-text">出来た画像</p></div>
</div>
<h3>最後に</h3>
<div style="padding-left: 15px;">
  さまざまな画像があり、シーンに応じて使う技術は異なります。<br />
  似たような画像であれば「アクション」を使用することで<br />
  ボタン一つ＋微調整で済むでしょう。</p>
<p>  「クイックマスク」などを使わなくても出来てしまう<br />
  ちょっとした加工技術みっちょな紹介でした。
</p></div>


PhotoShopでの画像加工のコツ基礎編

<p>Photoshopのccを契約して月約1000円を支払って使用しておりますが、<br />
常に最新の機能が使えるので便利ですね！</p>
<p>今年の6月にCC2015がリリースされ、今使用している中で嬉しい機能を紹介したいと思います。</p>
<h2>レイヤースタイルの重ねがけ</h2>
<p>それは、レイヤースタイルの重ねがけです。</p>
<p>下の画像をご覧ください。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8547" src="/uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164.png" alt="スクリーンショット 2015-11-24 12.22.27" width="630" height="400" srcset="/uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164.png 861w, /uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164-300x190.png 300w, /uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164-228x145.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>レイヤースタイルを適用する際に出てくる画面ですが、<br />
「境界線」「シャドウ(内側)」「カラーオーバーレイ」「グラデーションオーバーレイ」「ドロップシャドウ」<br />
の横に「＋」があるのがわかりますでしょうか？</p>
<p>この「＋」がある項目は、追加することが出来るので重ねがけができるんです！！</p>
<p>例えば、境界線の場合ですがまずはシェイプを作って、<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-8550" src="/uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e.png" alt="スクリーンショット 2015-11-24 12.22.51" width="630" height="496" srcset="/uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e.png 745w, /uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e-300x236.png 300w, /uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e-228x180.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>レイヤースタイルのパネルを開き、境界線の横の「＋」を押します。<br />
すると、下に同じ境界線が追加されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8553" src="/uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23.png" alt="スクリーンショット 2015-11-24 12.23.42" width="630" height="398" srcset="/uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23.png 880w, /uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23-300x190.png 300w, /uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23-228x144.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>そして2つの境界線にそれぞれ設定すると、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8556" src="/uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd.png" alt="スクリーンショット 2015-11-24 12.27.58" width="630" height="401" srcset="/uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd.png 855w, /uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd-300x191.png 300w, /uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd-228x145.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8558" src="/uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a.png" alt="スクリーンショット 2015-11-24 14.34.20" width="630" height="521" srcset="/uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a.png 681w, /uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a-300x248.png 300w, /uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a-228x188.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>このようにひとつのシェイプに境界線を二重にすることができました！<br />
もっと重ねることもできます！</p>
<p>以前は、2つレイヤー用意したり、一度ラスタライズしたり等々やらなければなりませんでしたが、<br />
随分と簡単に設定できます。</p>
<p>ひとつ残念なのが、作ったPSDを他のverで開くと、境界線がまったくなくなってしまう点です。<br />
せめて最初の一つはそのままで・・・とは思いますが仕方ないですね。。。</p>
<p><a class="link" href="https://blogs.adobe.com/creativestation/photoshop_cc_2015">新登場、メジャーアップデート Photoshop CC 2015年リリース | Adobe Creative Station</a></p>


PhotoshopのCC2015ではレイヤースタイルの重ねがけが出来る！

<p>AdobeさんからついにCreative Cloudライブラリなるものがでていました。</p>
<p>これは簡単にいうと、Creative Cloudのアカウントでクラウド上にお気に入りのアセット（ブラシ、グラフィック、フォント、カラー、スタイル）を保存しておき、別のデバイスでも同じように利用できるというものです。</p>
<p><a href="http://www.adobe.com/jp/creativecloud/libraries.html" target="_blank">アドビのファイル＆アプリでアセットを同期 | Creative Cloudライブラリ</a></p>
<p><a href="https://helpx.adobe.com/jp/creative-cloud/how-to/creative-cloud-libraries.html" target="_blank">Creative Cloudライブラリの使い方入門 | Adobe Creative Cloudチュートリアル</a></p>
<p>僕はCCはphotoshopを持っているので、早速導入してみました。<br />
まぁ導入といっても、photoshopの更新をしたら、ライブラリが勝手に入っていたんですが・・・</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6123" src="/uploads-archive/2014/10/2fab95d7a81fa10bbabef0cfc2fc5287-1024x648.png" alt="" width="640" height="406" /></p>
<p>こんな感じでサイドにライブラリが追加されていました。</p>
<p>&nbsp;<br />
ちなみにライブラリの作成は制限がなく、ライブラリには1000個までアセットが登録できます。<br />
自分なりにライブラリを作って、分類分けをするのがいいですね！</p>
<p>さっそく、フラットアイコンというライブラリを作り、フリーのアイコンを追加してみました。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8.png" alt="スクリーンショット 2014-10-28 14.47.00" width="399" height="509" class="alignnone size-full wp-image-6124" srcset="/uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8.png 399w, /uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8-235x300.png 235w, /uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8-228x290.png 228w" sizes="(max-width: 399px) 100vw, 399px" /><br />
&nbsp;<br />
このライブラリは簡単にドラッグ&#038;ドロップで簡単に使用することができます。</p>
<p><img decoding="async" src="/demo/abe/sample/201410281500.gif" alt="スクリーンショット 2014-10-28 14.47.00" width="640" /><br />
&nbsp;</p>
<p>簡単に、よく使用してる素材を呼び出すことができますね！<br />
以前こんなプラグインがないかと探し、<a href="http://pixeldropr.com/" target="_blank">Pixel Dropr</a><br />
というものを見つけて買おうかどうか迷ったんですが、もう必要ないかもしれません。</p>
<p>ユーザーによって使い方は様々あると思うので、この機能はけっこうありがたいですね！</p>
<p>ちなみに少し前にアプリがいろいろ出ていたのですが、<br />
<a href="http://www.adobe.com/jp/creativecloud/catalog/mobile.html" target="_blank">アドビモバイルおよびタブレットアプリ | Adobe Creative Cloud</a><br />
iPhoneやiPadでブラシやシェイプを作り、ライブラリと連携することができるようです。<br />
どこでも制作ができるようになったみたいなふれ込みですが、それがいいのか悪いか・・・笑</p>
<h2>おまけ、、、</h2>
<p>先週の記事の中で、<br />
興味ある記事がありました。<br />
<a href="http://liginc.co.jp/web/js/other-js/121082" target="_blank">LIGのソースコードレビュー会で使用している共有ツールとライブラリの活用方法の紹介 | 株式会社LIG</a></p>
<p>このツールもさることながら、ソースコードレビュー会、これはいいなぁと思いました。会社としてレベルアップするためにもこういう会は必要だと思うので、弊社でも実践してみようかな。。。と思います。</p>


求めていた機能がついに！AdobeのCreative Cloudライブラリ

<h2>Kuler</h3>
<p>言わずと知れたKulerですが、<br />
cs4からはデフォルトで入っているようです。<br />
配色のパターンを探すのにとても便利です！<br />
<img decoding="async" loading="lazy" class="alignnone  wp-image-4744" alt="スクリーンショット 2014-04-22 13.41.30" src="/uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca.png" width="641" height="508" srcset="/uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca.png 838w, /uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca-300x238.png 300w, /uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca-228x180.png 228w" sizes="(max-width: 641px) 100vw, 641px" /></p>
<p>&nbsp;</p>
<p><a href="http://www.adobe.com/jp/products/kuler.html" target="_blank">デザイナー向け色見本を作成 | Adobe Kulerをダウンロード</a></p>
<p>&nbsp;</p>
<h2>Velositey</h3>
<p>こちらはなんと数クリックでwebサイトのワイヤーフレームができてしまうという代物です。<br />
テンプレートですので、完全に思った通りにはできないですが、<br />
近いものを作って後は自分で編集すれば良いかと思います。<br />
<img decoding="async" loading="lazy" class="alignnone  wp-image-4743" alt="スクリーンショット 2014-04-22 13.41.58" src="/uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1.png" width="640" height="536" srcset="/uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1.png 839w, /uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1-300x251.png 300w, /uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1-228x191.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>&nbsp;</p>
<p>実際に作成してみました。<br />
ちょっとスペースの開け方は要調整ですね。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-4741" alt="sd-proof-XXX-home-v0" src="/uploads-archive/2014/04/sd-proof-XXX-home-v0-1024x963.jpg" width="640" height="601" srcset="/uploads-archive/2014/04/sd-proof-XXX-home-v0-1024x963.jpg 1024w, /uploads-archive/2014/04/sd-proof-XXX-home-v0-300x282.jpg 300w, /uploads-archive/2014/04/sd-proof-XXX-home-v0-228x214.jpg 228w, /uploads-archive/2014/04/sd-proof-XXX-home-v0.jpg 1700w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://dandkagency.com/velositey/" target="_blank">Velositey &#8211; Website Layout Builder for Photoshop</a></p>
<p>&nbsp;</p>
<h2>Distribute Layer Spacing Horizontal</h3>
<p>こちらは、水平方向にならんだオブジェクトを等間隔で並べてくれるプラグインです！<br />
幅が違うオブジェクトを目測で並べたりする時もあり、その際にいいかもしれません。</p>
<p>&nbsp;</p>
<p>before<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4745" alt="スクリーンショット 2014-04-22 13.49.20" src="/uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0.png" width="502" height="133" srcset="/uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0.png 502w, /uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0-300x79.png 300w, /uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0-228x60.png 228w" sizes="(max-width: 502px) 100vw, 502px" /></p>
<p>after<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4748" alt="スクリーンショット 2014-04-22 13.49.41" src="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png" width="500" height="137" srcset="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png 500w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-300x82.png 300w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-228x62.png 228w" sizes="(max-width: 500px) 100vw, 500px" /></p>
<p>端のオブジェクトを元に等間隔で並べてるようですね。</p>
<p>&nbsp;</p>
<p><a href="http://morris-photographics.com/photoshop/scripts/distribute-horizontally.html" target="_blank">Adobe Photoshop Scripts | Trevor Morris Photographics</a></p>
<p>&nbsp;</p>
<h2>Transform Each 2.0</h3>
<p>こちらは複数のオブジェクトを個々で変更するように、変形できるプラグイン(スクリプト)です。<br />
例えば、３つ並んでいる同じオブジェクトをちょっと小さくしたいなって思う時、一気に変更できたらいいのになぁ<br />
と思うことありませんか？<br />
全部選択して変形しようとすると、おかしくなっちゃうので、これは地味に便利かと思います。</p>
<p>例えば下の画像を全部70％に縮小したい場合、<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4748" alt="スクリーンショット 2014-04-22 13.49.41" src="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png" width="500" height="137" srcset="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png 500w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-300x82.png 300w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-228x62.png 228w" sizes="(max-width: 500px) 100vw, 500px" /></p>
<p>レイヤーを全部選択して、このプラグインを発動させると・・・<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4747" alt="スクリーンショット 2014-04-22 13.50.51" src="/uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b.png" width="498" height="119" srcset="/uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b.png 498w, /uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b-300x71.png 300w, /uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b-228x54.png 228w" sizes="(max-width: 498px) 100vw, 498px" /></p>
<p>一気に変形することができます！<br />
素晴らしい！！</p>
<p><a href="http://blog.kam88.com/en/transform-each-20.html" target="_blank">Captain Awesome &#8211; English &#8211; Transform Each 2.0</a></p>
<p>&nbsp;</p>
<h2>Tych Panel</h3>
<p>こちらは複数の写真を設定した内容のもと、自動的に並べてくれるプラグインです。<br />
メインビジュアルや、グリッド状で写真を並べたい時にいいかもしれません。</p>
<p>設定は、写真と写真のスペース、ボーダーの設定、場所等いろいろできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-4746" alt="スクリーンショット 2014-04-22 13.59.11" src="/uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971.png" width="640" height="521" srcset="/uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971.png 836w, /uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971-300x244.png 300w, /uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971-228x185.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>試しにデフォルトのTopでやってみました。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-4742" alt="スクリーンショット 2014-04-22 14.03.30" src="/uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460.png" width="640" height="403" srcset="/uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460.png 794w, /uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460-300x188.png 300w, /uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460-228x143.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>これは設定さえすれば、だいぶ手間が省けそうですね！</p>
<p>&nbsp;</p>
<p><a href="http://coliss.com/articles/build-websites/operation/design/photoshop-extension-tychpanel.html" target="_blank">複数の画像のレイアウトを自動化できるPhotoshopのエクステンション -Tych Panel | コリス</a></p>


とっても便利なphotshopのプラグイン5選

<p>Photoshopを使い始めて数年経ちましたが、</p>
<p>最近になってようやく知った、便利なショートカットを少しだけご紹介します。</p>
<p>&nbsp;</p>
<h2>移動ツール選択中に「ctrl(command) + 左クリック」</h3>
<p>このショートカットを使うと、Illustratorでオブジェクトを選択するときと同じように、</p>
<p>クリックした場所にある要素のレイヤーを選択することができます。</p>
<p>大量のレイヤーの中から、目的の要素があるレイヤーを選択するのに便利です。</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss00.jpg" width="656" height="525" /></p>
<p>↓</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss01.jpg" width="656" height="525" /></p>
<p>&nbsp;</p>
<h2>移動ツール選択中に「ctrl(command) + J」</h3>
<p>このショートカットを使うと、選択しているレイヤーを複製することができます。</p>
<p>同じ要素を多数複製したりする場合に便利です。</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss02.jpg" width="656" height="525" /></p>
<p>&nbsp;</p>
<p>覚えるととても便利なショートカットですので、</p>
<p>使ったことのない方は、是非使ってみてください。</p>


Blogブログ

Articles

Contact Us