HOME ブログ webデザイン , ヘッダー , 画像加工 ヘッダーデザインのレイアウト(構成要素の配置)が苦手なら黄金比・白銀比ツールを活用しよう。Photoshop編 魅せる伝えるヘッダーデザインを作成する5つの工程の2番目、ここでは② 構成要素の配置について解説します。レイアウトが苦手でどうしてもしっくりこないという悩みも黄金比ツールを活用して解決しちゃおう! ① 基調と概念② 構成要素の配置③ 色彩の統一④ 文章の表現⑤ 細部の作り込み ↑ これじゃーちょっとカッコ悪いですよね・・ ② 構成要素の配置基調と概念に沿った画像をphotoshopで開く。 電脳狂想曲さんのWEBデザインの小技へアクセスし、ヘッダーサイズの横幅・縦幅を入力、黄金比(A4ポスターなどのJIS規格の場合白銀比のが相性が良いかも)にチェックしサクサクラインを引いていく。うまくいかなかったらリセットできます。
壁紙・写真8953 webデザイン3925 デザイン3291 絵画・イラスト・アート2193 動物1745 3D1724 UI1291 photoshop1083 フリー1004 風景834 自然821 かわいい689 wordpress679 素材652 テーマ632 チュートリアル626 フォント617 幻想的548 動画530 お洒落524 建築物501 犬430 テンプレ400 イラスト397 psd396 猫384 ロゴ331 jquery297 ブラシ296 プレミアム285 プラグイン274 テクスチャ260 CSS249 ミリタリー221 タイポグラフィ217 名刺213 gif212 都市風景210 インテリア206 宇宙203 エフェクト200 SF188 ポスター186 ファンタジー186
自撮り写真にいい感じのライトを加えたり、ぷるるん唇と美肌・目力補正をしたり、風景写真を映画フィルムで撮影したようなかっこいい仕上がりにしたりなど、1クリックで写真画像をぐっとワンランク上に仕上げるPhotoshopのアクションをまとめました。 まずは当ブログで以前紹介したこれぞPhotoshopマジックなアクションから。
さっさと仕事を終えて帰宅に向かいたいWebデザイナーさんへ朗報ですよ! Photoshopと合わせて使える便利機能を見つけたので紹介します。 Velositeyは、Webレイアウトを数回のクリックで完成できるPhotoshop用のプラグインです。例えば、以下のようなレイアウト。Photoshopを起動してから、わずか4回のクリックで完成です。 ワイヤーフレームにも使えますし、ここからさらに作り込んでWebデザインとして完成させることも可能ですね。 それでは実際に上のレイアウト作成にかかった『4クリック』を振り返ってみます。 著者情報:この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談>サービスメニュー】 Follow @websae2
意外と知られていないですが、PhotoshopでもIllustratorのパスファインダーのように、複数のシェイプを組み合わせて新しいシェイプを作成する機能があります(CS6以降)。でも、メニューとオプションバーを使って2回の操作を行わねばならず、Illustratorのようにワンクリックで実行することはできません。そこで、これらの処理をスクリプトにまとめ、実行しやすいようにパネルにしました。CS6以降のみになりますが、興味があればぜひ使ってみてください。(2014.07.29更新) ダウンロードお使いのPhotoshopのバージョンに合わせたものを、以下よりダウンロードしてください。なお、CC以降では最新バージョンの使用をお勧めします。 最新バージョンCS6用(ver. 1.0.1): ダウンロード(ps_pathfinder_cs6.zip/zip形式)CC用(ver. 1.0.1):
サイトを制作する上で、便利な素材PSD。photoshopで扱えるファイルで、細かなカスタマイズも可能で、扱いやすいファイル形式は制作者としてはありがたい形式ですが、今日紹介するのは、2012年に公開されたフリーPSDを集めたエントリー「Best Free UI PSDs of 2012」を紹介したいと思います。 Mini glyphs (12 px) ベーシックなアイコン素材から、ローディング用のプログレスバーなど、制作に利用できそうな様々な素材がまとめられています。今回はその中から特に気になったPSD素材を紹介したいと思います。 詳しくは以下 Circular Progress Bar 立体的で円形のプログレスバー。ローディングを印象的に見せたい時におすすめです。 Free Footer Detailing フッターに利用するTOPに戻るボタンをリアルなリボンで表現したPSD Pric
2013年3月23日 Photoshop 「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう!というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください! ↑私が10年以上利用している会計ソフト!
微妙なカーブに沿って、グラデーションがかかっているボタンです。サイトでは、チュートリアルと共にPSDを配布しています。 下記は、PSDをダウンロードして、テキストを変更したものです。 Glossy web 2.0 button PSDのダウンロードはページ下部の「Download PSD」ですが、リンクの記述が間違っていたため、下記にURLを記載しておきます。 http://photoshoplovr.com/wp-content/uploads/psd/glossy_button.psd
When you're designing or building a website, chances are you're going to need various little elements designed. I personally tend to reuse a lot of the same buttons, menus, icons and so on. Since we launched GraphicRiver earlier this year though we've seen a lot of cool little web graphics coming in, in the form of web elements, backgrounds and icons. So I've compiled 30 of the best to give you a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く