1. DX支援サービス

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

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

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

  3. AI関連サービス

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

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

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

  1. SUNWEALC株式会社様 資産形成アプリ「enrich」のMVP開発支援

  2. 株式会社みらいワークス様 求人サイト「MOREWORKS」のメンテナンス支援

  3. 株式会社エムステージ様 Ruby/Railsのバージョンアップ支援

  4. 株式会社アイキューブドシステムズ様 CLOMO MDMのリプレイス開発支援

  5. ライオン株式会社様 「by me」のAI診断サービスの開発支援

  6. 株式会社TOEZ様 幼児向けのレッスン通信講座サイトおよび基幹システムの開発支援

  7. 株式会社カカクコム様 食べログノート の開発支援

  8. 有限会社秀栄社様 パーソナライズ絵本「JibunEHON」の開発支援

  9. 株式会社TRN様 不動産会社・建築会社向け_営業支援システム「renovo」の開発支援

  10. 株式会社Touch&Links様 新規CMSのシステム構築

  11. オフショア開発・長期ラボ型 Webアプリケーション開発事例/顧客ロイヤリティを高めるサービスの開発(株式会社ギフティ様)

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

  1. 株式会社ワイドウィンドウズ様 予約管理システムの既存機能の精査・変更と新規機能の追加およびUI/UXデザイン支援

  2. ライオン株式会社様 「by me」のAI診断サービスの開発支援

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

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

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

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

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

  8. 団体管理システム

  9. ITコンサルティング

  1. 株式会社アイキューブドシステムズ様 CLOMO MDMのリプレイス開発支援

  2. 株式会社マネーフォワード様 マネーフォワード クラウドの開発支援

  3. 株式会社フレンバシー様 ベジタリアン、ヴィーガン向けのレストラン検索サイトの開発

  4. ライオン株式会社様 「by me」のAI診断サービスの開発支援

  5. 株式会社カカクコム様 食べログノート の開発支援

  6. 大手建設コンサルティング会社I社様 「自然災害を検知するAI」の開発 

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

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

  9. 生産管理システム

  10. 仮想化サーバー導入

  11. タブレット端末導入

  1. VAREAL AI HUBの開発

  2. ライオン株式会社様 「by me」のAI診断サービスの開発支援

  3. 北海道大学様 オープンソースの大規模言語モデル(LLM)を使用したプロダクト共同研究開発

  4. 埼玉医科大学様 画像分類AIを用いた膠原病診断補助ツールの研究開発

  5. 大手建設コンサルティング会社I社様 「自然災害を検知するAI」の開発 

  1. ライオン株式会社様 「by me」のAI診断サービスの開発支援

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

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

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

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

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

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

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

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

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

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

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

DesignTech

【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人のブロガーが「いいね」をつけました。