「.png」とか「.jpg」とか書いときゃ十分でしょとか安易に考えておりますが。そんな事ないのでココでメモ。2014での情報です。cc以前のバージョンでは使えない機能もありますのでご注意を。サイズを各々変更したアートボードを用意し、それぞれにアセット名を含めたファイル名を指定します。この現象は、Photoshopでテキストのサイズを変更する際、バウンディングボックスでサイズを変えた場合に起きてしまう現象のようです。以下のアセットが生成されます。Illustratorで作成したデータをpng形式で保存したいとき、Photoshopのように「別名保存」ではpng形式に変換する事が出来なかったので正しい方法をメモします。メニューからファイル、書き出しを選ぶ。いずれかの方法でpng形式で書き出す事が出来る。Cloudを契約していれば、今すぐにでも導入できます。社内やクライアントに確認を依頼する際は、XDで簡単に発行できるURLひとつで共有できます。Photoshopの画像アセットでWEB用画像を生成していたところ、書き出された画像が元データと比べて明らかに色が変わっているという事象に陥りました。Photoshopの画像アセットでWEB用画像を生成していたところ、書き出された画像が元データと比べて明らかに色が変わっているという事象に陥りました。画像データを扱うとき、画像サイズはそのままで解像度だけを用途に合わせて変更する必要が出てくることもあります。ここでは、Photoshopを使って、画像の絶対的なサイズは維持したまま、解像度のみを変更する方法をご紹介します。「画像アセットなにそれ?」って人は、下部にAdobeの公式解説サイトを掲載しておくのでそちらをご参照ください。photoshop」で検索をおすすめします。Photoshopで【カンバスサイズを変更する方法】を初心者向けに解説した記事です。unityでサイズ3200x3400の画像をアセットにインポートすると、勝手に縮小されてしまい963x1023のサイズになってしまいます。縮小せずにインポートするにはどうすればよいでしょうか。結果は、PSB形式は正常でJPEG形式はボケています。PSB形式とJPEG形式の大きな違いはPhotoshopのすべての機能がサポートされていることです。Photoshopはそうはいきません。Photoshopの基本はいかに矩形や文字などのレイヤーを管理するかどうか。デザインする上では避けては通れない部分ですよね。CCから「画像アセットの生成」実装され、レイヤー管理はますます重要になりました。制作のご相談やお見積もりなど、まずはお気軽にお問い合わせください。本記事では、WebデザインカンプをPhotoshopで制作した時、画像の書き出しを「画像アセット生成」という機能で効率的に行う場合の、基本について解説しています。コーディングの準備として、PSDからJPGやPNGなどに書き出しを行う必要がありますが、「画像アセット生成」を使うと正確に効率的に行えます。2倍書き出しなどの拡大書き出しについて、失敗しない方法についても解説しています。デザインカンプをPhotoshopで制作する場合、基本的に再編集が容易なPSDデータで保存します。Webサイト制作の場合、ブラウザ上で画像を表示するにはPSDデータでは表示できないため、ブラウザで表示できるJPGやPNG、GIFなどの画像形式に変換する必要があります。コーディングするときに必要な画像は、PSDのような1枚ものの画像データではなく、1つ1つバラバラになったそれぞれの画像データです。それぞれの画像の特徴について詳しくは、Webで扱える画像について知ろう!基本の4つの画像形式とその特徴まとめをご覧ください。画像として書き出したいレイヤー/レイヤーグループの名前を、「任意のファイル名.拡張子」にします。ここでは例えばレイヤー名を「contact_img.jpg」、レイヤーグループ名を「about_img.png」と設定します。すると、自動的に「PSDファイル名-assets」というフォルダが、PSDファイルと同じ階層に作られます。そのフォルダの中に、先ほど拡張子を設定したレイヤー/レイヤーグループの画像が書き出されています。元のPSDを修正などして保存すると、保存する度に、拡張子を設定したレイヤー/レイヤーグループの画像が全て「PSDファイル名-assets」フォルダに書き出され、自動的に更新されます。[画像アセット]にチェックを入れても、「PSDファイル名-assets」フォルダができず、画像が書き出されないことがあるかもしれません。CC]メニュー(Winは[編集]メニュー)→[環境設定]→[プラグイン]の、[Generatorを有効にする]にチェックが入っているか確認してみましょう。画像アセット生成では、画質やサイズの変更など、生成する画像に対して色々な指定をして書き出すことができます。以下でどのような指定ができるのか、簡単に見ていきましょう。JPGかPNGで書き出す場合、画質を指定して生成することができます。ここでは例として、50%の画質を指定してJPGに書き出してみます。拡張子の後ろに画質を指定する記述をします。これで指定した画質で書き出すことができます。PNGの画質(種類)は、%指定等ではなくビット数(8、24、32)なので気をつけてください。PNGのビット数については、Webで扱える画像について知ろう!基本の4つの画像形式とその特徴まとめの「PNGの特徴」の項目をご覧ください。画像アセットはサイズを指定して生成することができます。ここでは例として、PSDに配置されているサイズの2倍(200%)を指定してJPGに書き出してみます。レイヤー/レイヤーグループ名の前に、指定サイズと半角スペースを入れます。これで指定サイズで書き出すことができます。画像アセットは1つのレイヤー/レイヤーグループから複数生成することができます。ここでは例として、PSDに配置されている等倍(100%)と2倍(200%)サイズの、2枚のJPGを書き出してみます。コンマ(,)もしくはプラス(+)で区切って、ファイル名や画質・サイズの指定をします。ファイル名が同じだとエラーが出るので、2倍サイズのファイル名には「@2x」を追加します。これで1つのレイヤー/レイヤーグループから複数の画像を書き出すことができます。アセットの初期設定の指定をすることで、2倍書き出しなどの設定を1行で一括して指定することができます。前提として、今まで見てきたように“書き出したいレイヤー/レイヤーグループ名を「任意のファイル名.拡張子」に変更しておく”という基本のところは指定しておく必要はあります。これで、PSDファイル名-assetsフォルダ内の2xというサブフォルダに、ファイル名に@2xが追加されて、2倍サイズの画像が書き出されます。これで、PSDファイル名-assetsフォルダ内に、先ほどの2xの他に1xというサブフォルダができ、等倍の画像も書き出されます。この初期設定ですが、個別のレイヤーに指定された設定がある場合は、その個別の設定の方が優先されます。アセットの初期設定について、詳しい解説はAdobe公式のレイヤーからの画像アセットの生成の「アセットの初期設定の指定」をご覧ください。2倍サイズなど拡大して画像アセット生成をした場合、画像がぼけてしまうことがあります。注意なのは、拡大サイズで配置されたスマートオブジェクトでも、中身がJPGやPNGのスマートオブジェクトの場合や、PSDやPSBでもスマートフィルターが適用されている場合、拡大して書き出すとぼけてしまう点です。JPGやPNGのスマートオブジェクトは、PSDもしくはPSBに置き換え、スマートフィルターは適用しないようにしましょう。SVGで書き出すオブジェクトは、コピー&ペースト時に「シェイプレイヤー」を選択しましょう。「ピクセル」はそもそもベクター画像ではないですし、「パス」はベクターデータですが線情報だけなので、「スマートオブジェクト」か「シェイプレイヤー」の2択になりますが、SVGで書き出すオブジェクトについては「シェイプレイヤー」を選択してください。「スマートオブジェクト」でも「シェイプレイヤー」でも、拡張子を.svgにすれば書き出しはできますが、「スマートオブジェクト」でペーストしたものは書き出した際、拡張子が.svgでも中味はラスター画像になってしまいます。それから、画像アセット生成をするにあたって、その下準備としてレイヤー整理をするとスムーズに行えますので、レイヤー整理については、Webデザイナーさん必見!デザインカンプ(Photoshop)のレイヤー整理でチームの生産性を上げよう!をご覧ください。PSDファイルのレイヤー又はそれを囲むレイヤーグループから、要素に適したサイズで画像の書き出しを自動で行ってくれるPhotoshopの新機能です。ファイル形式で書き出すことができます。「クイック書き出しの環境設定」で指定した設定に基づいて作業内容をすばやく書き出すには、「クイック書き出し」オプションを使用します。「クイック書き出し」オプションにアクセスするには、次のいずれかの操作をおこないます。して生成され、書き出す場所を選択するプロンプトが毎回表示されます。形式固有のパラメーターを設定することもできます。場合は、透明を有効化した状態(32-bit)でアセットを書き出すか、ファイルサイズの小さい画像(8-bit)で書き出すかを指定できます。場合は、書き出しの画質を設定できます。クイック書き出しの場所:クイック書き出しを使って画像を書き出す場所を選択するには、このオプションを使用します。次のいずれかを選択します。メタデータをクイック書き出し:書き出すアセットに著作権情報と問い合わせ先のメタデータを含めるには、このオプションを使用します。カラースペースに変換するかどうかを選択します。ドキュメントを画像として書き出すたびに書き出し設定を微調整するには、「書き出し形式」オプションを使用します。選択された各レイヤー、レイヤーグループ、アートボードは、個別の画像アセットとして書き出されます。bit)で書き出すかを指定できます。100%)を指定します。画像は、初期設定で透明です。アセットを書き出す場合は、以下に注意してください。サイズ:画像アセットの幅と高さを指定します。幅と高さは、初期設定で相互にロックされています。幅を変更すると、高さも比例して自動的に変更されます。書き出されるアセットのカンバス境界を指定する場合は、「カンバスサイズ」を参照してください。拡大・縮小:書き出される画像の大きさを選択します。このオプションは、解像度が大きなまたは小さいアセットを書き出すのに便利です。アセット拡大・縮小を変更すると画像サイズに影響します。再サンプル:再サンプル方法を選択します。再サンプルとは、画像のピクセル数または解像度のいずれかを変更した場合に(一般には画像のサイズ変更中に)画像データの量を変更することを示します。カンバスサイズ:アセットが特定の幅と高さを占める必要がある場合は、これらの値をカンバスサイズとして指定します。書き出し形式ダイアログのプレビューが更新され、境界内の中央に画像が表示されます。このオプションは、以下のようなシナリオで便利です。画像がカンバスサイズより大きい場合は、カンバスに対して設定された幅と高さの値にクリップされます。リセットをクリックすると、画像サイズで設定された値に戻すことができます。メタデータ:書き出すアセットにメタデータ(著作権情報および問い合わせ先)を含めるかどうかを指定します。書き出し形式ダイアログを使用して、選択したレイヤー、アートボード、またはドキュメントを複数のサイズのアセットとして書き出すことができます。選択した拡大・縮小オプションは、選択したすべてのレイヤーやアートボードに適用されます。様々な形式を使用して、レイヤーを個々のファイルとして書き出し、保存することができます。レイヤーの名前は保存時に自動的に付けられます。生成される名前を指定するオプションを設定することもできます。上での画像の表示に使用される標準的なモニターのカラースペースを定義しているからです。