box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
Showcase of Long Shadow Icon Design
Flat design has been a tremendously hot topic for the last couple of months, and we have also discussed it several times in our previous posts. And if we now take a look at websites and mobile apps around, some of them are flatter – no shadows, textures, fake leather and gradients. The design looks simpler, spacious and has less distraction. It lets you focus on the content, which is the thing tha
Photoshop CCを使ってよりリアルで美しくシャドウを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今年ももう終わりですね。色々と積んでいるものが消化できないまま新年を迎えてしまいそうです…来年こそは…！ 今回はPhotoshop CCを使って、よりリアルで美しいシャドウを作る方法をご紹介します。 Windowsで作っている関係上、ショートカット等の部分は適宜読み替えてください。 Photoshop CCを使ってシャドウを作る STEP1 まずは新規ドキュメントを開き、シャドウを掛けるテキストを配置します。 STEP2 続いてメニューの「3D」機能から「選択したレイヤーから新規3D押し出しを作成」を選択します。 画面が3D仕様に変わったら、「ウィンドウ」→「属性」で編集用のパネルを表示させてください。 STEP3 「属性」パネルの上部タブから「変形」を選択し、押し出しの深さを300に設定します。 更に平面図が使用できるように、オブジェクトとカメラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3 box-shadowジェネレーター
