CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
Photoshopでの面倒な作業を簡単に！便利すぎるPhotoshopのアクションのまとめ | コリス
グラデーションの縞々を取り除いたり、背景を削除したりする実用的なアクションをはじめ、カラーのバリエーションを生成したり、画像を幾何学模様やハーフトーンにしたり、テキストやオブジェクトを3DにするPhotoshopのアクションを紹介します。 no more banding フラットやソリッドなスタイルがトレンドでも、まだまだグラデも健在です。そんなグラデーションが汚く見えてしまう縞々（バンディング）を取り除いて、美しく仕上げるPhotoshopのアクション。 バンディングを取り除く仕組みは、以前の解説記事（グラデーションをより美しく滑らかにするPhotoshopのアクション ）をご覧ください。
Photoshopでの作業がはかどる便利なプラグイン・機能拡張のまとめ
Illustratorでウェブデザインをおこなう人が増えてきましたが、やはりPhotoshopをベースにしているデザイナーさんが多いと思います。そんなPhotoshopを更に便利にパワーアップするプラグイン・機能拡張を紹介します。 ここで紹介するものは、当方の日本語環境（Win/Mac, CS6/CC）で利用しています。 面倒なガイド引きをパワーアップする強力な味方 等間隔ではないガイド引きを簡単に設定できる 選択範囲やオブジェクトを元にガイドが引ける さまざまなオブジェクトのカラーを一元管理できる 要素のサイズやエフェクトやフォントなどの情報を書き出す PNG画像をより美しく、より軽量に書き出す 黄金比、黄金螺旋、黄金三角形、1/3ルール、対角線などを簡単に描く Subtle Patternsのテクスチャ素材をPhotoshopから利用できる flat iconのアイコン素材をPhoto
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
Photoshopでの作業のパフォーマンスを向上させる最適な環境設定のまとめ
Photoshopでの作業がもたついたり、もっときびきび動作させたい、という時に、ちょっと見直しておきたいPhotoshopの設定項目を紹介します。 各設定は、ウェブページのレイアウトやUIの作成を想定したもので、必要に応じて調整してご利用ください。 CC2015にも対応した環境設定は、下記ページをご覧ください。 Photoshopの作業パフォーマンスを向上させる最適な環境設定のまとめ -CC2015対応 How To Optimize Photoshop For Better Performance 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外のブロガーから他ブログでの無断翻訳・転載の声を聞くのでご注意ください。 ヒストリーとキャッシュ グラフィックプロセッサー 仮想記憶ディスク メモリの使用状況 64ビットモード レイヤーパ
Photoshopで写真を手書きの鉛筆画風に加工する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。絵を描くのが趣味です。 最近は絵を書く時間が全く持てなくて困っています……。 どうにか早く描けないものかと悩んだ末、表題の通り、「写真から絵を作ってしまおう」という結論に至ったわけです。 折角だし、絵が描けなくて困っている方たちにも役に立つテクニックなのではないかということで、やり方をさくっと説明してみたいと思います。 【こちらもおすすめ】 ☞ Photoshopで初めて写真加工をするときに知っておくべき基本手順まとめ 素材写真を用意する 鉛筆画らしく見せるためには、まず写真を切り抜いておきましょう。 アウトラインを抽出 次に、以下のステップを踏んで、アウトラインの抽出を行います。 cmd + Jでレイヤーを複製します。 cmd + Iで反転させます。 Shift + Alt + D で 描画モードを「覆い焼き」にします。 「色相 ・ 彩度」の調整レイヤーを
ウェブデザインの基本原則からPhotoshopの実践的なテクニックまでが学べる無料のeBook -Pixel Perfect Precision
思わず、これ無料なの？！というくらいの充実した内容、そして美しいレイアウトで構成されたウェブデザインのテクニックが学べるeBookを紹介します。 ウェブデザイナーをはじめ、ディレクター・アートディレクターなどウェブデザインに携わる全ての人に役立つと思います。 iBookにも対応 内容は、簡単に言うとノンデザイナーズブック（Amazonで見る）のウェブに特化した感じで、完璧な精度のピクセルにどのようにデザインするかがテーマになっています。 ページ数は全部で165ページ、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の内容になっています。 テキストは英語ですが、各ページキャプチャ付きなので、デザインの知識が多少あれ
Photoshopで文字をよりシャープにクリアに見せるこつ -1px未満のこだわり
dribbbleに投稿されたデザインで、コメントのやり取りがちょっと興味深いものなので紹介します。 簡単に意訳すると、 ビジター「デザインきれいだな、文字周りの処理に秘訣とかあるの？」 オーナー「文字をクリアにみせるために、Photoshopでこういう風にやってるよ。」 という感じです。
「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について
2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。 ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。 Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース 移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。 なぜそう言えるのかについて、簡単にまとめてみました。 目次 FireworksとPhotoshop、それぞれのメリットとデメリット なぜ「Photoshopは効
Fireworks後のツールとワークフロー
Fireworks 以外の選択肢は？ Adobe Creative Suite が終了し、Cloud の一本化が発表されました。今回の新製品ラインナップでニュースになったのが、Fireworksの開発中止 のニュース。最新版の Fireworks CS6 の次期 OS へのサポートをすると宣言しているので、すぐに使えなくなるということはありませんが、視野を広げて別の選択肢を探さなければならなくなるでしょう。 Fireworks が数年後には使えなくなるかもしれないから、Photoshop に移行するべきなのかといえばそうでもありません。写真やグラフィックといったビットマップ画像編集であれば Photoshop は素晴らしいですし、ベクターシェイプやレイヤースタイルを使えばある程度柔軟性を保つことはできます。しかし、Webサイトデザインにふさわしいツールとはいえません。 Fireworks
PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件
Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね？ Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。 左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。 ドラッグすれば範囲
紙とか布地のざらっとしたシームレスなテクスチャ素材とパターン素材
すぐに利用できるJPEGのテクスチャ素材とPhotoshopで利用できるパターン素材が揃ったざらっとした感じのシームレスなテクスチャ素材を紹介します。 30 Free Seamless Background Textures [ad#ad-2] すぐに利用できるテクスチャ素材のフォーマットはJPEGで、2種類のサイズが揃っています。 JPEG素材のサイズ 500x500px 1200x1200px テクスチャは各サイズ30種類ずつあり、その中から少しだけ紹介。
Photoshopの効率化になるショートカットキー一覧とカスタム方法【2022年最新】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。ぼくは普段Photoshopを使うとき、極力ショートカットを使っているショートカット野郎です。 英語で言うところの「ショートカット」は、「近道」を表しているというのはみなさんご存知ですよね。方向音痴の方は別として……近道があれば、誰しも遠回りしようだなんて思わないはずです。 今回は、Photoshopの作業効率化におすすめのショートカットを一挙に紹介します。前半では基本のショートカットキー、後半ではプロ向けに選んだ意外と知られていない隠れショートカットも紹介しているので、ぜひ実践してみてください。 macの場合とWindowsの場合それぞれで記述しているので、該当する欄をご確認ください。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もお
簡単に今すぐできる！WEB制作を「はじめて」する人が分かるまとめ
作成：2013/03/4 更新：2014/11/01 Web制作 > もし「全部」自分でやることになっても 一人でサクッと作れるようになりたい 今回はWeb制作や、ツール・ソフトの使い方が「簡単」に分かる、デザインが良い「マニュアル的」なサイトを抜粋しまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．Photoshop (フォトショップ) ２．Illustrator (イラストレーター) ３．Dreamweaver (ドリームウィーバー) ４．iPhone アプリ ５．Kindle 出版 ６．WordPress ７．スマートフォンサイト ８．アフィリエイト ９．アクセスアップ / ブログ １０．ライティング １１．SEO １２．プログラミング １３．html / CSS １４．Google Analytics １５．レスポンシブ Photos
デザイン時に注意したい角丸の使いかた - Design Color
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は？ 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
Photoshopで角丸矩形の四つの角丸を個別に編集できるようにする機能拡張 -Rounded Rectangle Radius Resizer
Photoshopで角丸矩形を作成する時、シェイプツールをよく使用すると思いますが、その角丸の矩形の四つの角丸を個別に数値で編集することができる機能拡張（スクリプト）を紹介します。 対応は、CS5, 6みたいです。CS6のWin, Macの日本語環境で動作しました。 Rounded Rectangle Radius Resizer Rounded Rectangle Radius Resizerのインストール Rounded Rectangle Radius Resizerの使い方 Rounded Rectangle Radius Resizerのインストール インストールは簡単です。 ダウンロードして解凍した「Rounded_Rectangle_Radius_Resizer.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/」内に移動します。 Photosho
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
新着記事
Photoshop Vip » 保存版！クリックしたくなる「ボタン」デザインのPhotoshop用無料PSDファイル42個まとめ
