先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

汚した感じのグランジのテクスチャを簡単に作成できる、高解像度のPhtoshopのブラシをLost and Takenから紹介します。

汚した感じの「グランジ」をウェブデザインに上手に取り入れる5つのポイントをSpyre Studiosから紹介します。 form + function グランジと聞くと「いい加減である」といった印象をもつ人もいるかもしれませんが、それは100%間違いです。レイアウトに秩序をもたらすグリッドとの相性を見てください。 グリッドはコンテンツの流れを構築する役割をもっています。グランジにグリッドを取り入れることで、美しくより容易に読み取りが可能なレイアウトになっています。 2. 繊細な背景

フラリッシュのアクセントとしても映える、モザイクのエフェクトを描くPhotoshopのチュートリアルをPhotoshop Starから紹介します。 Make a Collage Using Mosaic Effect チュートリアルは一から作成するもので、テキストは英語ですがステップごとにキャプチャがあり、ポイントが強調されているので分かりやすいものとなっています。 フラリッシュの背景が無い状態でも、グラデだけ印象的で美しい仕上がりです。

Black and white anywidth centered menu demo ドロップダウン型ナビゲーションはラベルのテキスト量に関わらず中央に配置され、カラーはスタイルシートで指定されているので簡単に変更が可能なようになっています。 また、ナビゲーションの随所には効果的に1ピクセルのラインが配置されています。

商用サイトでも無料で利用できる高解像度の葉っぱのPhotoshopのブラシをSix Revisionsから紹介します。 Leafd: 10 Free High-Res Photoshop Leaf Brushes ブラシは個人・商用とも無料で利用可とのことで、ライセンスはCC 3.0です。 葉っぱは全部で10種類あり、2000px前後の高解像度なものとなっています。

Photoshopでの作業を今までより早く、そしてより簡単にする20のTipsをSpoonGraphicsから紹介します。 20 Handy Photoshop Tips For a Faster Workflow デザイナーの人には常識的なものだと思いますが、実用的で多用するものが多く紹介されています。 ※コマンドはWin XP+Photoshop CS4のものです。 Macの場合は、下記置き換えてください。 Ctrl = Cmd Alt = Opt 作業ファイル上で、[space] 使用してるツールを手のひらツールに変更し、画像を移動させることができます。 [編集]-[環境設定]-[テキスト]の「フォントプレビューのサイズ」 サイズを「特大」にすると、フォント選びが楽になります。 「文字パレット」のサイズにフォーカスをあてて[矢印] 上下の矢印キーでフォントサイズを増減することができま

光、光源、光線、光跡を効果的に使用したPhotoshopのチュートリアル集のPart 14です。 Create an Artistic Photo by Yourself Create an Inte

テキストをかっこよく魅せるPhotoshopのチュートリアルの紹介です。 3D Typography Add Fantastic Color to 3D Text – Part I Add Fanta

Divide and Conquer demo デモの上ではナビゲーションの区切り線がホバー時に見えてしまってますが、下ではすっきりしています。 ポイントは左にネガティブマージンを設定することで、隙間を埋めています。 また、IE6対策として「float:left;」の代わりに「display:inline;」を使用します。

今年も色々と情報が発信されました。 後で試そう、とか後で見よう、と思った まま何もしていない自分がいたので ちょっと復習用にメモ。来年の勉強用です。 個人的なメモですが参考になれば幸い。 内容はWeb制作に関わる記事ですが、まとまりがありません。単なるメモなのでご了承いただければと思います。順不同。 JPEG画像をより美しく、より軽量に最適化するテクニック 理屈に沿った軽量法でした。これは癖を付けてナンボのテクニックですね。頭に叩き込んでおきたい。PNGも合わせて。 JPEG画像をより美しく、より軽量に最適化するテクニック とっても使えるoverflowプロパティ。その使い方色々。 凄く便利。こんなに役に立ってくれるプロパティだとは知りませんでした。これも覚えておくと便利そう。 とっても使えるoverflowプロパティ。その使い方色々。 商用無料で使える写真素材サイトまとめ2009年度初版

JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

次に、移動ツールを選択し、最初に開いた指輪の画像に、このレイヤーをドラッグ＆ドロップしてください。 そして、宝石の上に配置してください。 星のドキュメントはもう必要ないので閉じてください。 ここでレイヤーパレットの星のレイヤーの目のアイコンをクリックし、星のレイヤーを非表示にしておくとよいでしょう。 次は指輪のレイヤーで作業しなければいけないので、星のレイヤーに邪魔されたくないからです。 次に宝石のディテールを取り出す必要があります。 「背景」レイヤーをクリックし、Ctrl + Jを押してコピーしてください。 消しゴムツールを選択し、指輪の宝石以外の部分をすべて消してください。 （メモ：私は画像から背景を削除する時、下に新しいレイヤーを作成します。そして、色で塗りつぶします。そうすることによってエッジを容易に確定することができます。そして、後でこのレイヤーを削除します。） 「フィルタ」-「

写真素材を使用せずに、紙、メタル、カーボン、布、レザー、草などのテクスチャを作成するPhotoshopのチュートリアルを紹介します。

投稿日：2010年07月20日　　　レベル：初級者　　　　ソフトウェア： このチュートリアルでは、メタリックな効果をつける方法を紹介します。 Step1 ： グレイの長方形を描く Step2 ： 新規レイヤーにノイズとぼかしを適用する Step3 ： クリッピングマスクを使う Step4 ： グラデーションを適用する Step5 ： 光の当たった質感を加える Step6 ： ネジをつくる Step7 ： 完成

木の素材を探している。 そんなときにおすすめなのが、『More Than 350 Free and Premium Wood Textures』。木のテクスチャ集です。 なかなかいい感じのものが揃っています。 Free Hi Resolution Wood Textures (9 Textures) 使いやすいシンプルな木の素材 Six Wood Textures (6 Textures) いろいろなタイプの木のテクスチャ6 Wood 01 (3 Textures) 使いやすそうな木のテクスチャ Wood Textures (45 Textures) シンプルなテクスチャ45 Tileable Wood Textures (3 Textures, Seamless) 優しいテクスチャ感の素材 木の素材を探している方は、一度見てみてください。 More Than 350 Free and P

70,000個以上の商用・非商用で無料で利用できるフォントをまとめたサイトを紹介します。 FontPark 登録されているフォントは82のカテゴリに分けられており、日本語（Japanese）のカテゴリもあります。 [...]

このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。

投稿日：2010年08月10日　　　レベル：初級者　　　　ソフトウェア： このチュートリアルでは、チョウに色をつける方法を紹介します。 Step1 ： はじめに Step2 ： 色をつける Step3 ： 影をつける Step4 ： 塗った色の境目を綺麗にする Step5 ： さいごに

綺麗なグラデーションや立体感のあるメニューやボタンを作りたい。 そんなときに参考になるのが、「Free PSD Web UI Element」。無料でダウンロードできるUIデザインのPSDファイル集です。 なかなかいい感じのものが揃っています。 Modern Web UI Set かっこいいメニューやボタン、フォームなど。商用でも利用可 Massive Web UI & Button Set カラフルなアイコンやパンくずなどのPSDファイル Free PSD : Checkbox Replacement iPhoneのオンオフボタンのような、チェックボックスのデザイン Webdesigner Toolkit 優しいトーンで角丸デザインのUIパーツ Scalable calendar シンプルなカレンダーのPSDファイル UIの要素をさくっと作りたいときに、参考にしてみてはいかがでしょうか。

投稿日：2010年08月17日　　　レベル：初級者　　　　ソフトウェア： このチュートリアルでは、テキストのエッジを輝かせる方法を紹介します。 Step1 ： 煙をつくる Step2 ： テキストをつくる Step3 ： テキストをぼやけさせる Step4 ： テキストの端に輝きを加える Step5 ： 煙に光をあてる Step6 ： テキストに影を加える Step7 ： くねくねのラインをつくる Step8 ： 色の調整をする Step9 ： 完成 1300×780ピクセルの新規ドキュメントを作成します。 背景を黒く塗ったら新規レイヤーを作成して「テクスチャ」と名前をつけて、qbrushes.netやbrusheezy.comなどのサイトからグランジなブラシセットをダウンロードしてテクスチャを塗ります。 塗った後に、テクスチャの上でCtrl＋Tを押してマウスを右クリックしてから、「遠近法

Home ＞ フォトショップ講座 ＞ Photoshopでミリタリーなウェブサイトを作成する方法 Photoshopでミリタリーなウェブサイトを作成する方法 投稿日：2010年08月20日　　　レベル：中級者　　　　ソフトウェア： このチュートリアルでは、ミリタリーなウェブサイトを作成する方法を紹介します。 Step1 ： 背景とメインの箱をつくる Step2 ： ヘッダーをつくる Step3 ： メインに画像を加える Step4 ： タイトルをつくる Step5 ： ナビゲーションバーをつくる Step6 ： 完成

Home ＞ フォトショップ講座 ＞ Photoshopでポートフォリオサイトのレイアウトを作る方法 Photoshopでポートフォリオサイトのレイアウトを作る方法 投稿日：2010年09月03日　　　レベル：中級者　　　　ソフトウェア： このチュートリアルでは、ポートフォリオサイトのレイアウトを作る方法を紹介します。 Step1 ： 長方形を描く Step2 ： 境界線をつける Step3 ： 長方形の一部を消す Step4 ： 上に箱をつくる Step5 ： 左に箱をつくる Step6 ： さいごに

Home ＞ フォトショップ講座 ＞ Photoshopで簡単に近未来デザインのロゴを作る方法 Photoshopで簡単に近未来デザインのロゴを作る方法 投稿日：2010年08月31日　　　レベル：初級者　　　　ソフトウェア： このチュートリアルでは、近未来デザインのロゴを作る方法を紹介します。 Step1 ： はじめに Step2 ： シェイプを作る Step3 ： 長方形を変形させる Step4 ： レイヤースタイルを設定する Step5 ： エアブラシをかける Step6 ： さいごに

投稿日：2010年08月27日　　　レベル：中級者　　　　ソフトウェア： このチュートリアルでは、タトゥーのデザインを写真に挿入する方法を紹介します。 Step1 ： タトゥーを選択しメインの写真に置く Step2 ： サイズを調整する Step3 ： 女性の背中になじむように変形する Step4 ： レイヤーを調整する Step5 ： 完成 これが加工前と加工後の写真です。 タトゥーの画像から始めます。 ツールパレットの自動選択ツールを選び、タトゥーデザインの白い背景を選択します。 画像の白い部分を全て選択するようにしてください。 「選択範囲」−「選択範囲の反転」を適用します。（Shift＋Ctrl＋I） タトゥーのデザインをメインの写真にドラッグします。 コピー（Ctrl＋C）して写真にペースト（Ctrl＋V）しても構いません。

Home ＞ フォトショップ講座 ＞ Photoshopでテクスチャを作るうえで理解しておくべき用語 Photoshopでテクスチャを作るうえで理解しておくべき用語 投稿日：2011年2月25日　　　レベル：−　　　　ソフトウェア： このチュートリアルでは、Photoshopでテクスチャを作るうえで理解しておくべき用語をご紹介します。 Step1 ： はじめに Step2 ： マテリアルを構成するマップ 2Dや3Dの描画でテクスチャを作る時に理解しておかなければならない用語について説明します。 「テクスチャ」は、様々なチャンネルやマップで作ります。 ここでは、それぞれについて定義します。 【アルファ】 アルファチャンネルはグレースケールだけで構成され、画像に深みを加えます。 最も暗いピクセルを「より深く」見せて、最も明るいピクセルを、ベベルオプションを使って希望するレベルまで最大限明るくし

20 Design Tutorials For Creating The Perfect Button | Creative Nerds これは押したい！というボタンを作成するチュートリアル集 イラストレーターやPhotoshopで次のようにクールなボタンを作成するチュートリアル集です。 CSS3でボタンデザイン出来るようになったとはいえ、凝った物を作るならやはりオーサリングツールという方は参考にできそう。 ボタンデザインの仕方は本当に色々あって、奥が深いですね。 関連エントリ ボタン作りにもう手間はかからないPhotoshopのボタン素材１５０ かなりクールにデザインされたPhotoshop用のボタンテンプレート集 ハイクオリティなPhotoshopのボタン、アイコン、バッジ等のテンプレ集 ボタン作成のPhotoshopチュートリアル集 背景やボタンなど様々に使えるPhotoshopグラ