『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
![新着記事](https://cdn-ak-scissors.b.st-hatena.com/image/square/23bd63df0a388306a2f7034f12641e65ce77a465/height=288;version=1;width=512/http%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2012%2F09%2Ffurry-text-PSCS6.jpg)
今週の木曜日はやはり早く寝て夜中に起き出すかないか!toyama です。金曜日は結構な割合で寝不足な人が多そうですね。 大きな写真イメージの上にキャッチコピーを書いてサイトの目立つところに表示、というデザインは割と多いパターンですが、画像の書き出し圧縮率は毎度悩ましいです。 写真の書き出しは jpg がセオリーですが、キャッチコピーの文字がひどく劣化してしまうことがあります。かといって gif で書き出すには色数が多くてディザでもちょっと辛いし重い! そんなときは Fireworks さんにおまかせです。さすが web 制作の申し子! 1. こんな感じの画像があるとします。 写真の上にテキストで文字が置かれています。 2. jpg で書き出してみます。普段はこんなに低画質で書き出すことはないですが、分かりやすく圧縮の品質を 50 にしてみます。 背景の画像はともかく、もう文字のまわりがグニ
CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 Styling Button Links With CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを使用します。 HTML テキストリンクにclassを付与します。 <p><a class="button-link" href="#">Button Link</a></p> テキストリンクをボタンに見えるようスタイルしていきます。 ボタンがクリックしやすいように、paddingの値を充分に設定します。 .butto
美しい発色と優しい風合いが特徴の絵画「水彩画」。実は、初心者でも簡単に始められます。透明度が高く、下の色や紙の色が透けて見える「透明水彩画」の描き方を紹介します。 ■ 必要な道具と描く前の準備 ▽ http://www.h3.dion.ne.jp/~aqua21/gazai-nyumon.html まずは、絵の具や筆などの画材をそろえましょう。上記のエントリーに記されている必要な道具は以下の通りです。 透明水彩絵の具 パレット 筆 水彩紙 筆洗 鉛筆(HB、2B) 練り消しゴム 絵の具は単色で購入するより、基本の色がそろっている「セット」がオススメです。筆はラウンド(丸筆)の10号、8号、6号、4号、0号のほか、水を引くときなどに使う平筆もあると便利です。 紙は水彩画用の水彩紙を使います。ただし、紙に直接描き始めると、よれやたわみが発生してしまいます。これを防ぐには、紙を伸ばすための「水張
毎日様々なインスピレーションを求めているデザイナーたちによって作られているサイト「The Design Inspiration」が選んだ2011年に最も印象的だったPhotoshopのチュートリアル50本がかなり有用です。 50 Most Impressive Photoshop Tutorials of 2011 | The Design Inspiration http://thedesigninspiration.com/articles/50-most-impressive-photoshop-tutorials-of-2011/ ◆1:全速力で走っているモーションを効果的に加える方法 ◆2:バットマンのシンボルマークがよく見ると浮かび上がっている ◆3:SF映画のようなポスターに仕上げる ◆4:左右対称のライトニングエフェクト ◆5:マンガ風・カートゥーン風に塗る方法 ◆6:ファ
25 Beautiful, high-quality Adobe Photoshop text effect tutorials | Nerd Treasure WEBサービス用ロゴ作成等に使える新し目のPhotoshopテキストエフェクトチュートリアル25 次のようにインパクトのあるテキストエフェクトが沢山紹介されていて参考になります。 WEBサービス用にインパクトのあるロゴを作りたい場合なんかに参考にできそうですね Photoshopに関しても、ロゴのデザインに関しても奥が深いですね。 関連エントリ プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集 動画で学べるPhotoshopチュートリアル20 広告デザインのためのPhotoshopチュートリアル15 パノラマ写真から小さな惑星を作るPhotoshopチュートリアル
☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです^^ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ~」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕
以下の記事以来、アプリのデザインについて考えてます。 「最高のデザインのiPhoneアプリ」投票結果をまとめてみました てことで、ここ数日間、有名かつフリーな画像編集アプリ「GIMP」と試行錯誤しながら格闘、もとい学習中です。 てことで、まだまだお披露目するのは恥ずかしい状況ですが、こういう画像が少しづつ出来るようになっているところです。 以下、参考になりそうな情報をまとめてみました。 GIMPの基礎まずはお決まりの基礎知識について。 GIMP2を使おうGIMP始めの一歩 | GIMP初心者向けサイト GIMPで作った画像と参考チュートリアル 以下、練習で作ってみた画像と参考にしたチュートリアルを紹介してみます。 金属面にレタープレスで「motomaka」文字 以下を参考にしました。GIMPで、ヘアライン処理した金属面を描く方法GIMP でレタープレス(型押し)文字を作るチュートリアル |
20 Mind Blowing Photoshop Photo Manipulation Tutorials | Code Fear 色々と応用できるかもしれないPhotoshopによる写真加工チュートリアルが色々。 アイデアが良いものや、これ一体どこで使うんだろうという物まで、多彩なグラフィックス作成チュートリアルのまとめになっています 空飛ぶ地面を作るテクニックは色々と応用できそう 単なる木の写真をうまいこと手のひらにのせてインパクトのある画像を作る例 零下の地にカエルをリアルに合成するテクニック。舌をリアルに氷に伸ばしているところなんかを作ってて面白い。 実写と3Dイメージを合成してクールなグラフィックスを作成する例 関連エントリ モダンなコーポレートサイト作成用Photoshopチュートリアル 光のエフェクトを与えたクールなイメージ作成Photoshopチュートリアル25 プロレベ
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
Photoshopのチュートリアルというと英語が多いですが、日本語の方がサクサク読める(私の場合)ので、日本語で解説してくれているチュートリアル集をまとめてみました。 フォトショップでつくるキラキラに輝く人物の作り方 フォトショップでリアルな炎を出しながら走るバイクの作り方 フォトショップで夕日に輝く幻想的なライティング効果を作る方法 映画のタイトルロゴのような光と文字を描画するPhotoshopチュートリアル フォトショップでキラキラに輝く背景画像を作る方法 布地テクスチャーにペイント フォトショップでキラキラに輝くライティングエフェクトをつくるチュートリアル Photoshopで六角形のキラキラに輝く背景画像をつくる方法 フォトショップでオーロラが輝く地平線に太陽が沈む様子を描く方法 基本的な光の作り方2 基本的な光の作り方3 Photoshopで美女の画像に効果を入れる方法 フォトシ
Photoshopでつくるタイポグラフィのチュートリアルを紹介済みのものから未紹介のものまで、2010年の総まとめです。
写真はウェブに限らず、デザインをする上で非常に重要な要素です。 ここではウェブデザインで使用する際の写真の入手から、カラースキーム、タイポグラフィとの組み合わせ方などシンプルで効果的な方法を紹介します。 Designing From a Photo: Quick Tips and Best Practices [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 写真の入手 Color Schemes Typography Bleed まとめ はじめに フォトグラフィはタイポグラフィ以来、デザインを成功させる最も素晴らしい手段です。クオリティが高い写真は程度の低いデザイナーでも素晴らしいデザイナーのように見せるでしょう。 素晴らしいフォトグラフィのデザインをするためにいくつかのテクニックとアイデアを紹介します。 写真の入手 まず第一に、デザイナーとしてあなたができる最も良い方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く