新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
背筋が凍る、Webデザインをpsdでやり取りする際の「超重要」なのに見過ごされがちな設定
寒くなってきたのに怪談タイトルでｻｰｾﾝ でも… カラー設定もお互い「WEB・インターネット用-日本」に合わせていたのに… デザインした時に見えていたもの（右）と、psdファイルを渡した先（左）でこう変わっていたとしたら… しかも無警告で変わっていたとしたら…？？？ どうだ怖いだろう…！ ？？何が起きた？？ まずこの現象の理由ですが、 「レイヤーで重なった塗りやテキスト」のフチの合成処理時に、レイヤー同士の重なり具合を変える設定があるのです。 こんなレイヤー構造にしていたとします。テキストのアンチエイリアスは鮮明。多角形には属性パネルでぼかしをかけました。 カラー設定プリセットを「WEB・インターネット用-日本」の完全なデフォルト値（というか期待している値）の状態にしていると、こう見えます。 CS6のカラー設定。Web・インターネット用 – 日本になってますね。 先方も同じカラー設定にして
細かすぎて伝わらないアンチエイリアスの話
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photoshopのアンチエイリアスについては、基本的には５種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の５種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の４つに関しては シャープ：文字が太い / くっきり 鮮明：文字が細い / くっきり 強く：文字が太い / なめらか 滑らかに：文字が細い / なめ
この進化はズルイ！Generatorテクノロジーを使ったPhotoshop CCの「画像アセット」｜DTP Transit
Photoshop CCが14.1にアップデートされ、「Generatorテクノロジー」により、それぞれのレイヤーを個別の画像ファイルとして自動的に書き出す「画像アセット」機能が追加されました。 Webサイト制作では、カンプと呼ばれる画像ファイルを作成後、「スライス」作業によって、書き出す領域を指定し、書き出し作業を行うというフローが必要でした。Photoshop CC（14.1）の「画像アセット」機能を使うことで、この作業（スライスと書き出し）が不要になるだけでなく、高密度解像度対応の画像書き出しにも対応するなど、この進化は、ちょっとズルイ！です（Fireworksの熱心なユーザーなのですが、こっちに肩入れ??? という意味で）。 作業手順は次のとおり。 PSDファイルは英数字で設定します（例：test.psd）。 ［ファイル］メニューの［生成］→［画像アセット］をクリックします。 画像
【作業効率化】Photoshopがいつのまにか鬼便利になっていた話 ｜ Tips Note by TAM
弊社のデザインデータは基本的にFireworksで作られているのですが、 先日、Photoshopでデザインデータが上がってきました。 今回は、久しぶりに触ったPhotoshopが画像アセット機能で鬼便利になって感動したというお話です。 デザイナーさんから「画像アセットやばい」と聞いて、 画像アセットって何ぞや？と、Photoshop CS4あたりから すっかりPhotoshopから遠ざかっていた私はポカン顔をしたわけですが。 実際、その場でやって見せてもらってすっごく感動しました！！！！！ コーダーさんなら一度はきっと思ったことがあると思います。 わかります、わかりますよ。ものぐさな私は毎回思ってます。 作業が立て込むと、スライスなんて作業はこの世から消えてしまえ！くらいは思います。 では、画像アセットってなんぞや？を端的に画像で表現しましょう。 なんということでしょう！ ただポチッと画
こんな簡単でいいの？便利すぎるPhotoshopのプラグイン23選
デザイン制作の大半をPhotoshopで作業する人も多くいらっしゃいます。 そんなPhotoshopですから、自分仕様に環境を整えておくことで作業の快適具合も大きく変わってきます。 今回は、Photoshopでの作業を効率化する使い勝手の良いプラグインを28個に絞りご紹介します。 フォトショッププラグインとは、標準機能を拡張するファイルのことです。必要に応じてインストールすることで作業効率を飛躍的にアップさせることが可能です。 全てインストールする必要はありませんが、気になるものがあれば是非一度使ってみてください。 便利すぎるPhotoshopのプラグイン23選 1.Velositey http://dandkagency.com/extensions/velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなど
DTP→Webデザイナー転向時に、これやったら捗ったよリスト13
元々DTPやってました 自分は大卒でとある広告メディア系の会社に入ったんですが、ずっとDTP（エディトリアルデザイナー）の仕事をしており、正式にWebデザイナーに転向したのは2012年頃の話です。 「このまま紙だけやっててもそのうち食えなくなっちゃうよなあ…」と思い、仕事のかたわらHTML/CSSをはじめとしたWebの勉強を始めました。一応HTMLかじったことはあるものの、知識は大学生の頃で完全にストップしており、floatって何？レベル。（テーブルレイアウト世代） 一念発起したはいいものの、いざ勉強をしようとすると色々と問題が生じるわけですね。 Photoshopでデザインなんてやったことない、Illustrator使いたい 呪文みたいなコードを延々と打つ作業がだるい うまく動かなくて一つのコード間違いで3時間潰れたりするのが辛い 本屋行けば技術書、入門書はいくらでもあるけど、逆に何選べ
Photoshopでの作業がはかどる便利なプラグイン・機能拡張のまとめ
Illustratorでウェブデザインをおこなう人が増えてきましたが、やはりPhotoshopをベースにしているデザイナーさんが多いと思います。そんなPhotoshopを更に便利にパワーアップするプラグイン・機能拡張を紹介します。 ここで紹介するものは、当方の日本語環境（Win/Mac, CS6/CC）で利用しています。 面倒なガイド引きをパワーアップする強力な味方 等間隔ではないガイド引きを簡単に設定できる 選択範囲やオブジェクトを元にガイドが引ける さまざまなオブジェクトのカラーを一元管理できる 要素のサイズやエフェクトやフォントなどの情報を書き出す PNG画像をより美しく、より軽量に書き出す 黄金比、黄金螺旋、黄金三角形、1/3ルール、対角線などを簡単に描く Subtle Patternsのテクスチャ素材をPhotoshopから利用できる flat iconのアイコン素材をPhoto
デザイン効率大幅アップ！Photoshopとスマホの画面がリアルタイムに同期される神アプリ『Skala Preview』
世の中にはこんなに便利なアプリがあったのかと驚きを隠せない霙(@xxmiz0rexx)です。なぜ今まで知らなかったのか！！なんて非効率な日常を送っていたのか！！悔やんでも悔やみきれないです本当に。。 というわけで、今日は存在を知って以来 毎日使ってしまっている超絶神アプリをご紹介させて頂きます:) スマートフォンサイトやアプリデザインに最適なのでマカーなあなたは是非チェックしてみてください！！ 『Skala Preview』とは Photoshopで開いているキャンバスをスマートフォンでリアルタイムプレビュー出来るアプリです！ 今までスマートフォン向けのデザインをする時は、Dropboxにpngを保存し、同期させ、実機で確認していた私。 同期にいちいち時間がかかり かなりストレスだったので、このアプリを知って大歓喜なのでございます♡ 公式サイト：Skala Preview, a Mac a
Photoshopでの作業がはかどる！ウェブデザイン（特にスマフォ）用の効果的な環境設定のまとめ
Photoshopでウェブページやスマフォページのユーザインターフェイスをデザインする時に、最も良い結果がでる最適な環境設定を紹介します。 最後の「作業のパフォーマンスを向上させる設定」はウェブデザインに限らず、Photoshopの動作がもっさりしている人は見直してみてください。 How To Set Up Photoshop For UI Design 下記は各ポイントを意訳したもので、画像は当方のPhotoshop日本語版です。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外の多くのブロガーからあのブログでの無断翻訳・転載の声を聞くのでご注意ください。 環境設定はiPhone用を例にしていますが、基本的なポイントは全てのウェブデザイン作業に適用できます。 新規ドキュメントの設定 スナップの設定 テキストの設定 光源の設定 グリッドの設定 画像を書き出す時の設定 R
魔法！Webレイアウトを数回のクリックで『Velositey』#Photoshop
さっさと仕事を終えて帰宅に向かいたいWebデザイナーさんへ朗報ですよ！ Photoshopと合わせて使える便利機能を見つけたので紹介します。 Velositeyは、Webレイアウトを数回のクリックで完成できるPhotoshop用のプラグインです。例えば、以下のようなレイアウト。Photoshopを起動してから、わずか4回のクリックで完成です。 ワイヤーフレームにも使えますし、ここからさらに作り込んでWebデザインとして完成させることも可能ですね。 それでは実際に上のレイアウト作成にかかった『4クリック』を振り返ってみます。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 Follow @websae2
[Photoshop]表組みにはクリッピングマスクが便利です | 株式会社ComD
photoshopで表組みをデザインする方法は色々あると思いますが、クリッピングマスクを使うと素早くできる他、修正も簡単です。 【手順】 １）長方形ツール（シェイプレイヤー）で表の枠組みを描き、レイヤー効果/境界線（内側）で外側の罫線を引きます。 ※境界線（外側）にした場合は、線の幅分、表のサイズが大きくなる為、内側にするのがおすすめです。 表に入るテキストを配置します（後で微調整するので、ここではおおまかに） ２）[１]で作った表の枠組みからはみ出る様に、縦と横の罫線を引きます。 このとき、整列コマンドを使うと、ほぼ均等にラインが並ぶので、素早くできます。 項目に色を付ける場合も、はみ出して色をおきます。 ３）全てをクリッピングマスクすると、はみ出た部分が消えるので、余計なラインをマスクなどで隠し、テキストの位置を調整して完成。 ４）項目を追加しないといけなくなった時、本領発揮！ [1]
![[Photoshop]表組みにはクリッピングマスクが便利です | 株式会社ComD](https://cdn-ak-scissors.b.st-hatena.com/image/square/9157c104ca8a9d02445bfe02d648e6e493c62901/height=288;version=1;width=512/https%3A%2F%2Fcomd.jp%2Fwp-content%2Fuploads%2F2017%2F02%2Fkv-2.png)
Photoshopでの、不透明度と塗りの違いについて / ウェブデザインライブラリー
Home ＞ フォトショップ講座 ＞ エフェクト ＞ Photoshopでの、不透明度と塗りの違いについて Photoshopでの、不透明度と塗りの違いについて 投稿日：2012年9月25日 レベル：初心者 ソフトウェア： このチュートリアルでは、Photoshopの不透明度と塗りの違いについて紹介します。 Photoshopのユーザーからよく聞かれる質問に、「不透明度と塗りの違いは何か？」というものがあります。 これは初心者以外からもよくきかれます。これはとてもいい質問です。 というのも、多くの場合はこれらは同じ働きをするからです。 不透明度も塗りもレイヤーの透明度をコントロールするものです。 そこで今回は、「不透明度と塗りの違い」を理解するのにとても役立つ解説をしたいと思います。 この解説を気に入っていただけると幸いです。 Step1 ： はじめに Step2 ： レイヤーに
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との違いも、分か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Subtle Light Tile Pattern Vol6 | Pixeden Club
Code Adventure | Simplify Workflows for Designers
新着記事
新着記事
新着記事
http://chibinowa.net/notebook/ps/fontaction.html
