色調補正が何度でも劣化せずにできる！Photoshopの調整レイヤーを使ってみよう！ | D-FOUNT -大阪・京都のグラフィックデザイン／Webデザイン-
以下で、テキストと画像での解説をしています。 調整レイヤーってなに？ 調整レイヤーは色調補正を行う時に使う機能の一つです。 そのメリットは、 元の画像を変えることなく色調補正できる何度でも設定を変更できるラスター画像やベクター画像、シェイプ、グループなど様々なものに適用できるレイヤーなので、通常のレイヤー操作（移動・複製・削除、表示／非表示、不透明度の設定、レイヤーマスクなど）ができる など多くのメリットがあり、非常に便利な機能です。 調整レイヤーを使ってみよう！ 調整レイヤーを使うには、まず、レイヤーパネル下部の［塗りつぶしまたは調整レイヤーを新規作成］ボタンをクリックします。
Photoshopで手を加えたパターンオーバーレイを背景素材として書き出す方法 - デザインメモ
Photoshopで背景にパターンオーバーレイで模様をつけました。 ですが、いざコーディングするときに書き出そうとしたら困ってしまったので、その方法を書き留めておこうと思います。 ※記事で紹介している環境はPhotoshop CC（Mac OS）です。 今回背景パターン素材として書き出したいのは、 ・レイヤースタイルのパターンオーバーレイでパターンを適応 ・比率を10%にして（図１） ・なおかつカラーオーバーレイで描画モードをスクリーンにした（図２） という、大変面倒なパターン素材です。 （図１） （図２） １、元のパターンの大きさを調べる 比率もカラーオーバーレイも反映されていない、元素材であるパターンのサイズを調べます。 まず、レイヤースタイルパネルのパターンオーバーレイを表示します。 次に、パターンのプルダウンを押して、調べたいパターンの上にマウスをしばらく置いておくと詳細【パターン
[ダウンロード]商用無料、108個のピクセルベースパターン素材作りました
以前グラフィックパターンの柄やテキスタイルの名前まとめと言う記事を書いたのですが、それのパターンを実際に作りました。自作パターンを持ってない人はベースに是非★ 今回作ったのはPhotoshopのパターンファイル。拡張子は.patで、Photoshopのプリセットのpatternフォルダには初期設定のものが入っています。この辺は過去記事[Photoshop]ブラシ、テクスチャ、スタイル…自作のアイテムを作ろう！で一通り説明しています。使い方が分からない人はそちらを参照してくださいね。 グラフィックパターンの名前を調べましたけど 以前書いた[デザイン]グラフィックパターンや柄、テキスタイル等の名前まとめという記事で、色んなグラフィックパターンや柄の名前を調べてみました。服飾やインテリア壁紙、ファブリック等に使われるこれらのパターンですが、webサイトに応用することでクールだったり、かわいらしい
![[ダウンロード]商用無料、108個のピクセルベースパターン素材作りました](https://cdn-ak-scissors.b.st-hatena.com/image/square/fadc09691a669209cd561e8b1789e5fd0c4cc51b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F07%2FPhotoshop-pixel-pattern-05-150x150.png){kind=tracking}
Photoshopが重い！パフォーマンスを大幅に改善する10個の方法まとめ
Photoshop CCはあらゆるデザイン作業を行うことができ、デザインの現場でも使われている本格的なツール。その分、大量のシステムリソースやメモリを必要とする複雑なソフトウエアとも言え、使っているうちにカクカクとしたり、もっさりとした動きになってしまうことも。もちろん、スペックの良い高価なパソコンを購入すれば、Photoshopの反応速度をアップできますが、費用もかかりあまり現実的とは言えません。 今回は、Photoshop CCのパフォーマンスを大幅に改善する10個の方法をまとめてご紹介します。筆者が試したテクニックのみを紹介しています、効果を実際に体感してみましょう。
トーンカーブを制する者は画像補正を制す！【明るさ・コントラスト編】
トーンカーブを制する者は画像補正を制す！【明るさ・コントラスト編】 前回の記事【Photoshopはもうあちこちいじらない！画像を構成する3つの要素を理解しよう。】の「トーンのセクション」について2回に分けて詳しく解説します。大袈裟なタイトルにしやがってと思ったあなた、それがそうでもないんです。画像補正は「トーンのセクション」をどうコントロールするかで決まると言っても過言ではありません！ トーンコントロールで意識すべきポイントと領域 トーンコントロールは、下図に示した2つのポイント（1.白色点・2.黒色点）と3つの領域（3.ライト側・4.中間調・5.シャドー側）を意識しながらコントロールするようにしましょう。 「明るい部分はそのままで暗い部分だけ明るくしたい」「もっとコントラストをつけたい」などの詳細なコントロールをするために必要になります。 赤く示した対角線は基準線、現在の画像の状態を表
画像アセットやSlicy.appで書き出す画像に余白をつけるPhotoshop用スクリプト「Add Slice Area」を作りました - saucer
Photoshop CC以降に搭載された画像アセットの生成機能や、Slicy.appというアプリを使うと、レイヤー（レイヤーグループ）に拡張子付きのファイル名を設定しておくだけで、画像のスライスがとても簡単に行えます。ただ、オブジェクト（ピクセルやシェイプ）のサイズを基準としてスライスするため、透明の余白を含めてスライスしたいときに不便でした。これを解消するには、スライスしたいサイズの四隅に、目に見えないくらいの透明度でピクセルかシェイプを作成して、それを含めた書き出しをするしかありません（他に方法があれば教えてもらえると嬉しいです）。その作業を自動化したのが、今回のスクリプトです。 【2014.8.8追記1】Slicy.appには、範囲を指定する機能が標準で搭載されてました。@boundsという名前のシェイプレイヤーを作って範囲を指定するか、対象レイヤー（グループ）にレイヤーマスクやベク
Bootstrapのグリッドシステムのガイドラインをデザインツールで表示する ｜ Tips Note by TAM
こんにちは。 僕はデザインとフロントエンドを兼ねて仕事をしているのですが、デザイン段階でCSSフレームワークのガイドラインを意識してデザインすると、コーディングが格段にスピードアップするのを実感しています。 本記事は今までグリッドシステムを使ってデザインをしたことがないという方を対象に、Bootstrapのグリッドシステムを例にして、ガイドラインの考え方とデザインツールでのガイドラインの引き方をご説明します。 Bootstrapのグリッドシステムのガイドラインとは? Bootstrap CSSフレームワークの代表。作業を効率化できるCSSがあらかじめ組み込まれた枠組みです。 http://getbootstrap.com/ グリッドシステム Bootstrapでは12本の縦のガイドラインが存在し、そのガイドラインの幅に沿ったコンテンツを実装することができます。 Bootstrapのグリッド
Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows
About Adopted from the article, Recreating Photoshop Drop Shadows in CSS3 and Compass by Grady Kuhnlinem, this online tool uses javascript to convert the CSS3 box and text shadows from Photoshop shadow values. Melanie Ceraso Principal Product Designer Eau Claire, Wisconsin Version 2.1, January 2023 box-shadow: offset-x offset-y blur-radius spread-radius rgba(0, 0, 0, opacity) inset; text-shadow: o
WEBデザインでよく出てくる箇条書きは、Photoshopの段落スタイルで終わらせよう - YouKnow.jp
こんにちは！YOUKNOWです。 よく箇条書きで文章を入れて下さいとお願いされることがあります。 なかなか綺麗な箇条書きって面倒だと思っていました。 でもよーくウェブサイトとか見てみると、注釈とかの所は箇条書きで書く所が意外と多いんですよね 例えばmeijiのここさけ＆あの花のキャンペーンサイト。 ここの応募概要とか箇条書きで作られていますよね。 この箇条書き一つとってもデザイナーだと、ついつい凝ってしまいます。 2行目の文字の頭の位置が、右の方の文字はわざわざ1文字ズラされてますね。 こういったこまかーいこだわりを繰り返してるから時間が辛くなっていくのがデザイナーだと思います。 完全にマゾですね！ こんなのただ半角スペース入れるだけやろ！って思ってる方も多いと思うんですが…自分もそうでしたが.. こういった注釈の所、何度も修正が入るのでその度にスペースの位置を調整していたら時間がいくらあ
Photoshopのデザインデータをエンジニアに引き継ぐ際に利用したいハンドオフツール「Zeplin」の使い方｜Dearps
ホーム / zeplin / Photoshopのデザインデータをエンジニアに引き継ぐ際に利用したいハンドオフツール「Zeplin」の使い方｜Dearps Webサイトやアプリを制作する際にデザインとコーディングを分業化している会社さんは多いと思います。 その場合よく課題にあがるのがデザイナーとエンジニア間の連携について。 デザインカンプとコーディングされた仕上がりの差を極力なくすためにデザイナー側でマージン、フォント、カラーなどを細かく指定したコーディングガイド(以下ガイド)を作成するのですが、これがけっこう面倒な作業で時間もかかります。 これデザイナーにとって過去のスライス作業並みにモチベーションが下がります↓↓↓ この面倒なガイド作成を猛烈楽にするサービス「Zeplin」を紹介します。 Photoshopからプラグインを使用してZeplinにデザインデータをアップすることにより自動で
iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法 | HTML5でサイトをつくろう
スマートフォンサイトを制作する上で便利なCSS3。 必要最低限まで画像の使用を減らし、スマートフォンサイトのデザインをスムーズにコーディングすることができます。 また、画像を使わずにCSS3を使ってスマートフォンサイトのデザインを実現すれば、読み込み時間や容量の軽いサイトを制作でき、サイトの最適化へつながります。 最近では海外の便利なジェネレーターサイトがたくさんあり、誰でも気軽にソースをつくることができます。 しかし、実際に自分がデザインしたサイトをコーディングする際には、やはり独自でそれぞれのコードの使い道を知る必要があります。 CSS3の記述は従来のCSSとは違い、少し複雑な記述が必要となります。 今回はそんなCSS3の記述を、サイトデザインでよく使われるPhotshopのレイヤースタイルを再現する方法として一通り紹介します。 ※iPhoneサイト（スマートフォンサイト）制作のため、
[M]制作時間１分！Photoshopでなみなみ波線を簡単に描く方法 | miMemo(ミメモ)
こんにちは！みう(@miu0512)です。波線を描くとき、皆さんはどうやって制作していますか？実はPhotoshopでササッと綺麗に波線が描ける方法があります。制作時間は１分…もかかりません。 制作方法はたったの３STEP！ STEP１：まずは線を引きます 今回見やすく太い線にしてみました。 STEP２：フィルター > 変形 > 波形 フィルターを使うことであっという間になみなみが完成します。フィルターの中から「変形」そして「波形」を選択しましょう。 STEP３：「波形」の数値を設定する 数値を上記のように設定してみましょう。プレビューに、既になみなみの線が表示されていますね！そのままOKを押してみると・・・？ 完成！あっという間になみなみになりました 今回線が太いので、ちょっとぐにゃっとしてしまいましたが、1pxで作ると綺麗な波形になります。 波の大きさを変えたい場合は？ 振幅の最大値を
![[M]制作時間１分！Photoshopでなみなみ波線を簡単に描く方法 | miMemo(ミメモ)](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2a00d3535b180daf28457153db8a0b1141a6ed1/height=288;version=1;width=512/https%3A%2F%2Fweb-mimemo.com%2Fwp-content%2Fuploads%2F2014%2F12%2Fnaminami_sum.png)
ベーシックなストライプのPhotoshopパターン 460個セットを作りました ： 460 Basic Stripe Set
ベーシックなストライプのPhotoshopパターン 460個セットを作りました ： 460 Basic Stripe Set 仕事でストライプのパターンを良く使うので、まとめて作ってみました。ストライプのパターンは、斜め・縦・横の3種類、白と黒（背景透過）、線幅2pxごと、線幅の間隔は等倍・1.5倍・2倍の全460個です。 (stripe.zip:571KB) Zipファイルを解凍後、パターンファイルをPhotoshopにドラッグ＆ドロップするとパターンが追加されます。 商用利用OK、印刷OKです。再配布はNGです。ご使用の際の報告やリンク、著作権表示は不要です。お気軽にお使いください。 ストライプパターンについて 斜めのストライプは、英国式の右上がりです。 線の色が白と黒なので、描画モードを「オーバーレイ」等にすれば、大体どんな色にでもできると思います。 線幅は、1pxと、2～50pxま
Web用に保存で100%のサイズにならない
/t5/photoshop-%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97-mobile-web-%E7%89%88-discussions/web%E7%94%A8%E3%81%AB%E4%BF%9D%E5%AD%98%E3%81%A7100-%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84/td-p/5350542 Aug 15, 2013 Aug 15, 2013 Photoshop CC バージョン : 14.0 (14.0 20130423.r.221 2013/04/23:23:00:00) x64 オペレーティングシステム : Mac OS 10.8.4 Webサイト用の素材をスライスしてWeb用に保存
PSD からテキスト情報を抽出するスクリプト
こんにちは。デザイナーの高口です。 デザイナーの皆さんは、デザインを開発者に伝える時、どのようにしていますか？ 口頭で伝える、印刷したデザインに書き込む、指示書を作る…様々な手法があると思いますが、どれも時間がかかりますよね。 そこで今回は、伝える手間を少しでも減らすべく、PSD からテキスト情報を抽出するスクリプトをご紹介いたします。 1.スクリプトをダウンロード まず、下記のリンクからスクリプトをダウンロードして下さい。 (ご利用に際しては、自己責任にてお願いいたします。) ダウンロード ： TextExportToCSV ダウンロードしたファイルを解凍すると「TextExportToCSV.jsx」というファイルがありますので、下記のフォルダにコピーして Photoshop を再起動して下さい。 Windows – C:\Program Files\Adobe\Adobe Photo
Adobe Creative StationにPhotoshopの記事を寄稿しました。 | 株式会社タガス
Adobeが運営するブログメディア「Adobe Creative Station」に「Photoshop CCの基本 イマドキWeb制作テクニック」と題して、2017年現在の新機能を中心としたPhotoshopのノウハウ記事を全4回寄稿しました。 Photoshop CCの基本 第1回：「アートボード」でRWD用カンプを楽々作成！ Photoshop CCの基本 第2回：「選択とマスク」で素早く合成！ Photoshop CCの基本 第3回：モバイルチェックは「デバイスプレビュー」＋iOSで一瞬！ Photoshop CCの基本 第4回：Web用画像を書き出す4つの方法をマスター！ 2013年に執筆した「PhotoshopでWebデザインを始めよう」（全6回）、2014年に執筆した「スマートオブジェクト入門～直しに強いPhotoshopデータを作ろう」（全3回）と合わせてぜひご覧ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mio3io/jsx.SplitMultiLine: 複数行のテキストを改行で分割するPhotoshop用スクリプト
Photoshop 移動ツールの「自動選択」チェックボックスについて | 東京の求職者支援訓練
プロなら知っておきたい！Photoshop文字設定とCSSプロパティの相互関係 | それからデザイン スタッフブログ
PSDファイルからテキストを抽出してtxtファイルにまとめてくれるスクリプト | バシャログ。
