Webデザインやスマホアプリに使用されるグラデーションも最近では進化しています。一昔前までは、パステル系のグラデーションが人気でしたが、最近では2色を使用した鮮やかなグラデーションや同一色相のグラデーションが注目されています。 UIデザインのコンポーネントや背景にぴったりな美しいグラデーションを作成できる無料ツール・無料素材を紹介します。
最近ウェブサイトやUIデザインなどを見ていると、ふわりと浮いているような奥行き感を表現しているものがあります。これは拡散型シャドウ(英: Diffuse Shadow)と呼ばれる新しいグラフィックトレンドで、2016年に入って多く見かけるようになっています。 今回は、この拡散型シャドウの基本的な使い方や、PhotoshopやHTML/CSSなどによるさまざまなデザイン方法を、参考にしたいUIデザインと一緒に見ていきましょう。 拡散型ドロップシャドウって何? 英語でもきちんとした名前はまだ決まっていないようですが、この拡散型シャドウ(英: Diffuse Shadow)と呼ばれるこのテクニックは、通常のドロップシャドウに比べ、奥行き感をより表現できます。フラットデザインから派生したスタイルのひとつとも言え、今のデザイントレンドを反映しています。 Image Source: VOID Conf
2015年注目のMaterial Designをベースにした45種類のUIコンポーネントが揃ったAndroid Lollipopのユーザインターフェイス用のデザイン素材を紹介します。 iOS版Chromeも先日のアップデートでUIが一新され、Material Designが採用されました。 今年はフラットデザインから進化したMaterial Designがガンガンきそうですね。 Android Lollipop UI Kit Material Designは、デスクトップ・スマホ・タブレットをはじめとするさまざまなデバイスで直感的に操作ができるよう新しいUXのアプローチです。Androidにも全面的に採用されています。 Android 5.0: Lollipop 今回紹介するのは、そんなLollipop用のさまざまなUIコンポーネント・エレメントが揃ったPSDとSketch用の素材です。
UIデザイン用の最適なPhotoshopの環境設定方法から、ブラーやサークルを使ったエレメント、フラットや縦長やレトロスタイルのレイアウト、ページのアクセントになるエレメントの作り方、ディテールの作り込み方など、ユーザインターフェイスをPhotoshopで作成する際に勉強になるチュートリアルを紹介します。
PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。 各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。
Material Designを取り入れたBootstrapのテーマ、小さいGUIに魅力がたくさん詰まっているApple Watch、Appleのこれからの主力となるiOS 8のUI、進化して使いやすくなったフラットスタイルのコンポーネント、ユーザーに操作の楽しさと使いやすさを与えるさまざまなアニメーションなど、新しいUIを体験できる素材を紹介します。 新しいモノって見るだけでも、ワクワクしますよね。 Material Design for Bootstrap Material Design for Bootstrap -GitHub Googleが提唱する新しいUX「Material Design」をモチーフにしたBootstrap 3用のテーマ。 ナビゲーション、パネル、スライダー、ボタン、テーブル、フォーム、アイコン、タイポグラフィなど、さまざまなUIエレメントが揃っています。
落ち着いたパステル系のカラー、同一色相の繊細で美しいグラデーションなど、Material Design, iOS 8, Modern UIなどやフラットなスタイルで使われている最近人気のあるカラーを紹介します。 PhotoshopやIllustrator用のスウォッチもダウンロードできますよ。
iOS 7用のワイヤーフレームやモックアップを作成するのに便利なさまざまなUIエレメントやアイコン用のテンプレートを備えたPhotoshopのアクションを紹介します。 iOS 7のUIキットは他にも数多くリリースされていますが、これは自分好みにカスタマイズもできる一味違った素材です。 iOS 7 UI Kit Photoshop Action Set 利用するのは簡単で、ダウンロードしたアクションファイル(iOS 7 UI Kit.atn)をPhotoshopのアクションパネルから読み込むだけです。 あとは、1クリックでさまざまなものが作成できます。 まずは、基本となるドキュメントを1クリックで作成。
ナビゲーション、パンくず、ドロップダウン、ボタンなど、UIエレメントのデザインをそれぞれフラットとソリッドと立体感のあるバルキーの3パターンに展開させたPSD素材を紹介します。 フラットが好き、ソリッドが好きでそのまま使うもよし、比較して勉強するのにもよし、のちょっといつもとは趣向の違った素材となっています。
数がすごいだけでなく、そのクオリティも素晴らしく、商用サイトでもそのまますぐに利用できるUIエレメントが揃ったPhotoshopのPSD素材を紹介します。 単に使用するだけでなく、デザインのバリエーション、エレメントの展開など、勉強にも役立ちます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く