JSXをつかってPhotoShopを自動化する - みかづきブログ その3
以前からJavaScriptをつかってPhotoShopを自動化できることは知っていましたが、実際にやってみたことはありませんでした。 が。本日突如発生した「すべてのレイヤーの大きさの違う画像に対して上だけトリミングしたい」という作業がめんどくさ過ぎたため、JSXでプログラムを書いてみることにしました。 今回取り扱うJSXとは PhotoShopなどのAdobeのプロダクトを制御するためのJavaScriptです。普通のJavaScriptとほとんど変わりはないのですが、拡張子を.jsxにする必要があります。 【追記1】拡張子を.jsxにしなくても動きました。 【追記2】世の中にはいろんなJSXがありますが、今回の言うところのJSXはAdobeのExtendScriptのことです。 兎にも角にもJSXを書いてみる hello.jsx alert("HELLO WORLD."); 上記Jav
PhotoshopのGenerator機能で出力されたレイヤーおよびレイヤーセットの位置情報をリストアップするJSXを作りました |
PhotoshopのGenerator機能で出力されたレイヤーおよびレイヤーセットの位置情報をリストアップするJSXを作りました PhotoshopのGenerator機能で出力されたレイヤーおよびレイヤーセットの位置情報をリストアップするJSXを作りました。 私の手元の作業では、このJSX、もっと特化させているのですが、それには非破壊ではない処理もあったり、流れが分かりにくい処理もあったので、本エントリーでは8割の状態で止めておき、JSXを触れる方であれば、おのおのの作業パートに合わせて拡張できるような形でアップしました。 概要 PhotoshopのGenerator機能というものがあってとても便利です。出力されるものは綺麗に透明部分も切り取られた画像なわけですが、実際にHTML5やFLASHに移植する際に、位置情報が飛んでしまうわけです。これは透明部分を削るということをする時点で当然で
Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出
[Photoshop] 白黒画像の白い部分を透明にする – プログラミング生放送
レイヤーマスクを使って、白黒画像（モノクロ画像）の白い部分または黒い部分を透明化します。白と黒の境界部分もきれいに処理できます。 以下の画面は Windows の Photoshop CC 2014 です。 レイヤーマスクの追加 レイヤーウィンドウの下にあるボタンから、レイヤーマスクを追加します。 カンバス画像をコピー キー Ctrl + A で、カンバス全体を選択します（メニューでは［選択範囲］-［すべてを選択］）。 続いて、Ctrl + C で画像をコピーします（メニューでは［編集］-［コピー］）。 レイヤーマスクにマスク画像を描画 Alt キーを押しながら追加レイヤーマスク部分をクリックして、レイヤーマスクを表示します（白いカンバスになります）。
![[Photoshop] 白黒画像の白い部分を透明にする – プログラミング生放送](https://cdn-ak-scissors.b.st-hatena.com/image/square/bb44e0d927d65223dee2b54f64ef0e4f8346ef88/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fpronama.jp%2Fwp-content%2Fuploads%2F2014%2F11%2Flayer-mask8.png%3Ffit%3D432%252C216%26ssl%3D1)
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
PhotoshopにもIllustratorの「移動」みたいなピクセル単位移動機能が欲しい… | 俺なんて….com ― ORENANTE.com ― ... orz
PhotoshopでWeb用素材を作っている時のイライラ… 任意のピクセル単位で移動させたい！ たとえばグローバルナビを作っているとき、メニューを区切るセパレータ画像を、任意のピクセル指定であと「105px 右に移動させたい(複製したい)…」とき、どうしますか？ Ctrl+J でレイヤー複製して、グリッド表示させて目測で移動？それでもいいですね！ or , 複製して カーソルキーで10px移動を10回して、1px移動を5回してもいいですね！解決！ ・・・数が多かったり微調整が入るとブチ切れボンバー＋ほんまに合ってるかどうか不安(・ω・) Illustratorは「移動」ダイアログでピクセル(サイズ)指定の複製ができる イラレちゃんなら、オブジェクトを選んで Enterを押すだけでダイアログが出てきて任意の数値で移動、あるいはコピーが出来ます。 超ラクチンですね！ Photoshop(CS5
Slicyはあっと驚くほど便利だった。 - colopixie
Slicyは、PSDをD&Dするだけで、Photoshopでレイヤーやフォルダに指定した方法で名前をつければ書きだしてくれるアプリです。 これがめっちゃ便利！驚いたたまげた。 App Storeで買いました。 今回は、Slicyの公式のデモファイルを使って、解説していきます！ちょうべんり！ 公式のデモファイルは、下記からダウンロードできます（いきなりZIPダウンロードになります） 通常 (Basic Tagging) 「Basic Tagging」のフォルダーを開き、PSDを開いてみましょう。 PSDを開くと、フォルダーやレイヤーに”.png”や”.jpg”など追加します。 そうすると・・・？ そのPSDを”Slicy”にドラッグアンドドロップすると、ぽこん！と先ほどの”.png”のついたフォルダーやファイルが出てきます。 これを上の”Copy”を押して全て保存するか、個別のファイルをドラ
【保存版】現場で使えるPhotoshopの高速スライステクニック5選
スライスツールを使って1つ1つずつ画像をスライスする場合、拡大しながらドロップシャドウのかかり具合を確認したりなど意外と手間がかかります。 「高速で画像をスライスしたい！」そんなあなたにオススメしたいのが今回ご紹介する”レイヤーに基づく新規スライス“、”画像アセット“、”Cut&Slice me“などのテクニックです。ぜひ覚えて時間を短縮しましょう！
Photoshopでmp4をひらいて、動画から綺麗なアニメーションGIFを作る | ナナメウエblog
生きてます。ナナメウエのはっちです。 お仕事で、mp4の動画からサムネイル（アニメーションGIF）を生成したいんだけどという場面に遭遇しました。 色々調べたところ、Webアプリでもあるっぽいのですが、そのアプリを試したところ正常に動いておらず、ぐぬぬ…どうしようかな、と。 そういえば？Photoshopで動画編集ができるという噂を以前聞いたことがあったので調べてみました。 意外とまだ需要のあるアニメーションGIF。 お役に立てれば幸いです。 Photoshopでmp4動画を開く 使用しているのはPhotoshopCS5です。 どのバージョンから動画が取り込めるのかは知りません。だってわたしFireworks派だもの…！ ファイルから「開く」でもいけます。今回はドラッグ＆ドロップで。 タイムラインを表示 読み込みに少々時間がかかりますが気になるような時間でもありません。 とりこま
よく分からずにトーンカーブを使っている人に。 - kojika17
画像の色調補正する時、何を使いますか？ 私の場合、基本的な画像補正はトーンカーブ1つでほとんど済ませてしまいます。 トーンカーブは使い方が分かれば、簡易的に明度、色調、コントラストなどを補正できる強力なツールになります。 Photoshopベースで紹介しますが、FireworksやGIMPでもトーンカーブを扱えますので、参考になれば幸いです。 トーンカーブのデモで使用する画像は、フリーで配布されているPAKUTASOさんから写真をお借りして、説明します。 トーンカーブ基本 縦軸と横軸は、0から255まで階調を表しています。 画像モードがRGBの場合、縦軸は上から下に向かって暗くなり、横軸は左から右に明るくなります。 横軸が入力、縦軸が出力を表します。もっと噛み砕くと、横軸が元画像の階調、縦軸が補正後の階調です。 斜めに走っている線にはいくつも点が打て、曲線や直角にしたりできます。 階調の出
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
铜川抡孟影院有限公司
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP