WebDesign – colopixie / Webデザイン、CSSのテクニック、Webで使える素材を紹介していきます。 Sun, 31 Dec 2017 12:50:56 +0000 ja hourly 1 https://wordpress.org/?v=4.9.7 62157443 Photoshop CC 14.1 に画像パーツ書き出し機能がやってきた /webdesign/photoshopcc_generator/ /webdesign/photoshopcc_generator/#comments Mon, 09 Sep 2013 05:41:01 +0000 /?p=904 09-10 12時21分 追記しました/はてブコメありがとうございます 今日のPhotoshopの14.1のアップデートがきて、以前ご紹介した、Mac専用ソフト、Slicyと同じような機能（.pngなどをフォルダー/レイ […]

投稿Photoshop CC 14.1 に画像パーツ書き出し機能がやってきたはcolopixieの最初に登場しました。

]]> Photoshop CC 14.1 に画像パーツ書き出し機能がやってきた
09-10 12時21分 追記しました/はてブコメありがとうございます
今日のPhotoshopの14.1のアップデートがきて、以前ご紹介した、Mac専用ソフト、Slicyと同じような機能（.pngなどをフォルダー/レイヤーにつけると書きだされる）が搭載されました。

実際に触ってみたので、簡単なやり方を。
ここで使っているサンプルファイルはこちら • sample.psdからダウンロードできます。

レイヤーやフォルダーに書き出したいファイルの名前をつけます。

これはSlicyと同様ですが、[ファイル名].pngや[ファイル名].jpg
スクリーンショット 2013-09-09 14.02.17

オプション

ファイル形式/オプション デフォルト値      
PNG PNG32(アルファ対応) PNG8 PNG24 PNG32
指定方法： [file].png8 [file].png24 [file].png32
JPG 8 1-10 1% – 100%  
指定方法： [file].jpg5 [file].jpg10%  
GIF        
スケーリング   1-n% (数値)px x (数値)px  
指定方法： 200% [file].jpg 250px x 250px [file].jpg  

画像アセットにチェック

スクリーンショット 2013-09-09 14.23.14
ファイルから、生成＞画像アセットにチェックを入れます。

ファイルを保存

スクリーンショット 2013-09-09 14.25.29

スクリーンショット 2013-09-09 14.25.32
ファイルを保存すると、保存フォルダーに、[filename]-assetsというフォルダーができ、その中に上で指定した形式で保存されています。
Windowsでもきちんと書きだされます！
ScreenShot_NoName_2013-9-10_12-31-12_No-00
Windows8/PhotoshopCC14.1

上のPSDファイルを書き出すと、

  • JPGで品質7のbackground.jpgとGIFのbackground.gif
  • PNGで400%にスケーリングした、logo.pngとJPGで品質40%で250×250にリサイズされたlogo.jpg
  • PNGで200%にスケーリングされたbutton@2x.pngとPNGのbutton.png
  • PNGのbutton2.png

が書き出されるはずです。

まとめ

Slicyでは、名前指定をしたレイヤーに基いてサイズ指定ができたりできたので、少しオプションは物足りない気がしますが、Photoshopの機能であるので、MacだけではなくWindowsでもこの機能が使えるので便利ではないかと思います。
ただ、iPhoneの切り出しのために、09-10 12時21分 追記ここからPSDファイルをRetina対応で作っていないのであれば、200% button@2x.png,button.png(Slicyでいう「.png+@2x」)、作っていればbutton@2x.png,50% button.png(Slicyでいう「@2x.png」)、と長々と指定したり、キャンバスからはみ出てしまった部分も書き出してしまうということがあるので(下記画像/オレンジ枠)、まだSlicyの出番が多くあるかもしれません。。。
スクリーンショット 2013-09-09 14.31.25

参考：Introducing Adobe Generator for Photoshop CC | PHOTOSHOP.COM BLOG

投稿Photoshop CC 14.1 に画像パーツ書き出し機能がやってきたはcolopixieの最初に登場しました。

]]> /webdesign/photoshopcc_generator/feed/ 2 904 Slicyはあっと驚くほど便利だった。 /webdesign/mac-slicy/ /webdesign/mac-slicy/#comments Tue, 21 May 2013 03:01:18 +0000 /?p=821 Slicyは、PSDをD&Dするだけで、Photoshopでレイヤーやフォルダに指定した方法で名前をつければ書きだしてくれるアプリです。 これがめっちゃ便利！驚いたたまげた。 App Storeで買いました。 […]

投稿Slicyはあっと驚くほど便利だった。はcolopixieの最初に登場しました。

]]> mac_slicy
Slicyは、PSDをD&Dするだけで、Photoshopでレイヤーやフォルダに指定した方法で名前をつければ書きだしてくれるアプリです。
これがめっちゃ便利！驚いたたまげた。
App Storeで買いました。

今回は、Slicyの公式のデモファイルを使って、解説していきます！ちょうべんり！
公式のデモファイルは、下記からダウンロードできます（いきなりZIPダウンロードになります）
button_download

通常 (Basic Tagging)

「Basic Tagging」のフォルダーを開き、PSDを開いてみましょう。
スクリーンショット_5_21_13_9_53_AM-2
PSDを開くと、フォルダーやレイヤーに”.png”や”.jpg”など追加します。

そうすると・・・？
スクリーンショット_5_21_13_9_56_AM
そのPSDを”Slicy”にドラッグアンドドロップすると、ぽこん！と先ほどの”.png”のついたフォルダーやファイルが出てきます。
これを上の”Copy”を押して全て保存するか、個別のファイルをドラッグアンドドロップして、保存出来ます！

書き出しのサイズ指定 (Explicit Sizing)

今度は、テキストやシェイプのそのままサイズを書きだすのではなく、指定の大きさに切り出したい場合に使えますね！
やり方としては3つあって、「レイヤーマスクを適用する」「クリッピングマスクを適用する」「下のレイヤーに”@bounds”を付ける(Slicyするときは消える)」
スクリーンショット_5_21_13_10_16_AM

上のデフォルトで書きだした時よりも、サイズが異なっていることがわかると思います。
スクリーンショット_5_21_13_10_19_AM

書き出しのサイズ指定”スライス” (Multiple Slices)

今度は、レイヤーの形で書きだしてくれます。スライス範囲を「@slices」のフォルダーに入れれば、その箇所のスライスを書きだしてくれます。”.png”を付けるのはスライスです。
スクリーンショット_5_21_13_10_58_AM
スクリーンショット_5_21_13_10_19_AM

@2xの書き出し(Auto@2x.psd)

Retina用の書き出しをしたいとき…。 1xで作ったものを自動的に2xにして、Retinaファイルを書きだしてくれます！
やり方は簡単！「.png+@2x」など.pngのあとに+@2xを付けるだけ！
スクリーンショット_5_21_13_11_07_AM
スクリーンショット_5_21_13_11_09_AM

@2xから@1xの書き出し(Auto@1x.psd)

今度は、iPhoneの2倍のサイズでデザインを作っていて、@2xと@1xのファイルを作りたい場合は、「@2x.png」のように@2x.pngを付けるだけ。上の自動2xと違うのは”.png”の前なので注意が必要！
スクリーンショット_5_21_13_11_11_AM

スクリーンショット_5_21_13_11_08_AM-3

もしも2倍の画像だけにしたい場合(No Auto@1x.psd)

新規レイヤーを作り、「lc-auto-1x = off」を名前にするだけ。
スクリーンショット_5_21_13_11_10_AM

スクリーンショット_5_21_13_11_08_AM

という書き出し方でした！

更にこれが便利

自動で更新！

スクリーンショット 2013-05-21 11.24.57 AM
“save”を押すと、こんな画面がでてきて、「Repeat Automatically」を選択すると、PSDを保存すると自動的にSlicyが更新されてファイルが更新されます。更にすでに書き出し済みであればそのファイルを更新してくれます、(ﾟ∀ﾟ)神のﾖｶｰﾝ
スクリーンショット_5_21_13_11_24_AM
しかも、履歴がのこり、戻すことができます！なんてやさい！やさしい！

PSDは1つではない！

もし、ページごとにPSDを分けているならとても便利な機能！複数のPSDを放り投げれるのです！
スクリーンショット_5_21_13_11_23_AM

Slicyを買う前は、Cut&Slice me – Photoshop plugin to export your assets – cut and slice meが(ﾟ∀ﾟ)神のﾖｶｰﾝだったのですが、やはりプラグインとあって動作が重く、案件のPSDを書き出すのに１時間もかかること（途中でフリーズしてる？？）もありました。なので、Slicyすごいですう！
感動しました。

追記：2013/05/22 11時46分

Cut&Slice meとSlicyの書き出し時間を比較してみました。
書き出すPSDは、ボタン5個です。

  • Cut&Slice me 40秒くらい
  • Slicy 20秒くらい

とファイルによって異なりはしまうが、重いファイルになると更に変わると思います。
快適快適い(((((((((((っ･ω･)っ
あ、Cut&Slice me重いのはマシンのせいだって？
スクリーンショット_5_22_13_11_51_AM
どやァ！MBP Retina 15インチでも重いのですヽ(#ﾟДﾟ)ﾉ┌┛(ノ´Д｀)ノ

投稿Slicyはあっと驚くほど便利だった。はcolopixieの最初に登場しました。

]]> /webdesign/mac-slicy/feed/ 5 821 美しいセリフフォント Garamond #LOVEFONT /webdesign/garamond-lovefont/ /webdesign/garamond-lovefont/#respond Fri, 21 Dec 2012 13:32:49 +0000 /?p=635 今年も残るところ10日…！初詣のCMを見たりするとすごい年末感ありますね。2012のまとめはそのうち書きましょう。 さて今日は、WEBCRE8.jpの優さんから#LOVEFONT Advent Calendar 2012 […]

投稿美しいセリフフォント Garamond #LOVEFONTはcolopixieの最初に登場しました。

]]> garamond_01
今年も残るところ10日…！初詣のCMを見たりするとすごい年末感ありますね。2012のまとめはそのうち書きましょう。

さて今日は、WEBCRE8.jpの優さんから#LOVEFONT Advent Calendar 2012に声をかけていただいて参加させていただきました。21日目です。Garamondにしてみました。

Garamond

garamond_02
なんとGaramond（ギャラモン）は16世紀という長い歴史でさらに様々なバリエーションが生まれ続けてきたというのです。Variation of Garamond
そのバリエーションは、元はGaramondですが大きさ、ハネなんてところが変更されています。下のHやoでも重ねてみると全然異なっていることがわかりますね…
garamond_09
Garamond v Garamond | Physiology of a typeface

Garamondと聞いて思い浮かぶのはなんでしょうか？

garamond_06
たとえば、Appleの広告のキャッチコピー「Think different」やロゴなんかが割りと知られているのではないでしょうか。
ただ、コンデンス体なのでそのまま使うのは難しいかもしれません。

garamond_07
レギュラー体。そのままタイプしてもそれなりのものになるところがいい。
細身なので、エレガント・高級感がでます。

特徴

（Mac標準で入っているTimesと比べてみました。）
garamond_03
Qのヒゲがすごい特徴的だと思います。（Qがゲシュタルト崩壊・・・）

garamond_04
Timesと比べ、細身です。469の連結部分？が離れていますね！

(Trajan Proと比べてみた)
garamond_08
Qが特徴といえば、Trajan Proも特徴的だなーと思って比較してみると・・・。
Tranjan ProもQの形やその他英字も横幅が小さく特徴的です。
バランスをみるとやはりGaramondがいいと思います。

garamond_05
そして、日本語（ヒラギノ明朝 Pro）とGaramondの組み合わせもとても読みやすいなとおもいます。

入手

GaramondはOffice でインストールされるフォントであるようにOfficeをインストールすることでフォントが追加されます。
またAdobe GaramondについてはAcrobatやCSシリーズをインストールすると追加されるようです。
最近では、typekitでもAdobe Garamondが使えるのでWebで使いたいと思えばそちらが使えます。
Search results for Garamond | Typekit

こうして見ていてもGaramondは美しく見やすいフォントだなと改めて思いました。
またGaramondを今回初めて詳しく調べてみたのですが、たくさん情報があり愛されているフォントなんだなぁとおもいました。
これからも機会があればGaramond！使っていきますー。

投稿美しいセリフフォント Garamond #LOVEFONTはcolopixieの最初に登場しました。

]]> /webdesign/garamond-lovefont/feed/ 0 635 Fireworksメモ /webdesign/fireworks-memo/ /webdesign/fireworks-memo/#respond Sun, 29 Jul 2012 12:54:31 +0000 /?p=526 最近、Fireworksを使い始めたので、メモで記事を。 Fireworksがよくメモリ不足になる問題の解決法 | tuglog! FireWorks.20 | Webデザインやチュートリアル、Fireworks界を盛り […]

投稿Fireworksメモはcolopixieの最初に登場しました。

]]>
最近、Fireworksを使い始めたので、メモで記事を。