配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
ウェブサイトのレイアウトを一から作成するPhotoshopのチュートリアル集
繊細なテクスチャ、透明感のあるパネル、充実したフッタ、光源を模したグラデーション、1ピクラインにこだわったディテールなど最近のウェブデザインのトレンドを取り入れた、ウェブサイトのレイアウトを作成するPhotoshopのチュートリアルを紹介します。
単調なウェブサイトのデザインに手を加えてクオリティをアップするチュートリアル
ウェブサイトのデザインに、ビジュアルエレメントを追加したり、細部をブラッシュアップしたりしてクオリティをアップするPhotoshopのチュートリアルをPsdtuts+から紹介します。
グラデーションをより滑らかにするPhotoshopのチュートリアル
Photoshopを使用して、グラデーションを描いた時に濃淡の縞ができないように滑らかにするチュートリアルをslodiveから紹介します。 How To Correct Banding In Your Gradients Using Photoshop 下記にチュートリアルのポイントをステップごとに紹介します。 Step 1 レイヤーにグラデーションを作成し、作業（確認）用にそのレイヤーをコピーします。
ウェブデザインのエレメントを今風にデザインするPhotoshopのチュートリアル集
最近のウェブデザインでよく使用されているエレメントの制作方法を1ステップずつ分かりやすく解説しているPhotoshopのチュートリアルをCarsonifiedから紹介します。
ベベルとドロップシャドウをマスターする、はじめの一歩
Photoshopのベベル（内側）とドロップシャドウのデフォルト設定に一工夫加え、微妙なエフェクトを与えるチュートリアルをMyInkBlogから紹介します。
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方をSmashing Magazineから紹介します。 5 Simple Tricks To Bring Light and Shadow Into Your Designs 以下、その意訳です。 ライトとシャドウというのは単にそこにあるだけではありません。ライトは対象物を射し、シャドウを生み出します。 形や大きさ、質感を伝え、目にする対象物の理解を深めます。 ウェブデザインでもこのライトとシャドウは非常に重要で、デザインをよりナチュラルにし、感動的で直感的なものにします。 ここに、ライトとシャドウの洗練された5つの使い方を紹介します。 A Quick Anatomy Of Light And Shadow ライトとシャドウの構造 下の図は、ライトが左からあたっています。ハイライトはそのライトが一番強くあたっている箇所です。そして
ウェブデザインの7つのトレンドとそのチュートリアル | コリス
Deziner Folioのエントリーから、ウェブサイトのデザインに使用されている、最近の7つのトレンドとそのチュートリアルを紹介します。 Design Trendz ※チュートリアルのいくつかは当方で追加しています。 Lights n Shadows ライトを当てているように、シャドウ効果を持たせます。
[N] Photoshopで映画のようなエフェクトをかける方法
Give your photos a Hollywood effectというエントリーより。 Digital media blog Ebin has written up a somewhat simple tutorial on how to give your photos the movie look with Adobe Photoshop. Photoshopを使い、写真素材を映画のワンシーンのように加工する「How to turn your photo into movie-like effect using Photoshop?」というエントリーが紹介されていました。 ↓この写真が‥‥ ↓こんな風に加工されます。 うーん、すごい。そしていい感じ。 英語のチュートリアルですが、細かく説明されているので、Photoshop使いの人だったら問題ないのではないでしょうか。
![[N] Photoshopで映画のようなエフェクトをかける方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/eeb9c3837096069f70c0d611a993a22f2b231918/height=288;version=1;width=512/https%3A%2F%2Fnetaful.jp%2Fwp-content%2Fuploads%2F2007%2F05%2F2007_03_tut2-original.jpg)
サイトによく使いそうなピクセルタイプの54個のアローのPSD素材 | コリス
deviantARTのsizer92から、サイトによく使いそうなピクセルタイプの54個のアロー（矢印）のPSD素材を紹介します。
レイアウトやエレメントを作成するPhotoshopのチュートリアル集：Part 2 | コリス
ウェブサイトのレイアウトをはじめ、ヘッダ、ナビゲーション、パネル、ボタン、アイコンなどのエレメントを作成するためのPhotoshopのチュートリアルの紹介です。
１ピクのラインにこだわったデザインスタディ
ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに１ピクセルのラインを使用したデザインスタディをSpoonfed Designのエントリーから紹介します。
クールな画像を作成するPhotoshopのチュートリアル集
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
仕事の効率を上げる blog: Photoshop アーカイブ
秋元@サイボウズラボ・プログラマー・ブログ: Invisibilia - 人物を線画により 上記のページで写真の人物画を線画にした画像が多数掲載されているサイトと、フォトショップなどのグラフィックソフトを使って線画を起こす方法が記載されたサイトが紹介されています。 Invisibilia（写真の人物画を線画にした画像が多数掲載） http://www.themanwhofellasleep.com/Invisibilia.html Invisibilia（グラフィックソフトを使って線画を起こす方法） http://www.themanwhofellasleep.com/invisibilia_tutorial.html フォトショップなどグラフィックソフトを使った加工技術の一つとしてご参考まで。 大変分かりやすいPhotoshop（フォトショップ）のチュートリアル（使い方講座）集をま
60 Most Wanted Photoshop Tutorials, Brushes, .PSDs and Resources | The Jotform Blog
For months, we have been bookmarking interesting, useful and creative Adobe Photoshop tutorials and Resources, so you can now rest assured that you will have the necessary tools to get the job done. Due to this phenomenally vast amount of textures, brushes, patterns available, you can now add dirt, rust, floral effect, swirls, mold, oil stains in your artworks and photos to give them an aged, dama
フリーのウェブデザインテンプレートのPSD
ウェブデザインのテンプレートは結構多いけど、こうしたPSD形式での配布は珍しいですね。 今回はフリーPSDテンプレート１０というエントリからご紹介。 デザインの勉強に持つかえるかも 配布形式はPhotoshopなんかで開くPSDファイル。 ダウンロードしてじっくり見てみるのも有りかもしれませんね。 Darkwood Free hosting template Old burned paper Blog Source １０全ては以下に。 過去紹介しているhtml/cssテンプレートサイト 1170 + Ajax/Javascript/Dhtml examples and demos to download Dynamic Drive DHTML(dynamic html) & JavaScript code library Ajax/JavaScriptの宝庫。htmlはあまり関係ないけどお
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobe Fireworks（8)のweb2.0なレイヤースタイル131＋48個＋おまけ*ホームページを作る人のネタ帳
ストロークでバラバラ配置する25種類のphotoshopブラシセット