2015年 3月 の投稿一覧

【セミナー情報CSS Nite @Co-Edo, Vol.19-20『Webデザインの現場ですぐに役立つ Photoshop仕事術』

book

4月9日、10日の2デイズ、『Webデザインの現場ですぐに役立つ Photoshop仕事術』の出版記念を兼ねたセミナーがコワーキングスペース茅場町Co-Edoにて開催されます。私、当ブログ管理人もVol.20に出演させていただきます。ぜひご参加の検討をいただけると幸いです!

CSS Nite @Co-Edo, Vol.19-20
『Webデザインの現場ですぐに役立つ Photoshop仕事術』

【Vol.1】2015年4月9日(木)19:30-21:00
【Vol.
2】2015年4月10日(金)19:30-21:00

コワーキングスペース茅場町Co-Edo
〒104-0033 東京都中央区新川1-3-4 PAビル5F

参加費 3,000円(両日割、および、書籍持参によるキャッシュバックあり)

詳細はこちら Vol.19Vol.20

Webデザインの現場ですぐに役立つ Photoshop仕事術

「Webデザインの現場ですぐに役立つ Photoshop仕事術」本日発売!

book

共著で執筆させていただきました「Webデザインの現場ですぐに役立つ Photoshop仕事術」が本日発売されました。

『Webデザインの現場ですぐに役立つ Photoshop仕事術』
出版社: ソシム

<本書の主な内容>

・Webデザインをスムーズに行うための設定をガイドライン

・素早く効率的にカンプ作成を行うための準備と各種TIPS

・マルチデバイス向けのデータを簡単に作る実践テックニック 他

◆Amazon
http://www.amazon.co.jp/dp/488337971X

◆Facebookページ
https://www.facebook.com/photoshop4web

Photoshop初心者からPhotoshopを使いこなしているプロの方まで、どなたが見ても新しい発見があるような、とても内容の濃い1冊となっています。

今回Web業界の第一線でご活躍されている共著の方々とお仕事をさせていただき、とてもいい経験になりました。

著者の鷹野 雅弘さん、 黒葛原 道さん、 牧下 浩之さん、ならびにソシム担当編集者様に感謝です!

書店へ足を運んだ際は、是非お手にとって見ていただけばとおもいます。

Retina対応用画像の作成について@2x

最近Retinaディスプレイ対応画像を制作する機会が増えてきています。

Photoshop CCから機能追加された「画像アセット機能」ではレイヤー名に200%とRetina対応用画像のファイル名(□□□□@2x.jpg)を書いておくことで画像サイズ200%の画像を生成することが可能です。

しかし上記の方法で書き出された画像には注意が必要です。

下記画像をみていただくと分かる通りテキストレイヤーはくっきり綺麗に拡大されているのに対し後ろの写真がぼやけてしまっているのがわかります。

原因は画像アセット機能で保存される画像はスマートオブジェクトに対応していない為画像が荒れてしまいます。

この機能で綺麗に書きだすにはテキストレイヤーやシェイプレイヤーに限られてしまうのでRetinaディスプレイ対応させたい画像というのは写真が多いため機能として致命的です。

 

そこで今回はDearpsの考えるRetinaディスプレイ対応のための解像度2倍の画像を作成する一番最適な方法をご紹介します。

まず下記の記事より「ぶっこ抜きスクリプト.jsx」をダウンロードして下さい。

ぶっこ抜きスクリプト http://dearps.lovwar.com/2010/12/bukko/

Retinaディスプレイ対応させる画像を作成する際の注意点

・写真は極力解像度が高いものを用意。

・写真を配置する際最初にスマートオブジェクト化しておく
(埋め込み配置、リンクを配置で読み込んだ場合は最初からスマートオブジェクト化された状態になります。)

・シェイプレイヤーやテキストレイヤーはラスタライズ化させない。

Retina対応用(サイズ200%)の画像を作成する。

①Retina対応用に高解像度版画像を作成したいレイヤー(レイヤーグループ)を選択します。

②[ファイル]メニューの[スクリプト]から[参照]を選択し、先ほどダウンロードした「Dearps_bukkonuki.jsx」を実行します。

③すると選択していたレイヤー(レイヤーグループ)が別ファイル抜き出されます。

④[ファイル]メニューの[イメージ]から[画像解像度]を選択し画像解像度を200%にします。(@3xにしたい場合は300%)

⑤これでRetinaディスプレイ用の画像の出来上がりです。

画像アセット機能で作成された画像と比較すると後ろの写真が綺麗に書きだされていることがわかります。

ぶっこ抜きスクリプト@2xを作ったので配布します。

ぶっこ抜いた後の画像サイズ2倍にする作業も自動化させたいという方のために 「ぶっこ抜きスクリプト@2x」を作成しました。

下記リンク先よりスどうぞ!

↓ぶっこ抜きスクリプト@2x ダウンロード↓

最後に宣伝。

この度共著でPhotoshopの本を執筆させていただきました。2015年3月13日にソシム社より発売になります。今回紹介したようなWebデザインに役立つスクリプトやTipsを多数紹介させて頂いています。下記バナーがamazonへのリンクとなっております。

ご興味がある方は是非御覧ください!

Webデザインの現場ですぐに役立つ Photoshop仕事術

スライス作成スクリプト

Photoshopでスライスを作成するには[スライスツール]もしくは[レイヤーに基づく新規スライス]で作成する方法の2種類があります。

しかしそれぞれ不満がありました。

・[レイヤーに基づく新規スライス]はレイヤーグループに対してはNG

・スライスに名前を付け忘れる。
(書き出した画像をみて‘ユーザー_01.jpg’とかになっていてはじめて気がつく…)

・スライス名を確認するのにスライスオプションダイアログを開く必要があるので面倒

・スライスをレイヤーとして管理できない

等など…

特に[レイヤーに基づく新規スライス]はレイヤーグループに対してはNGが致命的ですね。

Photoshopってバージョンアップするごとに素晴らしい機能が追加されているのに、「スライス」に関してはけっこうノータッチなんですよね。

CCから機能追加された「画像アセット機能」を使えってことなんだろうけどいまいち馴染めない…そんな方も多いのではないでしょうか。

私が「画像アセット機能」を使わない理由はこんな感じです。

・作業を共有する場合相手がCC以上じゃないといけない
・タグの付け漏れがぱっと見で分からない
・画質をタグで設定できるけどこれはやっぱりWeb用に保存のダイアログでプレビューを見ながら最適な画質を設定するべき
・画像アセットの「@2x」機能がスマートオブジェクトに対応していない
(こちらの記事で触れていますRetina対応用画像の作成について@2x)

そこで今回はスライスに関する不満を解消させるスクリプトを作成したのでご紹介させていただきます。

まずはじめに下記リンク先よりスライス作成スクリプトをダウンロードしてください。

↓slicescript.zip ダウンロード↓

slicescript.zipを解凍すると「選択範囲からスライスを作成x.jsx」と「レイヤーからスライスを作成x.jsx」の2つのスクリプトファイルができます。

2つのスクリプトの使用方法は下記のとおりです。

【レイヤーからスライスを作成x.jsxの使用方法】

①レイヤーパネルでスライスを作成したいレイヤー(レイヤーグループ)を選択します。

②[ファイル]メニューの[スクリプト]から[参照]を選択し、先ほどダウンロードした「レイヤーからスライスを作成.jsx」を実行します。

③[スライス作成]ダイアログが表示されるのでスライス名を入力し、[確定]ボタンをクリックします。

④[レイヤー]パネルに「Webレイヤー」が作成され、その中に、[スライス作成]ダイアログボックスで設定したスライスのレイヤーが作成されます。

【選択範囲からスライスを作成x.jsx】

①[ファイル]メニューの[スクリプト]から[参照]を選択し「選択範囲からスライスを作成x.jsx」を実行します。

②選択範囲のバウンディングボックス が表示されるのでそれをスライス対象のサイズに変形させて確定(◯ボタンをクリック)します。

③[スライス作成]ダイアログが表示されるのでスライス名を入力し、[確定]ボタンをクリックします。

④[レイヤー]パネルに「Webレイヤー」が作成され、その中に、[スライス作成]ダイアログボックスで設定したスライスのレイヤーが作成されます。

※[選択ツール]で選択範囲を作成した状態でスクリプトを実行してそのまま選択範囲をスライス領域にすることもできます。

「Webレイヤー」は通常非表示になっていますがこれを表示することによってスライスを可視化できるのでプリントアウトをするなど指示書としても活用できます。

[注意]
このスクリプトは[スライスツール]、[レイヤーに基づく新規スライス]との併用はできません。

各スクリプトは下記のような役割をイメージしていただくとわかりやすいと思います。
[スライスツール] →「選択範囲からスライスを作成x.jsx」
[レイヤーに基づく新規スライス] →「レイヤーからスライスを作成x.jsx」

実際にこのスクリプトを使用している動画です。

最後に宣伝させてください!

この度共著でPhotoshopの本を執筆させていただきました。2015年3月13日にソシム社より発売になります。今回紹介したようなWebデザインに役立つスクリプトやTipsを多数紹介させて頂いています。下記バナーがamazonへのリンクとなっております。

ご興味がある方は是非御覧ください!

Webデザインの現場ですぐに役立つ Photoshop仕事術