サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
参議院選挙2025
dearps.lovwar.com
ホーム / zeplin / Photoshopのデザインデータをエンジニアに引き継ぐ際に利用したいハンドオフツール「Zeplin」の使い方｜Dearps Webサイトやアプリを制作する際にデザインとコーディングを分業化している会社さんは多いと思います。 その場合よく課題にあがるのがデザイナーとエンジニア間の連携について。 デザインカンプとコーディングされた仕上がりの差を極力なくすためにデザイナー側でマージン、フォント、カラーなどを細かく指定したコーディングガイド(以下ガイド)を作成するのですが、これがけっこう面倒な作業で時間もかかります。 これデザイナーにとって過去のスライス作業並みにモチベーションが下がります↓↓↓ この面倒なガイド作成を猛烈楽にするサービス「Zeplin」を紹介します。 Photoshopからプラグインを使用してZeplinにデザインデータをアップすることにより自動で
「Adobe MAX Japan」— 2017年11月28日（火）パシフィコ横浜 ベテランほど知らずに損してるPhotoshop［MAX Special］ Adobe MAX Japan Photshopセッションにて鷹野雅弘（スイッチ）さんと登壇させていただきました。ご来場いただいた方はありがとうございました！ 私のパートでお話させていただいたエクステンションなどのURLをお知らせします。 またセッション中に使用したWebサイトのサンプルデータとセッションで紹介したBootcomp3の重要機能だけに絞ったコンパクト版をMAX Editionとして作成したので配布させていただきます。 ぜひご利用ください！
Photoshop CCからレイヤーまたはレイヤーグループの名前にファイル形式の拡張子（.jpg/.png/.gif）を追加することで自動で画像アセットが生成され、ソースの PSD ファイルと同じサブフォルダーに保存されるようになりました。 このリネームの作業を効率化させるために今までAdobeが公式に提供している「Adobe Layer Namer」を使用していたのですがPhotoshop CC 2018にアップデートしたら使用できなくなってしまいました。 なので急遽「Asset Renamer」というエクステンションを作成したので配布させていただきます。 「Asset Renamer」のインストール方法について ダウンロードしたzipファイルを解凍します。 解凍されたフォルダ「AssetRenamer」を下記ディレクトリに移動します。 【Mac OS】 Library/Applicat
Photoshop CC 2017では新規ドキュメントダイアログが大きく変わりました Photoshop CC 2017にアップデートしてまず気づくのは新規ドキュメントのダイアログが大きく変わったことだと思います。この変更によって使い勝手が良くなったかというと… 上記のようないろいろと文句をつけたくなる仕様でした。 (Adobe Stockを周知させたい思惑があるのかなぁ。。。) さらに新しいダイアログになって許せない最大の問題点はダイアログの立ち上がりスピードが遅い！ 下記動画を見ていただけたら一目瞭然だと思います。 あきらかに従来のダイアログの方が早いですね。複数のアプリを立ち上げていたらその差は顕著です。 インターフェイスも従来の方が洗練されていると思います。 ということで新規ドキュメントのダイアログを従来のものに変更する方法を紹介します。 ①[Photoshop CCメニュー]/[
�10倍ラクするデザインカンプ制作 Photoshop CC 2019に「Bootcomp」を導入すればWebサイトやアプリのデザインカンプ制作にかける時間を大幅に短縮することが可能です。 ダウンロードする フォーマット作成 Webサイトやアプリのデザインをスタートする際にまずはレイアウトのガイドを作成するなど事前準備に時間がかかっていました。 Bootcompを使えば１クリックでフォーマットが瞬時に作成されるのですぐにデザイン作業をスタートさせることができます。 画像挿入もワンストップ シェイプを作成してクリックするだけで画像挿入〜リサイズをワンストップで行うことができます。画像がまだ未定の場合は画像挿入をキャンセルすれば自動でダミー画像が挿入されます。ぶっこみ機能を使用すれば大量の画像もあっという間に配置することができます。
PhotoshopにエクステンションをインストールするためにはAdobe Extension Managerを使う必要がありました。 しかしExtension Managerはすでに開発を終了していてPhotoshop CC 2015ユーザーはAdobe Add-onsというサイトから公開されているエクステンションをインストールしなければならなくなりました。 エクステンションの作者がAdobe Add-onsに公開していない場合使用することができなくなってしまいました。 しかし過去のエクステンションファイル「.zxp」を使用してCC 2015でもエクステンションを動かすことのできる方法があります。 今回は「Font Awesome PS」というエクステンションのインストールを例に手順を解説します。 Font Awesome PSはFont Awesomeのアイコンをシェイプとして利用できる
※Photoshop CC 2015〜対応 Photoshop CC 2014以前のバージョンをお使いの方はPSDデータを配布させていただきますのでそちらをご利用ください。(Bootstrap_psd.zip) 追記 2016 4/12 Bootstrapを利用する場合のカンプ制作に！ 1クリックでBootstrapのグリッドシステムに対応したフォーマットが作成できるスクリプトをつくりました。ぜひご利用ください。 Bootstrap BootstrapはWebサイトなどを作成するためのCSSフレームワークです。 あらかじめWebサイト制作に必要なHTMLやCSS、JSが用意されているので簡単にスピーデイーにサイトを制作することができます。 �(1) ダウンロードしたzipファイルを解凍して3つのファイル「Bootstrap_[デバイス].jsx」をPhotoshopのスクリプトフォルダに移
クリエイティブな技術を必要としない定型的なオペレーション作業はなるべく自動化しましょう。 Photoshopにはアクションのように作業を記録して保存、再利用するようなとても便利な自動化機能が多数用意されています。アクション、バッチ、ドロップレット、スクリプト、プラグインなどなど。頻繁に繰り返すような定型的なオペレーション作業はこのような機能を使って自動化しましょう。 今回は多数ある自動化機能の中から「スクリプト」についてご紹介します。 Dearpsではオリジナルのスクリプトを多数公開していますが実はこのPhotoshopのスクリプトはプログラミングの知識がなくても簡単に作れてしまうんです。 作業をJavaScriptとして記録「ScriptingListener.plugin」 アクションはご存知のとおり作業を記録して保存、再利用することができる機能です。実はPhotoshopにはそれの「
変数機能の活用術「基本編」 Photoshopの変数ってどんな機能？ ある１つのベースとなるグラフィックから複数種類のバリエーションを作成する場合って結構あるかとおもいます。そういった場合、通常ですと一つ一つテキストレイヤーを打ち換えたり画像を配置しなおしたり手作業で変更をしていく必要があります。 この面倒な手作業の部分をCSVからデータを取り込むことによって半自動化してくれるのが今回紹介する変数機能です。 READ MORE 変数機能の活用術「DTP編」 プロフィールカードを100種類サクッと作成する 上の画像のようなプロフィールカードを１００名分作成します。普通に作業してたらうんざりですよね。写真を差し替えて、テキストをそれぞれ打ち替えて別名保存…。 こんなときに変数機能を利用すれば驚くほど簡単に100種類のPSDを作り出すことが可能です。 READ MORE
Adobe Photoshop CC 2015では書き出し機能が改良されて強化されました。従来の「Web用に保存」に加えて新たに「PNGとしてクイック書き出し」、「書き出し形式」、「環境設定を書き出し」が追加されました。 今回はこの３つの新しい書き出し機能を紹介させていただきます。 PNGとしてクイック書き出し 1クリックで予め指定したファイル形式で保存することができます。 従来の「Web用に保存」では「保存形式の設定ダイアログ」を挟んでから保存先の指定でしたが「PNGとしてクイック書き出し」ではこの設定ダイアログを省くことができます。 また保存形式はでPNGの他にPNG-8、JPG、GIF、SVGに変更することが可能です。 [Photoshop CCメニュー／環境設定／書き出し]または[ファイルメニュー／書き出し／環境設定を書き出し]で設定を変更できます。 書き出し形式 「PNGとしてク
最近Retinaディスプレイ対応画像を制作する機会が増えてきています。 Photoshop CCから機能追加された「画像アセット機能」ではレイヤー名に200%とRetina対応用画像のファイル名(□□□□@2x.jpg)を書いておくことで画像サイズ200%の画像を生成することが可能です。 しかし上記の方法で書き出された画像には注意が必要です。 下記画像をみていただくと分かる通りテキストレイヤーはくっきり綺麗に拡大されているのに対し後ろの写真がぼやけてしまっているのがわかります。 原因は画像アセット機能で保存される画像はスマートオブジェクトに対応していない為画像が荒れてしまいます。 この機能で綺麗に書きだすにはテキストレイヤーやシェイプレイヤーに限られてしまうのでRetinaディスプレイ対応させたい画像というのは写真が多いため機能として致命的です。 そこで今回はDearpsの考えるRetin
Photoshopでスライスを作成するには[スライスツール]もしくは[レイヤーに基づく新規スライス]で作成する方法の２種類があります。 しかしそれぞれ不満がありました。 ・[レイヤーに基づく新規スライス]はレイヤーグループに対してはNG ・スライスに名前を付け忘れる。 (書き出した画像をみて‘ユーザー_01.jpg’とかになっていてはじめて気がつく…) ・スライス名を確認するのにスライスオプションダイアログを開く必要があるので面倒 ・スライスをレイヤーとして管理できない 等など… 特に[レイヤーに基づく新規スライス]はレイヤーグループに対してはNGが致命的ですね。 Photoshopってバージョンアップするごとに素晴らしい機能が追加されているのに、「スライス」に関してはけっこうノータッチなんですよね。 CCから機能追加された「画像アセット機能」を使えってことなんだろうけどいまいち馴染めない
レイヤー(レイヤーグループ)を１発で別ファイルにぶっこ抜くスクリプト レイヤー(レイヤーグループ)を１発で別ファイルに抜き出すスクリプトを作成しました。 頻繁に使用するので私はこのスクリプトに( command + B )のショートカットをあてています。 【使用方法】 ダウンロードした“Dearps_bukkonuki.jsx”ファイルをPhotoshopのスクリプトフォルダに入れて、[ファイル] ／ [スクリプト]より実行。 Windows: C:¥Program Files¥Adobe¥Adobe Photoshop CS2¥プリセット¥スクリプト MacOS X: /アプリケーション/Adobe Photoshop CS3/Presets/Scripts もしくはメニューバー内 [ファイル] → [スクリプト] → [参照] から“Dearps_bukkonuki.jsx”を選択する
※フルスクリーンでご覧下さい。 今回は“Webデザイン超効率化 第3弾”として、変数を利用したWebバナー制作を楽にするテクニックを紹介します。 取引企業の中で毎月キャンペーンを実施している会社があるのですが、 都度バナーをサイズ違いで10種類近く作らなければなりませんでした。普通にやっていては結構な手間だったので効率化を図る為に今回の変数を利用した方法を考えました。 【まずは下準備】 ①新規ファイルを作成。[幅600px、高600px 72dpi] シェイプツールでキャンバスサイズいっぱいに(適当でOK)に矩形を作成し“background”と名前をつけます。(後にバナーの背景になります) ②“background”レイヤーをスマートオブジェクト化して、 一旦“background”レイヤーは縮小して右下に移動させておきます。 ③また①〜②と同じ行程でスマートオブジェクトを作成し“gra
WEBデザインの超効率化ということで今回はナビゲーションのデザインにスポットをあててテクニックを紹介したいと思います。 私自身が業務で行っているナビゲーション作成のフローを以下に紹介します。 ①ナビゲーションのベースになるシェイプを作成します。 ここでは当ブログで配布しているスクリプトを使用します。 幅！高さ！角丸！サイズを指定してシェイプを作成！ ②シェイプにレイヤー効果等を利用して装飾する。 様々なレイヤー効果が公開されているのでそちらを利用するとより効率化が図れます。 保存版！Photoshop用無料レイヤースタイル750個+まとめ [PHOTOSHOP VIP] ③装飾が完了したらレイヤーを全て選択してスマートオブジェクト化させます。 レイヤー／スマートオブジェクト／スマートオブジェクトに変換 ※スマートオブジェクト化する理由は後ほど。 ④スマートオブジェクトの上にテキストレイヤー
選択範囲をシェイプに変換するスクリプトを作成しました。 更新:2017.7.10 シェイプ変換後に属性パネルで幅、高さ、角丸を変更できるように改良しました。 「単位:px」でご利用ください。 スクリプトの利用手順について �(1) ダウンロードしたzipファイルを解凍して「Dearps_選択範囲をシェイプに変換.jsx」をPhotoshopのスクリプトフォルダに移動します。 Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts (2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成します。 (3) [ファイル] / [スクリプト]から「Dearps_選択範囲をシェイプに変換.jsx」を選択する
Dearpsでは今までにPhotoshopでのスライスを楽にする裏テクニックを数々公開してきました。 【WEBデザ向け】スライスチップ作成パネルver2-CS4.CS5用 スライスチップ作成パネル-CS4用 【裏技】「ちょっと変わったスライス作成テクニック」 スライス作成テクニック 今回はこれらの決定版ともいえるスクリプトを作成する事が出来たので公開します。 【今回公開するスクリプトの特徴】 ・選択範囲をスライスに変換する。 ・スライスをFireworksのようにレイヤーで管理できる。 ・スライスはWEBレイヤーフォルダに自動格納される。 ・画像名称をスライス作成時入力できてレイヤー名にも反映される。 他にもメリットたくさん！まずはだまされたと思って使ってみて下さい=3 利用方法はこんな感じ。 【1】ファイルメニューから［スクリプト］＞［参照］を選択し、ダウンロードしたスクリプトファイル”
線分、間隔等を細かく指定して点線・破線をかく WEBデザインのアクセントとして欠かせない“点線・破線”がとっても簡単に作成できる秘法をAdobeが開催している“Photoshopの秘法 発掘キャンペーン”に応募したところノミネートされました！ 是非以下Adobeのサイトよりダウンロードしていただき気に入ってもらえたら投票してくれたらうれしいです！ Photoshopの秘法 発掘キャンペーン http://www.adobe.com/jp/joc/photoshop/photoshop/hihou/03/04.html Tweet
パーツのサイズを簡単に調べてレイヤー名に追記することができるスクリプトです。コーダーさんにぜひお勧めしたいスクリプトです。 【1】サイズを取得したいレイヤーまたはレイヤーグループを選択します。 【2】ファイルメニューから［スクリプト］＞［参照］を選択し、ダウンロードしたスクリプトファイル「レイヤーサイズ追記.jsx」を選択し読み込む 【3】レイヤー名（レイヤーグループ名）にサイズが追記されました！！ レイヤーサイズ追記.jsxのダウンロードは以下から。
フォトショのシェイプをダイアログからサイズを入力して作成するスクリプト ずっと欲しかった念願のスクリプトが完成しました(^^) そもそもなんで標準機能としてないんでしょうか？ 使い方は超簡単。以下からどうぞ。 ※2011.9/1追記 早速ですが少し修正を加えました。レイヤー名に自動で“幅,高さ,角丸”のサイズが入る様にしました。 【使用方法】 ダウンロードした“Shape_Dearps.jsx”ファイルをPhotoshopのスクリプトフォルダに入れて、[ファイル] ／ [スクリプト]より実行。 Windows: C:¥Program Files¥Adobe¥Adobe Photoshop CS2¥プリセット¥スクリプト MacOS X: /アプリケーション/Adobe Photoshop CS3/Presets/Scripts もしくはメニューバー内 [ファイル] → [スクリプト] →
同じようなPSDファイルを比較して即座に変更点を発見できるスクリプト 私はデザインをしていく上でバックアップも兼ねて頻繁にファイルを別名保存してバージョン管理をしています。しかし時折どれが最新かだとかどこを変更したんだっけ？ってなることが多いので表題のようなスクリプトを作ることにしました。もし同じような事で困っている方はどうぞご利用ください。 【使用方法】 ダウンロードした“Difference.jsx”ファイルをPhotoshopのスクリプトフォルダに入れて、[ファイル] ／ [スクリプト]より実行。 Windows: C:¥Program Files¥Adobe¥Adobe Photoshop CS2¥プリセット¥スクリプト MacOS X: /アプリケーション/Adobe Photoshop CS3/Presets/Scripts もしくはメニューバー内 [ファイル] → [ス
スライスチップ（スライスレイヤー）を生成するツールパネル 「スライスチップ作成パネル-CS4用」をバージョンアップさせました。 【変更点】 CS5版追加 スライス名称を入力するステップを追加 【使用方法】 (1) 下のリンクから『スライスチップ生成ツールパレット』をダウンロードする。zipファイルを解凍し、フォルダを［アプリケーション］／［Adobe Photoshop CS□］／［Plug-ins］／［Panels］にまるごと入れる（MACの場合） (2) Photoshop CS4を立ち上げ［ウインドウ］／［エクステンション］メニューから”slice_tip”パネルを読み込む。
【WEBデザ向け】ぶっこ抜きパネル 先日投稿した記事「【WEBデザ向け】ぶっこ抜きスクリプト」の機能をツールパレット化したので公開します。CS4.CS5専用となります。 【使用方法】 (1)下のリンクから『ぶっこ抜きパネル』をダウンロードする。zipファイルを解凍し、フォルダを［アプリケーション］／［Adobe Photoshop CS□］／［Plug-ins］／［Panels］にまるごと入れる（MACの場合） (2)Photoshopを立ち上げ［ウインドウ］／［エクステンション］メニューから”Dearps_Bukko”パネルを読み込む。
デザインカンプからパーツを１発で別ファイルにぶっこ抜くスクリプト ずいぶんと更新をさぼっていましたが年末駆け込みで投稿します。 今回紹介するのはWEBデザイナー向けのPhotoshopスクリプトです。 デザインカンプからパーツを１発で別ファイルにぶっこ抜くスクリプトを作成しました。 WEBのデザインフローはデザイナーさんによってさまざまだと思いますが私の場合は１ファイルで最終形までつくりこんでから最後に必要に応じてヘッダーやナビゲーション等を別ファイルにして保存します。 その切り分け作業がなかなか面倒だったので自動化してみたところ思いのほか、これが便利だったので共有したいと思い今回公開致します。 皆さんも良かったら一度試してみていただけると嬉しいです。 それでは皆様良いお年を！！ 【使用方法】 ダウンロードした“ぶっこ抜き.jsx”ファイルをPhotoshopのスクリプトフォルダに
レイヤーに基づく新規スライス スライスを切る方法はスライスツールだけではありません。今回は知られているようで知られていない”レイヤーに基づく新規スライス”という機能を紹介します。 レイヤーパレットでスライスを切りたいパーツを選択し、［ レイヤー］メニューの［レイヤーに基づく新規スライス］を選択すると一瞬でそのレイヤーサイズに合わせたスライスが生成されます。 レイヤーを複数選んで実行してもOKです。 私は各パーツを「スマートオブジェクト」化して、最後にこの方法でスライスを切っています。 リピートする予定の背景画像やマスクを使用しているパーツは「ちょっと変わったスライス作成テクニック」の記事で紹介しているテクニックをご利用下さい。
最近作業の効率化を図るために自動処理系機能を探る事にはまってます。 今回はあまり知られていないPhotoshopの『ドロップレット』の利用の仕方を紹介します。 この機能は簡単にいうとアクションのショートカット機能です。 アクションを設定した『ドロップレット』をデスクトップや任意の場所に保存しておくことによって『ドロップレット』のアイコン上に画像、または複数の画像が入ったフォルダをドラック＆ドロップするだけで指定したアクションを全てのファイルに適用してくれるという優れものです。また保存場所や画像ファイル名（連番をふったり）も指定する事もできます。 STEP1 ドロップレットに指定したいアクションをアクションパネルから選ぶ。 STEP2 ファイルメニュー／自動処理／ドロップレットを作成をクリック STEP３ ドロップレットアイコンを保存する場所とアクション適用後の画像の保存場所等を設定する。
前に『サイズを指定して矩形を描く』って記事を投稿しましたがそれをjsで実行できるスクリプトが『Phize on the Web』さんのサイトで公開されていましたのでご紹介いたします。シェイプを描くだけでなくWEBデザインカンプ作成用にカラム数、マージンを指定するとレイアウトカンプを自動生成してガイドまでひいてくれるという優れもの。 ダウンロードは以下サイトから 『Phize on the Web』 カラムウィザード(1.0.0) – Adobe Photoshop
WEB用写真を黄金比&白銀比でトリミングするアクション 美しいデザイン・レイアウトを生み出すのに必要不可欠な黄金比と白銀比。 この比率を取り入れることでバランスのいい綺麗なデザインになるといわれています。 コリスさんのサイト黄金比をサイトのデザインに取り入れる簡単な３つの方法でも紹介されているようにWEBデザインにおいても多く取り入れられています。 今回はこの黄金比と白銀比でWEB用画像を簡単にトリミングできるようにアクションを作成したので配布します。WEBの画像で使いやすいように160px〜500px(長辺)までの各種サイズ用意しました。 黄金比 (GoldenRatio) 白銀比 (SilverRatio)
次のページ
このページを最初にブックマークしてみませんか？
『403 Error - Forbidden』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
