1. DX支援サービス

    進化したデジタル技術を浸透させることで人々の生活をより良いものへと変革する

  2. ソフトウェア開発サービス

    VAREALだからできる、RubyとRuby on Railsに特化した、素早く柔軟なソフトウェア開発

  3. AI関連サービス

    データ活用と機械学習を用いたビジネスの着実な深化を。

  4. クリエイティブサービス事業

    美しいだけではない
    機能的UI/UXと正しいコーディング。

  5. 自社製品のご紹介

    自社製品のご紹介

  1. イベントサイト 「オンラインで集まろう 学研クリスマス&おとしだまウィーク」

  2. 株式会社ミクシィ様 チケット販売サイトの開発支援

  3. 株式会社ドワンゴ様 e-learningシステム「N予備校」

  4. スカイライト コンサルティング様コーポレイトサイトリニューアル

  5. ハイブリィド株式会社 様 [ IT-Manager SD ]

  6. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  7. 国際的機関の組織内システム開発

  8. 既存会計サービスのUI/UXデザイン改善

  9. 株式会社 クリニカル・トライアル 様 希少疾患SNS「RareS.(レアズ)」

  10. 保育園関連情報メディア開発

  11. 飲食店マッチングネイティブアプリ開発

  12. マッチングサイトメッセージ機能開発

  1. 製造業のDX支援〜営業日報管理システム開発〜

  2. ウォータージェット加工.com サイトリニューアル

  3. 佳秀バイオケムサイトリニューアル

  4. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  5. 佳秀工業株式会社コーポレートサイトリニューアル

  6. 開発コンサルティング

  7. 団体管理システム

  8. ITコンサルティング

  1. Webサイト訪問者分析のためのデータ分析基盤構築

  2. 製造業のDX支援〜営業日報管理システム開発〜

  3. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  4. 生産管理システム

  5. 仮想化サーバー導入

  6. タブレット端末導入

  1. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  1. イベントサイト 「オンラインで集まろう 学研クリスマス&おとしだまウィーク」

  2. ウォータージェット加工.com サイトリニューアル

  3. 佳秀バイオケムサイトリニューアル

  4. スカイライト コンサルティング様コーポレイトサイトリニューアル

  5. ハイブリィド株式会社 様 [ IT-Manager SD ]

  6. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  7. 国際的機関の組織内システム開発

  8. 既存会計サービスのUI/UXデザイン改善

  9. 株式会社 クリニカル・トライアル 様 希少疾患SNS「RareS.(レアズ)」

  10. 人材マネジメントシステムUI/UXデザイン

  11. 保育園関連情報メディア開発

  12. Vareal株式会社中途採用情報サイト

Design

【Photoshop】名前を付けるだけ!一瞬で切り出せる「画像アセット」が便利すぎる!

デザイナーの福田です。
Photoshopの「画像アセット」は使っていますか?これはPSDファイルからJPG、PNG、GIF、SVG画像を簡単に生成してくれる大変便利な機能です。今回はこの「画像アセット」機能について紹介します。

「画像アセット」について

以前は画像の切り出しはスライス機能で書き出すのが定番でした。その代わりとなるのがこの「画像アセット」です。スライスと比べると大幅に切り出す時間を短縮できるのでまだ、使ったことがない方は是非試してみて下さい。では、さっそく使い方を説明していきます。

「画像アセット」の使い方

1. まずはPSDでファイルを保存します。
2. 書き出したいレイヤー名の後ろに拡張子を追加します。
(使用できる拡張子はJPG、PNG、GIF、SVGの4つです。)

3. 「ファイル」 > 「生成」 > 「画像アセット」にチェックを入れます。

すると、これだけでpsdファイルが保存されている階層にフォルダが自動生成され、
その中には拡張子を設定した画像が書き出されます。

サイズを指定する

2倍で書き出す

スマホに対応させるため、画像を2倍で書き出したい場合もあると思います。
その場合はレイヤー名の前に「200%」と追加すると2倍サイズで画像を書き出してくれます。

複数サイズで書き出す

等倍と「200%」の2サイズ書き出したい場合は以下のようにレイヤー名をコンマかプラスで区切ります。


レイヤー名が同じだとエラーが起きるので重複しないよう変更して下さい。

注意点
2倍サイズなど拡大する場合はベクター画像はスマートオブジェクトに変換しないと画質が劣化してしまいます。

画質を指定する

JPGとPNGは画質を指定して書き出すこともできます。

JPG

画質を80%にしたい場合は拡張子の後ろに「80%」と追記します。
0〜100%の間で指定できます。

PNG

pngの場合はビット数で指定するので数値は「8, 24, 32」にいずれかになります。

その他「画像アセット」の便利な使い方

フォルダごとでも書き出せる

「画像アセット」はレイヤー、一つ一つだけでなくフォルダごと書き出すことも可能です。内包しているフォルダ名のみ設定して下さい。レイヤーが多い場合はフォルダでまとめて書き出すと楽です。

マスクを使って書き出せる

レイヤーマスクを適用させた部分のみ書き出すことも可能です。

クリピングマスクも同様に利用可能です。

まとめ

最後にレイヤー名の指定方法をおさらいします。

Web制作の場合、画像を数十枚書き出す機会は多いので「画像アセット」を使うか使わないかで作業スピードが大幅に変わってきます。業務を効率化したい方は是非、使ってみて下さい。

VAREAL(バレアル)はWeb制作の仕事も受け付けておりますのでお気軽にお問い合わせください。


Varealの制作部門のサービス内容はこちら
クリエイティブサービス事業

Varealの制作部門の実績はこちら
WORKS クリエイティブサービス

関連記事

%d bloggers like this: