Web2.0的サイトのグラフィック表現 一昔前、左右にフレームを切ったページ構成がWebサイトの主流だった頃、凸状に見える表現のリンクボタンをよく見かけました。ハイライト/シャドウ表現をうまく組み合わせて疑似的に立体に見せたボタンは、「なんかIT」な香りがして、さまざまな企業の「ホームページ」に採用されていたものです。 時は流れて「IT」という言葉も今更恥ずかしい気がする今日この頃。ここ数年ネットを賑わすキーワードに「Web2.0」があります。これも多少の「今更」感が無きにしもあらずではありますが、Web制作・アプリ開発などに携わる方にはまだまだ避けては通れないキーワードであることは確かです。 そのサービスの有効性やAjaxの技術的なお話などはその道の専門の方々にお任せするとして、この連載ではWeb2.0的なサービス・サイトでのグラフィック表現にスポットを当ててみたいと思います。 その昔、
そろそろ「Web2.0的デザイン」という言い回しが恥ずかしくなってきましたが、それはそれでおいといて。グラデーションは今っぽいデザイン（ちょっと言い方を変えてみた）では外せない要素と言えるかと思いますが、プロのデザイナーの方はさておき、素人が挑戦すると、色の選択に失敗してイマイチ・・・なんてことになりがちです。 » A Gradient Tutorial » 9rules Network Official Blog こちらのサイトでは、グラデーションを作る際のポイントが説明されています。 さて、どれが一番きれいでしょう？1 は彩度（鮮やかさ）が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。 ちなみに僕は、次のようにしてグラデーション
たまにこんな（↑）写真って見かけますよね。インパクト絶大な写真です。 そんな写真を簡単に作る方法がこちらで紹介されていました。ちょっと人とは違ったサイトを作りたい方はいかがでしょうか。 » Out of Bounds – The Something Awful Forums Photoshopで作成します。ではどうぞ！ ↑ 元となる写真はこちら。 まず作るレイヤーは3枚。下から順に黒の背景、素材、フレーム用のレイヤーとなります（↓）。 ↑ 次に矩形ツールで白色の長方形を作成します。 そして、選択ツールで長方形の内部を切り抜きます。これでフレームができあがりました。 ↑ 次にフレームの形を変えます。フレームのレイヤーで「Ctrl+T」を使ってフレームだけを選択。 右クリックし、「遠近法」でフレームの形を変えます。「自由な形に」を選べば微調整も可能です。 ↑ あとは、不必要なところを黒く塗りつ
On our site you can enter modified images into contests appropriately called photoshop contests. Other members then view, vote and comment on your work. The contest entry with the most votes, wins. You can win real prizes, while trading secrets with some of the world's most talented graphic artists.
Photoshop Tip: Remove objects from photos with Vanishing Pointというエントリーより。 Photoshop how-to site Photoshopsupport.com shows you how to make objects disappear from photos using Photoshop's Vanishing Point tool. Photoshopの「Vanishing Point」というツールを使い、写真から物体を消す方法を紹介しているチュートリアルビデオがありました。 こんな感じでブツを消してしまうというのですが‥‥ Vanishing Point Tool - Photoshop CS2 Video Tutorialで見ることができます（要QuickTime）。 こんなに簡単に消せてしまうものなんで
手持ちの写真にいろいろなフィルムエフェクトを施すことができる無償のプラグイン集です。Photoshop用だけでなく、これ単体でも実行可能ですので、Photoshopを持っていなくても利用できます。 収録されているのは「Black and White」「Contrasting Levels」「Duotone」「Starlight」「Starpoint」「Grain」「Monotone」「Tonal Streak」「Warm Cool」の9種類。どれもこれもシンプルですが既存の写真を簡単かつお手軽にいかにもそれっぽくすることができます。かなり便利です。 詳細は以下の通り。 PixelSampler Details ダウンロードは以下から。Windows版とMac版があります。右下にあるPixelSamplerからダウンロード可能。 TwistingPixels 体験版ダウンロード 「Black
フォトグラファーのchristophe gilbertという人が製作した作品の数々ですが、コンセプトもおもしろくユニークで、それでいて完成度も非常に高く、見ていて飽きない写真がいろいろとネット上で公開されています。Photoshopなどで加工されているのですが、アイディアが秀逸です。 閲覧は以下から。 Christopher Gilbert - a photoset on Flickr 公式サイトは以下に。音楽が鳴りますが、左上の「SOUND ON」をクリックして「SOUND OFF」にすれば止まります。作品を表示させてから左の「DOWNLOAD」をクリックすれば、見ている写真をもっと大きくしたものがダウンロードできます。なかなか親切設計。 Christophe Gilbert | photographer http://www.christophegilbert.com/ ・2010年の
下記のサイトで「You Tubeで見るPhotoshopのチュートリアル」という記事が紹介されていました。YouTubeだけじゃなくてMetacafeの動画もありましたが・・・。 どちらにしろ文章だとわからないことでも動画だと簡単に理解できることもあります。細かい操作の多いPhotoshopやIllustratorなどはこうした動画チュートリアルに向いているかもですね。 » Use YouTube to learn Photoshop: etc: quick links to good stuff 以下、オリジナルの記事を尊重しつつ、内容の紹介というスタンスでいくつかご紹介・・・。 ■ Web 2.0-Style Logo Web2.0サイトでよく見かけるのロゴの作成方法です。光っているようなロゴですね。 ■ PHOTO EFFECT エフェクトの詳細です。どこにでもあるような電車の中の写
Adobe Systemsが、Googleなどの競合各社を追従すべく、人気の高い画像編集アプリケーション「Photoshop」のウェブアプリ版を6カ月以内にリリースする計画を進めている。同社最高経営責任者（CEO）Bruce Chizen氏が米国時間2月27日に明らかにした。 これは、広告入りのオンラインサービスを投入して既存製品を補完し、コンシューマー市場におけるシェア拡大を目指す大規模な措置の一環だと、Chizen氏はCNET News.comに語っている。 Chizen氏によると、メディア共有サイト「PhotoBucket」で提供されるウェブベースのビデオ編集ツール「Adobe Remix」とともにウェブアプリ版Photoshopの土台をAdobeでは築いていたという。 Adobe Remix同様、ウェブアプリ版のPhotoshopは、通常のPhotoshopや「Photoshop
DHTMLやAJAXを使いまくったオンライン画像加工サービスです。 レイヤー機能や自動でコントラストを調整する機能などがあり、シャープやぼかし、グレースケール、ガンマ値補正、ネガポジ反転といった代表的な各種フィルタも使用可能です。切り抜き、回転、反転、リサイズ、なんでもできます。 また、ちゃんと「元に戻る」機能があり、何段階でも戻ることが可能です。これは安心。 編集するためにアップロードした画像は最後に自分のパソコンへダウンロードして保存可能。ファイル形式も幅広く、JPEG・GIF・PNG・BMP・TIF・PICT・PCX・TGA・PCD形式で保存できます。JPEGは圧縮率の指定が可能で、GIFは色数指定やディザリングの指定もできます。 というわけで、実際にデジカメで撮影した画像で「nexImage」を使ってみました。 nexImage :: The ultimate online ima
投稿日：2006年10月6日 レベル：− ソフトウェア： 1.編集するイメージを開きます。 2.レイヤーを複製して、レイヤーモードをスクリーンにします。 3.レベル補正で次の設定を適用します。入力レベル:0、0.1、255 4.ぼかし(放射状)を適用します。フィルタ＞ぼかし＞ぼかし(放射状)を次のように設定してください。 大きさ:100 種類:ズーム 画質:高画質 5.自動レベル調整を適用してください(Ctrl+Shift+L)。 6.現在のレイヤーを効果が現れるまで何回もコピーします。 7.最初のイメージと見比べてください。 引用:Web Design Library 著者:FotoFects翻訳:atuk
ウェブデザインに限らず、何かパソコンを使ってデザイン関連の仕事をするにはあの「Photoshop」を使いこなすことが必須らしいとはわかっていても、いまいちどういう風に使えばいいのかわからない、あるいは、仕事でPhotoshopを使ってはいるが必要な機能のみを使っているだけであって、ちょっと凝ったことを聞かれると即答できないのでテクニックをブラッシュアップしたいと思っている……そんな人向けに役立つPhotoshopをマスターするためのチュートリアルをいろいろと集めてみました。時間のあるときにでも少しずつ眺めていけば、なんでもできるようになるかも。 チュートリアルの詳細は以下の通り。 まずは基本的なテクニックを具体例と一緒に解説しているサイトを3つほど。初級テクニックから高等テクニックまで具体例を交えて解説しています。 Photoshop Tutorials from PhotoshopCAF
下記の画像はこのサイトのトップページの画像です。両者の違いは、1ピクセルのラインが入っているか、いないかの違いです。左の画像はピクセルラインあり、右側はラインなしです。（画像クリックすると原寸表示されます。） ピクセルラインを入れることで、立体感を演出することができ、さらに質感を高めることができます。 さらに拡大した画像も下記の画像をクリックすることでご覧いただけます。
投稿日：2007年3月30日 レベル：初心者 ソフトウェア： このチュートリアルでは、爆発しているような効果の作成について紹介します。 Step1 ： 新しいドキュメントを作成 Step2 ： 多角形選択ツール(L) Step3 ： フィルタ ＞ 変形 ＞ 波紋 Step4 ： フィルタ ＞ ぼかし ＞ ぼかし(放射状) Step5 ： イメージ Step6 ： 完成
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dr. Web Weblog ? Blog-Archiv ? Collection of Web 2.0 Navigation Menus
