Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 以前、デザイナーもりたの、デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみたという記事が公開されましたね！ こんな風に、最近LIGのデザイナー＆フロントエンド間では、いかにお互いの仕事をスムーズにするかという話題が増えています。 まだまだ模索中ではありますが、今回は、これを知っておけばお互いにとってハッピーなのでは？というPhotoshopの機能や工夫の豆知識をご紹介したいなと思います。 フロントエンドの方にぜひ知ってもらいたい！というのはもちろんですが、デザイナーの方もこれを読んで気遣いがチラ見えするPSDを作れるようになったら、明日から職場の空気が和やかになるかもしれませんね。 その気遣い、伝わってないかも。 デザイナーは普段Photoshopを使っていて自分の使いやすいようにプラグインを入れていたり、さまざまな機能を駆使してい
Web制作でデザインカンプを徹底再現する為の便利なアプリ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? LPなどの視覚的なデザインを売りとしたサイトの場合、高い水準でカンプ通りの実装が求められる。自分では狂いなく再現したつもりでも、どこかでずれていてデザイナーから指摘されることもしばしばある。この記事では、1デザインカンプの徹底再現（2 ピクセルパーフェクト）の必要性と、そのための便利なMacOSXアプリケーションを紹介する。 要約 他人の作ったデザインを高いレベルで再現するには、ピクセルパーフェクトを狙うくらいの意気込みが必要 その為には、ブラウザへカンプを重ね合わせるチェックが有効 Helium/Mapture/LayxerXは、フロ
これは知らないと損！背景が透明なPNG画像の輪郭をなじませるPhotoshopの使えるテクニック《動画解説付き》
人物と背景を合成したい場合、予め人物の背景を透明にしたままでPNG画像保存をしておくことで、さまざまな別の背景画像に入れ替えることが可能になり、バリエーションを増やすことができます。 関連記事 ⇒ これさえ身につけてしまえば、ほぼ思い通りの作品が作れるようになるPhotoshopの切り取りテクニック。 しかし、背景の色によっては合成したい画像がうまくなじまず、”カスカス”してしまう部分が出てくることがあるので、ここではカスカスさせることなく、うまく背景になじませるテクニックを解説します。（動画は最下部です↓） Photoshopを使っている人であれば、ブログのヘッダーデザインをする際などに、かなり役立つテクニックなので覚えておいて損はないと思います。 背景が透明なPNG画像があるとバリエーションを作るのがとても簡単！例えば、このような白い背景のヘッダーデザインをしてみます。 背景が透明なP
Webサイトのガイドライン作成に欠かせないPhotoshopの機能拡張が嬉しいバージョンアップ！アートボードにも対応 -Ink
Ink CC2015にインストールしたので、その手順を。 ダウンロードした「Ink.1.5.3.zip」を解凍します。 CC2015で利用する時は、「Ink.1.5.3」内の「Photoshop CC 2015」フォルダを開きます。 「Photoshop CC 2015」フォルダ内の「Ink.zip」を解凍します。 ※フォルダの中身は変更しないでください。 解凍したInkフォルダを移動するフォルダを開きます。 OS X: ライブラリ\Application Support\Adobe\CEP\extensions\ Win 64: C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\ Win 32: C:\Program Files\Common Files\Adobe\CEP\extensions\ 「extensions」フ
Tips for Creating and Exporting Better SVGs for the Web
Tips for Creating and Exporting Better SVGs for the Web Published on 16 Nov, 2015 | Takes approximately 12 min to read Working with SVG in a RWD workflow usually involves a design phase and a development phase. The design phase is usually handled by designers who may or may not know how to code. And because of the nature of SVG as both an image format and a document format, every step taken in
【Photoshop】画像アセットをマスターして爆速スライスを実現しよう！ | unitopi - ユニトピ -
こんにちは！ライターのケインです。 突然ですが、僕はPhotoshopが大好きで、デザイン（そんなに機会ないけど）もカンプ作りも、 Photoshopで行うことが多いです。 今回は、そんなPhotoshopのバージョンCCから採用された、画像アセット（スライス）について、取り上げてみようと思います！ これさえ覚えておけば、スライスは爆速！ 画像アセットとは何か！？ まず前提としてお伝えすると、僕が一番最初にPhotoshopをまともに触ったのは,Photoshop CS6からです。なので、それ以前のバージョンのPhotoshopについてはほとんど知識がありませんので、予めご承知置きください。 デザインしたデータをコーディングする際に、画像として各パーツに分解するために行う「スライス」。Photoshop CS6の段階では、 「スライスツール」で通常通りのスライスを行う 「レイヤーに基づく新
【保存版】現場で使えるPhotoshopの高速スライステクニック5選
スライスツールを使って1つ1つずつ画像をスライスする場合、拡大しながらドロップシャドウのかかり具合を確認したりなど意外と手間がかかります。 「高速で画像をスライスしたい！」そんなあなたにオススメしたいのが今回ご紹介する”レイヤーに基づく新規スライス“、”画像アセット“、”Cut&Slice me“などのテクニックです。ぜひ覚えて時間を短縮しましょう！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
m7kenji 12/16〜@下北沢ミツメフェス 1/7〜@大阪… on Twitter: "Photoshopで間違えて保存せずにファイルを閉じてしまった場合 /ユーザー名/Library/Application Support/Adobe/アプリ名/AutoRecover/ の中をタイムマシンすれば救出できる場合がある https://t.co/IumY9ftyPN"
Automatic "Bloom effect" in Photoshop
新着記事