X-LABO: Haxe: ドット絵製作者・ドット絵アニメーター向けの Photoshop CC 拡張パネル PaletteChange を公開
この記事のURL http://www.dango-itimi.com/blog/archives/2015/001229.html Photoshop ドット絵製作者・ドット絵アニメーター向けの、Photoshop CC 拡張パネル PaletteChange を公開しました。Haxe で制作を行っています。 https://github.com/siratama/PaletteChange/ PaletteChange を利用する事で、全てのレイヤーに対し、キャンバス内で使用されているパレットAの色を パレットBの色に塗り替える事ができます。 使用例紹介動画 主な用途 Photoshop のフレームアニメーション機能を用い、制作したアニメーションキャラクターに対して色違いのキャラクターを作りたい、という場合に利用できます。 例えば以下、左が元のアニメーションキャラクターで、右が Pal
Photoshop CCの画像アセット機能でSVGを書き出す裏技
SVG はモダンなWebブラウザーで表示できるベクター画像形式で、Retina ディスプレイや、タブレットでピンチアウトで表示拡大した時にも荒く見えないため、これから使用する機会が増えそうな画像形式です。 SVG は Illustrator で書き出すことができますが、これまで Photoshop ではプラグインなどを使わなければ SVG を書き出すことができませんでした。 しかし、Photoshop CCの「画像アセット」機能を使用して SVG を書き出す裏技を見つけたので紹介します。 準備 下記のファイルをダウンロードします。 Macの場合 Finder でメニューの［移動＞ホーム］を選択し、ホームフォルダを表示します。 そこに、generator.json ファイルを移動またはコピーします。 Windowsの場合 ユーザーフォルダ（ユーザー名のフォルダ）に移動します。 そこに、gen
Slicyはあっと驚くほど便利だった。 - colopixie
Slicyは、PSDをD&Dするだけで、Photoshopでレイヤーやフォルダに指定した方法で名前をつければ書きだしてくれるアプリです。 これがめっちゃ便利！驚いたたまげた。 App Storeで買いました。 今回は、Slicyの公式のデモファイルを使って、解説していきます！ちょうべんり！ 公式のデモファイルは、下記からダウンロードできます（いきなりZIPダウンロードになります） 通常 (Basic Tagging) 「Basic Tagging」のフォルダーを開き、PSDを開いてみましょう。 PSDを開くと、フォルダーやレイヤーに”.png”や”.jpg”など追加します。 そうすると・・・？ そのPSDを”Slicy”にドラッグアンドドロップすると、ぽこん！と先ほどの”.png”のついたフォルダーやファイルが出てきます。 これを上の”Copy”を押して全て保存するか、個別のファイルをドラ
Photoshop CC 14.1 に画像パーツ書き出し機能がやってきた - colopixie
画像アセットにチェック ファイルから、生成＞画像アセットにチェックを入れます。 ファイルを保存 ファイルを保存すると、保存フォルダーに、[filename]-assetsというフォルダーができ、その中に上で指定した形式で保存されています。 Windowsでもきちんと書きだされます！ Windows8/PhotoshopCC14.1 上のPSDファイルを書き出すと、 JPGで品質7のbackground.jpgとGIFのbackground.gif PNGで400%にスケーリングした、logo.pngとJPGで品質40%で250×250にリサイズされたlogo.jpg PNGで200%にスケーリングされた[email protected]とPNGのbutton.png PNGのbutton2.png が書き出されるはずです。 まとめ Slicyでは、名前指定をしたレイヤーに基いてサイズ指定が
Photoshop Blend Modes Explained - Photo Blog Stop
A WordPress developer, photographer, and blogger who enjoys tech, nature and the great outdoors. Working with blend modes is almost always an experimental process. Because it’s nearly impossible to predict the results, you always seem to end up experimenting with different modes and Fill Opacities until you get the results you’re looking for. In this article I’m going to give you a high-level view
ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」のまとめ
こんにちは。今日も元気にPhotoshopと戯れます井畑です。 今回はPhotoshopの文字詰めに使うツールについてちゃんと調べてみました。 今では息をするように文字詰めをしていますが、デザイン初めたての時は勝手が分からず苦労しました…Photoshopの文字詰め♪ 基本的なことがほとんどなので、知ってる人にとっては当たり前のことですが、おさらいによろしければご覧ください。 それではどうぞ！ ちょっと待って文字詰めって何？ まずは文字詰めが何か分からない人の為に軽く説明しておきますね。 ワンランク上のデザインにはかかせない文字詰め 文字詰めとは読んで字のごとく、文字と文字の間を詰めてバランスをとる作業のことです。 通常文字を打っただけでは「ベタ組み」と呼ばれ、基本的に文字と文字の間が空きすぎています。それを詰めてデザインのバランスをとります。 WEBの性質上テキストデータの文字詰めは難し
Photoshopの効率化になるショートカットキー一覧とカスタム方法【2022年最新】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。ぼくは普段Photoshopを使うとき、極力ショートカットを使っているショートカット野郎です。 英語で言うところの「ショートカット」は、「近道」を表しているというのはみなさんご存知ですよね。方向音痴の方は別として……近道があれば、誰しも遠回りしようだなんて思わないはずです。 今回は、Photoshopの作業効率化におすすめのショートカットを一挙に紹介します。前半では基本のショートカットキー、後半ではプロ向けに選んだ意外と知られていない隠れショートカットも紹介しているので、ぜひ実践してみてください。 macの場合とWindowsの場合それぞれで記述しているので、該当する欄をご確認ください。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もお
ポチッとするだけでプロ級の写真処理ができる良質なPhotoshopアクションまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 昨今セピア風やらトイカメラ風何やら、昔っぽい写真のような加工が流行ってるみたいですね。自分的には今の最新鋭の一眼で撮ったまんまのようなクリアな写真のほうが好きだったりします。 とはいっても、たまには古き良き昔の写真も味深くていいのかもしれないですね。デザイン的見地から見ても色が統一されてたり、色の寒暖差が出たりで印象的な写真になりやすいものね。 スマホとかでその手のアプリが多数出回っているので、カスタマイズ性は低いものの、割りと手軽にできますが、パソコンなら言わずと知れたことだが、Photoshopで加工する場合がほとんどだと思います。 スマホよりは自分好みにいじれるが、いざやろうと思うとなかなか手間がかかって面倒だったりします。加えて、枚数が多い場合なんかはさおさらそうです。だがしかし！アクションを使えば一気に形勢逆転！ 寒色系 Purple wonde
作業効率が絶対に上がる！Photoshopのアクション機能 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Photoshopの作業時間を短縮させる非常に便利な機能に「アクション」があります。 使い方はとっても簡単です。以下に紹介していきます。 Photoshopでアクションを記録・再生する方法 ヒストリータブのあるパレットにアクションタブがあります。これをクリックします。 赤丸で囲ってある部分をクリックすると・・・ メニューが表示されますので、新規セットをクリック。 アクションセット名を決めます。整理の為に作業の名前などを入れると良いと思います。 今回は画像のリサイズ作業を記録しようと思いますので、「リサイズ」と名付けます。 このようにアクションタブの中に 「リサイズ」が追加されました。 これを選んだ状態で再び右上の赤丸で囲まれた部分をクリックします。 メニューが出るので、新規アクションを選びます。 アクション名を付けて、「記録」を押すとアクションの記録が開始されます。 パレットの下の方にある
新社会人向けPhotoshopCS6をインストールしたらまず設定したい３＋１項目 - Photoshopの情報集
職場のPhotoshopがCS6になりました。 職場のPhotoshopがCS6になりました。 CS5から使っていると、いくつか初期設定が異なりました。 CS5などと設定を合わせるのに、最初にやっておいた方がいい 初期設定をいくつか紹介したいと思います。 会社に入って初めてPhotoshopを触る方にもやっておいてほしい内容です。 もくじ やった方がいい設定 1.画面の色を設定しよう 2.画像補間方法を設定しよう 3.フィルターギャラリーの名前を表示させよう 4.画面のワークスペースを消す（Mac限定） 知っておくと便利な設定 5.単位はpxで設定しておいた方がいい（mmで会話することはほぼない） 6.タブでドキュメントを開かないようにする（好み） 7.ツール変更をワンボタンで出来るようにする（好み） 環境設定からワークスペース全体の色を切り替える場合のショートカットは (Command/
Slicing Images for Your Website with Photoshop
2014年8月17日 Photoshop, Webサイト制作 印刷物のデザインではそのまま印刷すればいいのですが、Webサイトの場合は出来上がったデザインをパーツごとに画像をスライス（分割）し、HTMLとCSSで組立ててWebサイト上に表示します。「実践で学ぶWebサイト制作ガイド」5回目ではそのスライス作業に注目！私は普段Fireworksを使ってスライスしていますが、ここでは前回と同様Photoshopを使ったスライス方法を紹介します。実践に入る前に、いくつかのポイントもおさえておきましょう。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その5 目標：コーディングしやすいパーツ画像を用意できる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 目次 誰のため？何のため？Webサイトを作り始める前に
保存版! デザイン作業の助けになるスマートフォンUIのPSD40選!!
無料で利用できるスマートフォンUIキット。スマートフォンサイトやアプリのデザイン作業をするときに持っておくと、何かと便利ですよね。 海外系デザインWebメディア「1stWebDesigner」で、そうしたUIキットのPSDファイルが紹介されていました。 一応すべてのキットは無料で使うことができますが、商用目的で利用する場合は、事前に使用許諾を確認するようにしておきましょう。 iOS6 GUI PSD Free PSD: iPhone iOS 6 GUI PSD | | FreeUIKits.comFreeUIKits.com iPhone UI iPhone UI – 365psd Official Android 4.0 UI Free PSD: Official Android 4.0 UI Downloads | | FreeUIKits.comFreeUIKits.com iOS6
[woops!] Illustratorファイルをphotoshopでレイヤー分けして読み込む方法
Illustratorでベースデザインを作ってエフェクトをPhotoshopでかける場合がたまにあります。そのとき、普通のAIファイルをPhotoshopで開いてしまうと統合されてしまいますので、これまでIllustratorからひとつひとつコピーペーストしてはPhotoshop上で再レイアウトしていました。 どうにか良い方法がないかとTwitterでつぶやいたらなんと神様降臨。解決策をおしえてくださいました。ありがとうございます！ @woopsdez AIファイルを開いてからなら、「サブレイヤーに分配」コマンドを使用すると、1 つのレイヤー上にあるすべての項目を個々のレイヤーに再分配できます。adobe.ly/P9QUsF #illustrator — Takashi Morifusa (@morifusa) September 27, 2012 @woopsdez AI をAIで開いた
Photoshop Actions to fix the banding of Photoshop's gradients.
Say goodbye to banding. This is a very simple technique packaged into a single action. Simply select the action and press play. Your document will be converted into a 16-bit document and a new layer applied to the top of your group/document fixing all the banding in that document. Unfortunately, this will increase the document’s size dramatically. When exporting assets, copy merge and export to a
ヴィンテージ風のざらっとしたテクスチャを作成できるPhotoshopのブラシとパターン素材 -Maleika E. A.
ヴィンテージ風のざらっとしたテクスチャを作成できるPhotoshopのブラシとパターン素材 -Maleika E. A.
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
フォトショップでも点線・破線を簡単に描けるアクション
Photoshopで点線・破線描くときって皆さんどうしていますか？ 何通りか方法がありますがどれも非常にめんどくさいでよね。 なので今回Photoshopでも点線・破線を簡単に描けるようにアクションを作成いたしました。 【アクション使用方法】 対応CS2～ (1) 今回配布するzipファイルを解凍する。 (2) “点線と破線.atn”と“点線と破線.pat”をそれぞれダブルクリック。 (3) そうするとPhotoshopに読み込まれます。 (4) [ウインドウ]メニューから [アクション]を選択し、アクションパネルを表示して“点線と破線”が読み込まれていることを確認する。 (5) ツールバーにある長方形ツールやラインツール等で点線・破線を作りたいサイズのシェイプをつくる。 (6) シェイプが選択された状態でアクションパネルの“点線と破線”の中から適当なものを選び再生させます。 (7) する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Code Adventure | Simplify Workflows for Designers
新着記事
http://handywebdesign.net/2013/03/how-to-make-a-text-in-watercolors/
