新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
重要視されるためのデザイナーの条件 : could
内輪受けは止めにしようではないか LSD LAB で公開されている UIデザイナー不要説は、テクノロジーと付き合うデザイナーであれば一読しておきたい記事のひとつです。私が記事を読んで感じた課題は、 UI デザインが重要視されているかどうかということではなく、果たしてデザイナーは デザインを営業できているかどうかというところです。 たとえビジネスゴールが共有されていたとしても、デザイナーが考える UI デザインの価値と、それ以外の方が考える UI デザインの価値が異なることがあります。特にデザイナーが考える価値は、内輪受けになりやすいことが多々あるように思えます。デザイナーが「すごく良いよね」「イケてるね」というものは、ほとんどの場合デザイナー以外には理解されません。内輪で分かりやすい言葉や感覚で語りかけても、聞き手は「？」（価値を感じない）になってしまいます。 今でもデザイナーのなかでは「
PSDデザインカンプからのコーディングに超便利！Extract for Brackets
Bracketsがメジャーバージョンアップ 昨日、これまで小刻みなマイナーバージョンアップを繰り返し0.44までバージョンを重ねていたBracketsが1.0と、正式なバージョンアップを行いました。わーい！！確か私は0.14くらいから（2年近く経ってる？）使っているはずですが、開発には既に3年ほどかかっているそうです。 Brackets – A modern, open source code editor that understands web design. 今回はこれについてではなく（別途記事を書きます書きました→Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて）、この1.0と同時にリリースされたBrackets制作チーム肝いりの拡張機能、「Extarct for Brackets」の紹介をしたいと思います。これはまだまだ多いPSDカンプからのHTM
フォトショップ用キーボードできたよ | ROOMIE（ルーミー）
Photoshopやillustratorをお使いの皆様に朗報！ もう、頭の中でこんがらがらない、ショートカットキーのステッカーです。 こちらがphotoshop用ステッカー。 そしてこちらが、illstrator用ですね。 働く人には、考えること、覚えておくこと、山のようにあります。できる人の秘訣は「覚える必要ないことを忘れること」とも。 ショートカットキーなんて、時間をかけて覚えたり、こんがらがって確認しなおす時間がもったいない。このステッカーに思いっきり頼ってしまいましょう。視覚的に覚えて行くことで、指が覚えるのも速そうです。 「Photoshopとillustrator。両方使っているよ」という方もご心配なく。 配置が左右で分かれていて、アイコン以外の部分はクリアのステッカーなので、元々のキーボードも、お互いのアイコンも邪魔しません。デザイン的にもMacクオリティをキープできるシン
PhotoshopでのUIデザインが楽になる！レイヤーの作業を便利にする無料の機能拡張 -LayerCraft
PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。 各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。
デザインの質感をアップさせる、仕事でも趣味でも使えるPhotoshopの無料ブラシのまとめ
写真、イラスト、テキスト、背景などに一手間加えて質感をアップさせるPhotoshopのブラシを紹介します。 ここで紹介してあるものは、すべて個人でも商用でも無料で利用できます！
Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ
先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Adobe Photoshop Keyboard Shortcuts Photoshop 5-7, CS1-4, CCまで、Win/Mac用のキーボードショートカットがそれぞれPDFでダウンロードできます。 また、ショートカットがない便利な操作にショートカットを割り当てたショートカットファイルもダウンロードできます（チートシートでは「c」がついています）。
画像アセットやSlicy.appで書き出す画像に余白をつけるPhotoshop用スクリプト「Add Slice Area」を作りました - saucer
Photoshop CC以降に搭載された画像アセットの生成機能や、Slicy.appというアプリを使うと、レイヤー（レイヤーグループ）に拡張子付きのファイル名を設定しておくだけで、画像のスライスがとても簡単に行えます。ただ、オブジェクト（ピクセルやシェイプ）のサイズを基準としてスライスするため、透明の余白を含めてスライスしたいときに不便でした。これを解消するには、スライスしたいサイズの四隅に、目に見えないくらいの透明度でピクセルかシェイプを作成して、それを含めた書き出しをするしかありません（他に方法があれば教えてもらえると嬉しいです）。その作業を自動化したのが、今回のスクリプトです。 【2014.8.8追記1】Slicy.appには、範囲を指定する機能が標準で搭載されてました。@boundsという名前のシェイプレイヤーを作って範囲を指定するか、対象レイヤー（グループ）にレイヤーマスクやベク
Photoshopでの面倒な作業を簡単に！便利すぎるPhotoshopのアクションのまとめ | コリス
グラデーションの縞々を取り除いたり、背景を削除したりする実用的なアクションをはじめ、カラーのバリエーションを生成したり、画像を幾何学模様やハーフトーンにしたり、テキストやオブジェクトを3DにするPhotoshopのアクションを紹介します。 no more banding フラットやソリッドなスタイルがトレンドでも、まだまだグラデも健在です。そんなグラデーションが汚く見えてしまう縞々（バンディング）を取り除いて、美しく仕上げるPhotoshopのアクション。 バンディングを取り除く仕組みは、以前の解説記事（グラデーションをより美しく滑らかにするPhotoshopのアクション ）をご覧ください。
コーディングを考慮したWebデザインガイドライン
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。
トータル56,000円以上の有料フォントやグラフィック素材が無料でダウンロードできます！
先日、Twitter（@colisscom）でお知らせしたプレゼント！ InkyDealsさんとコリスの初コラボ、日本では初かな、という訳で、コリスのビジター全員にトータル56,000円以上（$558分）の有料フォントやグラフィック素材が無料でダウンロードできます！ ※$558はこれを書いている現在、日本円で56,643円です。 ダウンロードできる素材には、計471のリソースが入っています！ ↑のキャプチャにあるように、フォント、テクスチャ、インフォグラフィック、アイコン、バッジ、WordPressのテーマ、モックアップ、Photoshopのアクションなど、さまざまなものが揃っています。 ライセンスは基本的には全て、個人でも商用でも無料で利用でき、販売や再配布は禁止です。ご利用時には個々のライセンスをご確認ください。 素材の詳しい紹介は後にして、まずはダウンロード方法から紹介します。 下記
Photoshopのファイルを監視して製作過程動画を作ってくれる『Schnapps』 | 100SHIKI
これは便利そう。 Schnappsは、Photoshopのファイルを監視して製作過程動画を作ってくれるツールだ。 仕組みは簡単で、ファイルが保存されるたびにスクリーンショットを撮ってくれて、それをつなぎあわせているだけだ。 しかしながら「こういう画像を作るときにどうしているんだろう？」という疑問を解消してくれる素敵ツールではなかろうか。 また結果は.gifか.movかを選ぶことができる。.gifにしておけばウェブに貼り付けるのも簡単だ。デザインの勉強をする人には良さそうですな。
よく使うPhotoshopテクスチャ（カテゴリー別）の作り方まとめ
必要なテクスチャ素材を探していて時間がかかったり、 やっと見つけたと思ったら商用利用不可だったり、 と素材を探すのは結構手間です。 そんな時には、テクスチャも作ったが早いです。 PhotoShopの知識を深めるためにも、テクスチャの作り方をまとめてみました。 もくじ 布 紙 木目 レザー・皮 金属 石 炎 水 ガラス 空・雲・雷 草・芝生 地面 ザラザラ系 布 布地のテクスチャの作り方 布テクスチャの作り方（Photoshop） デニム生地風テクスチャ作成法 デニムっぽいテクスチャーの作り方。 フェルト風のテクスチャ作成方法 PhotoshopでApple風布地テクスチャを作る 紙 しわくちゃの紙のテクスチャを作成する Photoshop – 古い紙を作ろう！ 01 Lesson1 和紙風のテクスチャ作成 - MdN Design Interactive 和紙のテクスチャをPhotosho
明日から使える！Photoshopチャンネル＆レイヤーマスクの簡単過ぎるのに「応用効きまくり」な技・どどんと応用しまくりな応用編 – やもめも
効かせましょうそうしよう。 じゃこれを。 人物をもう少し明るくしてやりたい、でも背景はいじりたくない。とします。 でも、参考エントリの方法ではうまくいきません。 Cmd(ctrl)+Option(Alt)+2、でRGB合成チャンネルからグレースケールを拾って、反転してトーンカーブのレイヤーマスクにするだけでは、 背景も明るくなり過ぎちゃうんですよね。これはこれで…な気もしないでもないけど、やっぱ下手なHDRぽくて嫌。 というわけで、マスクをきっちり編集しましょう。方法は二つあります。 ①マスクをトーンカーブで編集する チャンネルパレットの「RGB」をCmd(ctrl)＋クリックするか、Cmd+Opt(Alt)＋２（キーボードショートカットで「従来のチャンネルショートカットを使用」していない場合。チェックを入れている時は「＾」）を押して選択範囲を取り、すぐさまＱでクイックマスクモードに入って
Photoshopを快適カスタマイズできるオススメ無料プラグイン6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 普段Webデザインを制作する上でPhotoshopを使用している方は多いかと思いますが、いかに自分に合った環境にカスタマイズするかで作業効率は大きく変わってきます。 今回はいつものPhotoshopがさらに快適になる無料プラグインをご紹介させていただきます。 【こちらもおすすめ】 おすすめPhotoshopプラグイン WebINK http://www.webink.com/webfontplugin/ ※現在このサービスはご利用いただけません。 Google Web FontなどのWebフォントをPhotoshop上で表示、利用することができます。 最初の同期に少し時間がかかりますが、あとはデザインしながら手の届くところでWebフォントがさくさく選べてしまうので、非常に捗ります。 Photoshop CS5から対応しています。 flaticon ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
Photoshop上で画像検索できる優れもの！Flickrで商用利用できる画像を探すことができるPhotoshopの機能拡張 -Pictura | コリス
iPhone 6/6 Plus, Apple Watchのプロダクト画像、モックアップやワイヤーフレーム素材のまとめ
新着記事
