Photoshop CC の便利な画像書き出し機能、自動アセット。レイヤー名に必要な情報を入れておくと自動で書き出してくれる。しかし、Ratina対応などで複数サイズの画像を書き出そうとすると hog...
空レイヤー名にルールを書くだけで Photoshop の自動アセットが劇的に楽になる - ろくデブログ
Photoshop CC の便利な画像書き出し機能、自動アセット。レイヤー名に必要な情報を入れておくと自動で書き出してくれる。しかし、Ratina対応などで複数サイズの画像を書き出そうとすると hog...
JPEG画像の最適化には85%の品質がいいらしいので画像の最適化プロセスを見直してみた
オリジナルはPhotoshopの「書き出し」で画質を100%にして書き出した画像です。画像によっては81%にしても目視では差がわからなかったので、それくらい下げちゃっても良さそうですけど、ざっくりとしたデフォルトとしては85%が良さそうです。91% → 85%の方が85% → 81%より圧縮率がいいんですね。 サンプル画像 上の表にある「sampleXX.jpg」の画像をまとめて圧縮したファイルを用意しました。ご参考までに以下からダウンロードどうぞ。 サンプル画像をまとめて圧縮したファイル（ZIP / 3.4MB） ちなみに、表で91%と81%になっているのはImageOptimで設定できるのが、なぜかその数値だったからです。90%、80%には設定できませんでした（v1.8.0）。 職場で作業するときのプロセスはだいたい以下のような感じです。 PhotoshopやAffinity Desi
最近覚えた便利すぎておしっこちびるかと思ったPhotoshopの小技/ショートカット11こ | クリエイティブメモメモ
こんにちは。会社でWindow家でMacを使っているので、Phothoshopのコマンドキーの配置に未だに戸惑います。井畑です。 今回は最近知って、おしっこちびるかと思ったほど便利なPhotoshopのショートカットや小技を紹介します。 ショートカットは慣れるまでは大変ですが、一度覚えてしまえば、それ無しには作業できなくなるほど、便利なものです。使った事が無い人は是非積極的に使ってみてください:) 今回はPhotohospのショートカットを一から紹介〜というものではなく、実際に作業してみて便利だなーと思うものをチョイスした記事となっております。 もしかしたらかなりマニアックなところかもしれませんが、ひとつでも読んでくれた人に「うぉーその技知らなかった。便利やーん！」というものがあることを祈って… それではどうぞ！ 最近覚えて便利すぎておしっこちびるかと思ったPhotoshopの小技/ショー
Photoshopのシェイプでできること。
PhotoshopをWebデザイン制作として使ってると、画像を編集する事よりも、シェイプを使って図形を描く事の方が多い気がします。Illustratorで描くのと違って、ピクセル具合も気にしながら描けるので、小さいアイコンなんかはPhotoshop上で作った方がきれいに描けたりします。それでいてパスなので、拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せるし、いろいろ重宝ポイントがあるんです。 そんな万能シェイプの機能や特長について、個人的なまとめです。 ※この記事では、主にPhotoshop CS4を使っていますが、Photoshop CS6との違いも、分かる範囲で注釈入れてます。 ※OSはMac OS X 10.6 Snow Leopardを使ってますが、Mac OS X 10.8 Mountain Lionとの違いも、分か
Photoshopのカスタムシェイプで手描き風ボタンを作る｜mayy
手描き風のデザインで使える質感のあるボタンを簡単に作る方法。もちろん手描きするのもありですが、あとでサイズ調整できるようカスタムシェイプを使ってみました。簡単に1分くらいでできます。 ボタンのベースを作る まずはボタンのベース作りです。 カスタムシェイプ（ショートカット：U）で適当な大きさの形を作ります。 分かりづらくなったのですが、白の部分がキャンパスで茶色の部分がボタンです。 次にレイヤースタイルをあてていきます。 まずはテクスチャ。今回はぽよしさん（@poyosi）がブログで配布しているテクスチャ素材を利用させていただきました。 Webデザインで使えるフリーシームレステクスチャ100枚 | poyosicom レイヤースタイルのパターンオーバーレイを以下のように設定 これだけだとまだ外枠が直線でぱきっとしているので外枠を手描き風に調整します。 レイヤースタイルの光彩（内側）を以下のよ
WEB制作｜デザイン会社｜超簡単! 髪の毛の画像を1分で切り抜く方法まとめ
お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。 切り抜き・マスク作業で、もうイライラしない！ 誰でも、切り抜き30秒・調整30秒で完成できる方法。 WEBサイトやLPのキービジュアルでは画像を使うことが多い。 しかし、お客様から素晴らしい画像の支給があるとは限らない。 「これ、マスクしないといけないじゃないか！」 昔からマスク専用のアプリケーションがあるほど、 マスク作業・切り抜き作業というのは 利益にならないのに、手を抜けない根気が必要な作業。 しかし、今なら誰でも簡単に、1分あればできる。 今更だが、やっとAdobeのCS5シリーズをまともに使い始めたので ここで、Photoshop CS5を使った、超簡単マスク術を紹介したい。 お題の写真 こちらが今回のお
PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」:phpspot開発日誌
CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集
Photoshopで描いた図形のフチにブラシを適用する - スタジオ・アルカナ技術ブログ
こんにちは 季節の変わり目ですがみなさんおげんきでしょうか？ 私は1週間くらいずっと治らなかった風邪がやっとよくなってきました！ばくです！ さて技術ブログ、本日はPhotoshopの矩形ツールで描いた図形のふちにブラシを適用する方法を説明します。 illustratorやFireworksでは「塗り」と「線」という概念があるので線にブラシを適用すればいいだけなのですが、Photoshopはちょっと方法が違います。 1. 新規レイヤーを作成。 2. 任意の矩形ツールで図形の作業用パスを描く。 3. パスウィンドウを開き、2の作業用パスをウィンドウ下部にある「新規パスを作成」にドラッグ＆ドロップしてパスを保存する。 4. 任意のブラシを設定しておく。 5. 3で保存したパスを選択した状態でパスウィンドウ右上にある▼をクリック。「パスの境界線を描く」を選択すれば図形のフチにブラシが適用されます。
Photoshop CS5をもっと便利にする12のツール -Trevor Morris Scripts
Photoshop CS5の特にレイヤー周りの機能をもっと便利にする12のツールがまとまったエクステンションを紹介します。 12 New Photoshop Tools [ad#ad-2] Trevor Morris Scriptsの12のツール Trevor Morris Scriptsのインストール Trevor Morris Scriptsの12のツール Trevor Morris Scriptsには、Photoshopをもっと便利にする12のツールが揃っています。 便利なツール全12種 [ad#ad-2] 以下、左上から順に。 Horizontal Spacing 選択したレイヤーを水平方向に均等の間隔に分配します。 Vertical Spacing 選択したレイヤーを垂直方向に均等の間隔に分配します。 Center layer 選択したレイヤーを水平・垂直の真ん中に配置します。
Photoshopの便利なスクリプトや拡張機能のまとめ
Photoshopにも便利な機能を追加できるスクリプトと拡張機能があります。こちらでも自分が使っているものや便利そうだなと思ったものをまとめました。 スクリプトの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Scripts Mac → アプリケーションのAdobe Photoshop CS5\Presets\Scripts 拡張機能はダウンロードしたファイルをクリックすると、Adobe Extension Managerが起動しますのでそちらにインストールすればOKです。 Index… PSDからテキストを抽出 レイヤー名の「コピー」を削除 Fireworks風のスライスレイヤー 選択したフォルダやレイヤーを別ファイルへ
80+ Awesome Freebies from Dribbble Community
Creativity means a lot in any kind of presentation. Whether it’s a logo, banner, advertisement or a complete design; being able to inject creativity into it not only helps in floating the message around, it also leaves solid impression on the viewer. Good design is not easy thing to create, or it is often a very challenging job to discover creative designs. However, there are few ways by which you
暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。
コンマ数秒の積み重ねが大差をつけるPhotoshopのショートカット／機能、厳選7つの妙技！ | バンクーバーのうぇぶ屋
さて、実は前回の爆速記事で書こうと思って収まりきれず、先延ばしにしたネタがありましたのでこちらで共有させて頂こうかなと思います。 前回の爆速作業の場合、まぁ普通のブログ作っただけだし、WPだしってことでコーディング部分はぶっちゃけ大したボリュームに成らなかったわけですが、やっぱ改めて大事だーと思ったのがフォトショのショートカットや、役立ち機能の数々。ショートカット使うか使わないかなんて、下手すればコンマ数秒程度しか変わらないかもしれませんが、その積み重ねが大きな時間を生んでいることは間違い無いと思います！ かねてフォトショップのキーボードや、役立ちネタは色々ご紹介させてもらっていてましたので、この機会に僕の方で知っている便利機能の数々を一度まとめてご紹介させて頂こうと思います。 ここで紹介させて頂くのは、僕もフォトショップは使っていたので、ショートカットや機能は知っているつもりだったのです
[配布]photoshopでドットのラインを描く方法＆破線（点線）ブラシ | バニデザノート
photoshopでドットのラインを描く方法をまとめてみます。 さいごに、配布ブラシもあります。 Fireworksなら、線を描いて、プロパティーから「ストロークを編集」とすると きれいなドットラインが描けるのですが photoshopではそういった機能がないんですね。 ドットラインを描くにはどうしたらいいのか探してみたら、みなさん色々な方法で やってましたので、その方法をご紹介。 ブラシを使う（１）- 間隔設定を使う ブラシ設定の「間隔」という設定を100%以上にすると破線になります。 %設定は、割り切れる数字とか、キレイな数字のほうがうまくいく気がします。 参考：http://www.dougamanual.com/blog/247/1430/e6849.html ブラシを使う（２）- 登録されたブラシ 小さい四角形をつくって、その中に一つの「-」を描き、「ブラシを定義」し 上記と同様
![[配布]photoshopでドットのラインを描く方法＆破線（点線）ブラシ | バニデザノート](https://cdn-ak-scissors.b.st-hatena.com/image/square/288681eadf5c3dd9aab8f2ca33f4f02408a628ec/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-81.fc2.com%2Fv%2Fa%2Fn%2Fvanidesign%2F11187260_968568719828247_3343970705641289934_os.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
【ボタン】Photoshop Vip » 思わずクリックしたくなる「ボタン」デザインのPhotoshop用PSD無料素材35個まとめ
【Webデザ向け】スライスチップ作成パネルver2-CS4.CS5用
http://www.mihha.com/blog/draw/entry-107.html
lewisrodgers.io
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP