Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 以前、デザイナーもりたの、デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみたという記事が公開されましたね！ こんな風に、最近LIGのデザイナー＆フロントエンド間では、いかにお互いの仕事をスムーズにするかという話題が増えています。 まだまだ模索中ではありますが、今回は、これを知っておけばお互いにとってハッピーなのでは？というPhotoshopの機能や工夫の豆知識をご紹介したいなと思います。 フロントエンドの方にぜひ知ってもらいたい！というのはもちろんですが、デザイナーの方もこれを読んで気遣いがチラ見えするPSDを作れるようになったら、明日から職場の空気が和やかになるかもしれませんね。 その気遣い、伝わってないかも。 デザイナーは普段Photoshopを使っていて自分の使いやすいようにプラグインを入れていたり、さまざまな機能を駆使してい
アプリやwebサービスの紹介サイト制作時に役立つジェネレーターと素材まとめ - NxWorld
スマートフォンアプリやwebサービスの紹介サイトなどでよく見かける、スクリーンショットを各デバイスに埋め込んでいるような画像などを手軽に作成することができる便利なジェネレーターツールと素材を紹介します。 中には単純なデバイスに画像を埋め込むだけでなく、実際に使用しているようなリアルな感じで作成できるものもあります。 ジェネレーター・素材ともに使用する際は再度ライセンス等を各自で確認してください。 September 1, 2014 追記 「Frame」を追記しました。 October 7, 2013 追記 「Free iPad & iPhone 5s Mockups - PSD」を追記しました。 MockUPhone 様々なデバイスに画像を合成できるもので、向きも縦・横・斜めの3パターン（一部は縦・横のみ）用意されています。 使い方も簡単で、合成したい機種を選んで画像をドラッグすれば作成さ
mono-stock｜モノストック｜フリーで使える写真素材・DTP・WEBデザインの使えるネタ帳・WORDPRESSのネタ帳
Wordpressのカスタマイズが柔軟に行えるテーマの代表とも言えるLightningを新規でインストールすると、ウィジェット機能のというウィジェットが消えてしまう為、そのウィジェットを復活させるコードを紹介します。 function my...
商用利用無料、シンプルなアウトラインが非常に美しいアイコン素材 -150 Outlined Icons
ウェブサイトやアプリで使うさまざまなアイテムが揃った、シンプルな美しいアウトラインで作成されたミニマルなアイコン素材を紹介します。 フォーマットはPSD, AI, SVG, Icon Fontと全て揃ってます！ 150 outlined icons – PSD AI SVG Webfont ダウンロードできるアイコンのフォーマットは全てベクターで、4種類が揃っています。 .psd .ai .svg フォント（.woff, .eot, .ttf, .svg） あらゆる作業環境でそのまま使用できますね。 アイコンのアイテムは全部で、150種類！ ウェブサイトやブログ、アプリでよく利用するアイテムが揃っています。
デザインのガイドラインや指示書の作成が驚くほど捗るPhotoshopの機能拡張 -Ink
PSDのレイヤーに配置した要素のサイズやエフェクトやフォントなどの情報を1クリックでドキュメント化するPhotoshopのプラグインを紹介します。 機能拡張は無料で利用でき、Photoshop CC/CS6に対応しています。 サイズやフォントの情報など、1クリックで作成してくれます。 Inkの特長 Inkのインストール Inkの使い方 Inkの特長 ウェブページなどのレイアウトやさまざまな要素のサイズ、形、カラー、エフェクト、フォントの種類・サイズなど、指定したレイヤー上にある情報を1クリックでPSD上にドキュメント化します。 Ink スタイルガイドなどでルールをしっかり決めておくと、デザインのアウトプットにぶれがなくなり、最終のプロダクトも想定通りに仕上がります。 Inkのインストール まずは、インストーラーをサイトからダウンロードします。 Ink CS 6にインストールしたので、その手
200種類以上の矢印・アローが揃ったウェブデザインやプレゼンの資料などに無料で利用できるPSD素材
ウェブデザイン、プレゼンの資料、インフォグラフィックなど、ウェブでも紙でもさまざまなデザインのプロジェクトで利用できる矢印・アローのPSD素材を紹介します。 商用利用は無料で、ベクターなので解像度の制限もありません。 200+ Free Psd Arrows 矢印・アローは全部で200種類以上、シンプルなものから凝ったものまでさまざまなデザインが揃っています。 volume 01とあるので、第二弾もリリースされるのかな。
高品質なものを探すのが難しい、タッチデバイスのジェスチャーをイラスト化したアイコン素材 -Touch Gesture Icons
タッチデバイスで人気が高いジェスチャーをイラスト化したアイコン素材を紹介します。 作者の方より、既存の30種類から新たに18種類のジェスチャーを追加したよ、と連絡を受けました。 Touch Gesture Icons ダウンロードできる素材のフォーマットは、PSDもベクターも揃っています。 .png（すぐ使う用） .psd（ウェブ制作用） .eps（紙用、いろいろ変更したい用） PNGは48, 64, 128, 256, 512pxの5種類のサイズが用意されており、PSDは.aiがスマートオブジェクトとして使われています。 利用にあたっては個人でも商用でも無料、とのことです。 詳しくはダウンロードファイルの「License.txt」をご覧ください。 ジェスチャーは、全部で48種類。 まずは、既存の30種類。タップ・ピンチ・スワイプなどが揃っています。
汎用で使える264種のフラットなベクターアイコンセット「IKONS」:phpspot開発日誌
IKONS - 264 free vector icons from Piotr Kwiatkowski 汎用で使える264種のフラットなベクターアイコンセット「IKONS」 次のようなアイコンが、SVG, AI, ESP, PSD, CSH, PNGフォーマットでダウンロード可能です。 フラットなサイトにぴったり使えそうです。 関連エントリ 汎用で使える癖のない400＋のアイコンが詰まったアイコンフォント「Ionicons」 １５０個の汎用で使えるPSD形式のピクトグラムアイコン「Glyphs」 フリーのiOS7アイコン800個セット ベクター形式のお天気アイコン１００個＋パック「Cumulus」 汎用に使えるピュアCSS3なピクトグラムアイコン200個+ SEOに関連するフラットなアイコン60個セット
全て商用利用無料！すぐに使えるJPEG素材からオリジナルを作成できるPSDまでブラーな背景素材のまとめ
全て商用利用無料！すぐに使えるJPEG素材からオリジナルを作成できるPSDまでブラーな背景素材のまとめ
使用の制限無しで無料！多彩なカラーが美しい、ソフトな質感のアイコン素材 -Softies
フラットなスタイルにソフトな質感を加えた美しいアイコン素材を紹介します。 ゴムのようなソフトな質感が、いい感じです。 アイコンは単に無料ということだけでなく、使用の制限も無しとのこと、太っ腹！ Softies ダウンロードできるアイコンのフォーマットは、2種類。 .psd (ベクター） .png (すぐ使う用） .pngは64px, 128px, 256pxの3サイズが揃っており、.psdは各アイコンはベクターで作成でできています。 .psdをPhotoshopで開いたキャプチャ 素材の利用にあたっては、制限無しでフリー！！ GPLライセンス下で、個人でも商用でもあらゆるプロジェクトで無料で利用できます。 アイテムは全部で44種類！ 128px版を少し縮小したものですが、その美しさはこのサイズでも堪能できると思います。
フラットアイコンの進化形、美しいソリッドなラインを使ったアイコン素材 -Tab Bar Icons iOS 7
アイコン全種 サイズは30px, 60pxが用意されており、フォーマットは下記の3種類が揃っています。 .eps .ai .psd PSDを開くとこんな感じです。 デザインはシンプルなので、さまざまな背景にマッチします。
豊富なデザインバリエーションが嬉しい タグデザインpsd素材「22 Free and Attractive Price,Sale,Discount Tag PSD Files」
豊富なデザインバリエーションが嬉しい タグデザインpsd素材「22 Free and Attractive Price,Sale,Discount Tag PSD Files」 販売されている衣服などに付いているプライス表示用のタグは、デザインの世界でもパーツ素材として広く愛用されています。ベースがシンプルゆえ、バリエーションが豊富なのも、愛用され続ける要素の一つではないでしょうか？そんな中今回紹介するのは、22種類のタグデザインpsd素材をまとめた「22 Free and Attractive Price,Sale,Discount Tag PSD Files」です。 （Free Price Tags PSD） 立体的なタイプを中心に、さまざまなテイストのタグデザイン素材が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Retro Pr
webデザイン制作に是非利用したい フリーpsd素材まとめ「20 Useful Set of Free Web Element PSD」
TOP > Design > webデザイン制作に是非利用したい フリーpsd素材まとめ「20 Useful Set of Free Web Element PSD」 webサイトを制作する際に、アイコンやボタン、スクロールバーなどさまざまな素材を使用すると思いますが、デフォルトの素材やいつも使っている処理・素材ではどうしても味気なくなってしまうもの。そんな時に是非利用したい、高いクオリティのフリーpsd素材まとめ「20 Useful Set of Free Web Element PSD」を今回は紹介したいと思います。 （Free psd web elements for download） 新たに定番として導入できるシンプルなタイプや、デザインにポイントを加えたい個性を持ったタイプなどを集めた、20種のpsd素材が収録されています。中でも気になったものをピックアップしてみました
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料、スマフォ向けユーザインターフェイスの引き出しを増やすPSD素材 -Flatastic Mobile UI Kit
キュートな配色がかわいい！センスが光るUIエレメントが揃ったPSD素材
主要デバイスが全部揃ってるレスポンシブ デザインのモックアップ用のPSD素材 -Responsive Design Mock-up Pack
新着記事
新着記事
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
