楽して時間短縮！Compassで作ったスプライト画像でRetina対応を行う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。UFOキャッチャー運が急降下中、デザイナーのももこです。 輪っかがついたキーホルダー系をうまく取れるようになりたい…(´・ω・｀) 気を取り直して、今回はCompassを使って作ったCSSスプライト画像でRetina対応を行う方法をご紹介します。 Compassを使って書き出したスプライト画像を自動でRetina対応にさせる スプライト画像の生成 $sprites: sprite-map("sprites/*.png"); $sprites-img:sprite-url($sprites); まずはスプライト画像を生成します。 単一の画像をフォルダに入れると、見事に合体したスプライト画像がimagesフォルダに書き出されます。 sprite-mapにはconfig.rbで指定したimagesフォルダ以下のルートを入れて下さい。 Mixinを記述する @mixin sprite-
東京のWeb制作会社・ホームページ制作会社 | フライング・ハイ・ワークス
「フライング・ハイ・ワークス」はWeb制作・ホームページ制作会社【東京都 渋谷区】です。企業サイトやスマホサイト、ポータルサイトなど様々なホームページの制作、デザイン制作を行っており、「売上」に繋がる質の高いサービス提供を心がけています。
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
Photoshopでリアルな石の質感を表現する方法 / ウェブデザインライブラリー
白い背景に新規レイヤーを加え、50％のグレーで塗ることから作業を始めます。 （「編集」-「塗りつぶし」を選び、50％グレーを選択してください） 「フィルタ」-「ノイズ」-「ノイズを加える」で量は20％のガウス分布を選択し、グレースケールノイズにチェックを入れてください。 さらに「フィルタ」-「描画」-「照明効果」で下記に近い数値で設定をしてください。 これによりテクスチャに3Dのような効果を与えることができます。 次に、新規レイヤーを作成し、「フィルタ」-「ブラシストローク」-「はね」を選んで、設定はデフォルトのスプレー半径10、なめらかさ5をそのまま使います。 「D」キーを押して色を白と黒にリセットし、「フィルタ」-「描画」-「雲模様」を適用してください。 このレイヤーの描画モードを乗算に変え、不透明度を75％に設定し、「Ctrl」+「E」で下のレイヤーと統合します。 ここで、画像が暗す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
