描画モードが乗算のオブジェクトをデザイン通りにスライスするPhotoshopテクニック｜BLOG｜株式会社エムハンド
文字だけだと分かりにくいので簡単なデザインを5秒で用意しました。ダサいとか言わない。 コルク模様の背景に矢印が半透明で乗っかってます。 まぁまず間違いなく最初は、 「背景はCSSでリピートさせて、その上に矢印を透過pngで配置すればいいやー。」 ってなります。…なりますよね？ コーディングしてブラウザでチェックしてみました。 アレ？なんか違う……。 デザインでは半透明の矢印ごしにうっすらとコルク模様が見えていたのに、一色で塗りつぶされてしまいました。 ……何故！？ 結論を先に言ってしまうと、レイヤーの描画モードが「乗算」や「オーバーレイ」など、「通常」以外になっていることが原因です。 これらの描画モードはその下のレイヤーに依存して見た目が変わるので、透過pngを書き出すために背景を不可視にした時点でコルク模様が無くなってしまっている訳です。 ちょっとしたアイコンくらいならopacityで誤
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
