クォータービュー pixel art tutorials
Pixel art tutorial This tutorial will try to help you create pixel art, ISOMETRIC PIXEL ART Isometric Pixel Art, Complete Guide: Chapter 1 Isometric Pixel Art (IPA) is a modern form of digital art that only recently has been accepted as a new art form. This excellent guide explains how to make IPA from beginning to end.
ピンホールカメラの作り方 - ネタフル
The downloadable cameraというエントリーより。 Web site Lighthouse in a Tree helps you build your very own downloadable, pinhole camera. Lifehackerで、ダウンロードして組み立てられるピンホールカメラを作るのを手助けしてくれる「Lighthouse in a Tree」が紹介されていました。 PDFをダウンロードし、それを印刷して作成するのですが、なかなかデザインもグッドじゃないですか。 細かいFlashアニメーションによるガイドもあります。うわっ、これは本当に分かりやすい！ 自分でカメラをつくる。そのカメラで写真が撮れる。なんだかとってもワクワクしますねー。35mmフィルムも使えるみたいですよ。
（ＢＬＯＧ）リンク・フォーカス時の点線が画面外まで拡張される問題
text-indent: -xxxxemの弊害 CSSを使ってJavascriptのロールオーバーイメージを実現する方法は既に一般的になって、あちこちのサイトでも見られるようになりました。 ところが、問題点をいくつか見つけたので書いておきます。 自分のサイトの粗が出る「諸刃の刃」のような記事になりそうで本当は書きたくなかったんですが... まずはじめにCSS背景切り替えの概要Firefox1.5でクリックした時に左に長い点線の枠が出現するタブキーで現在位置が分からなくなる解決策というより、気休め的な方法過剰な見栄え制御決定的な回避策(アクセシビリティ向上案) まずはじめにCSS背景切り替えの概要 あちこちのサイトやCSS関連の書籍で紹介されていると思いますので、ここでは軽く書きます。 リンクの画像にマウスが重なるとその画像が切り替わるという仕掛けです。 このサイトのヘッダー部分にあるナビゲ
Photoshop でつややかな表現をわりと簡単に実現する
2006-05-05T20:05:06+09:00 Illustrator などを利用してベジェ曲線で書いた絵に Photoshop を利用してつややかな表現を加える方法は何通りもあり、すでにたくさんのノウハウが存在しますが、それなりのものならほんの少しの作業で実現できます。いつも違う方法でやってしまいあとで苦労する事があるので、自分自身の忘記録も兼ねてその Tips をまとめておきたいと思います。Photoshop CS で作成したデータですが、サンプルファイルも用意しているのでもしよろしければダウンロードして使ってみてください。 サンプルファイルをダウンロード(tsuyayaka-sample.psd) サンプルファイルはせっかく角丸の四角形で作成したので、Feed Icon として利用できるように、オレンジで描いたレイヤーと、アンテナ部分を描いたレイヤーも追加してあります。 レイヤー
小粋空間: CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
「CSSでブログに影をつける（ドロップシャドウ）」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩んでいる（かもしれない）方のために、Photoshop 6（CSは持ってません）を利用した作成方法を紹介します。 [ファイル]-[新規]で（固定レイアウトの場合は）ブログ幅のウィンドウを作成。実際の横幅はもっと広いと思いますが、説明上、ここでは 250px に設定しています。 新規作成のウィンドウはこんな感じになります。 [レイヤー]パレットに表示されている[背景]をダブルクリック。 開いたウィンドウのレイヤー名は「レイヤー0」になっていると思いますので、そのまま[OK]をクリック。これは、[背景]から任意の名前に変更することで、レイヤーのロックを外してドロップシャドウ等の効果を設定できるようにするための操作です。 これで[レイヤー]パレットに表示され
Photoshopでページがカールするエフェクトを作る方法 - ネタフル
Create a page curl in Photoshopというエントリーより。 If you’ve ever wanted to add a little 3D depth to a digital image, Veerle’s blog has a tutorial for creating a page curl effect in Photoshop. デジタルの画像に深みを持たせるために、Photoshopで“カール”のエフェクトをつける「Creating a page curl in Photoshop」というエントリーが紹介されています。 写真のカールがどんなものかというと‥‥ こんな感じのはよく見かけますよね。 4つのステップで紹介されていますので、興味のある人はぜひお試しを。
Forgot the Milk. - Firefox のメニューバー・ツールバーを徹底的にカスタマイズする方法
ネタ元は Lifehack.org の「One Firefox Toolbar to Rule Them All」という記事です。 Firefox のメニューバー、ツールバー、ブックマークツールバーをカスタマイズし、各領域を可能な限りコンパクトにする方法を紹介します。 ツールバーをカスタマイズする ツールバー領域の右クリックメニュー「カスタマイズ」より「ツールバーのカスタマイズ画面」を表示してください。ドラッグ＆ドロップ操作でアイテムを追加・削除することができます。（不要なアイテムは、カスタマイズ画面にドロップすることで削除できます） ロケーションバーでスマートキーワード検索ができるので、検索バーも不要かもしれません。 メニューをアイコンに閉じ込めてコンパクトに メニューをアイコン１つに閉じ込めるために、Custom Buttons 拡張を利用します。Custom Buttons は、スク
ステッカーっぽいのを貼ってみる
前々からちょっとカッコイイなーと思ってたステッカーっぽいの。 試しに今回貼ってみました。左上に貼ってあるコーディングコンテストのがソレです。 ちょっとウチのサイトの場合だと横幅があるんできついですが、まぁテストって事で。（外しはしないけど） 知ったのは、ネットのサラダボウルさん。 って事で、詳細をば。 方法はすっごい簡単。 たぶんブログとかにも貼り付けれるんじゃないかな？ まずは←こんな感じで、透過Gifを作成。 どんな感じでもいいのでお好きなように作ります。 透過Gifの作り方云々は、ここじゃ割愛。 そしたら、htmlに以下のような感じで貼り付け。 <p id="sticker"> <a href="/archives/2007/0407_1430.php"> <img src="/img/sticker.gif" alt="Codin Contest 開催中" /> </a> </p>
これで完璧！ロゴデザインのためのお役立ち資料まとめ | P O P * P O P
これがあればもう完璧ですね・・・300以上ものロゴデザインに関するサイトを集めたまとめです。 チュートリアルからロゴデザインのアイディアまで・・・かな～り使えるのではないでしょうか。300以上もあるのでさすがにいくつかのカテゴリーに分類されていますね。 どんな役立つ資料があるのでしょうか。詳しくは以下をどうぞ。 ↑ ロゴのタイポグラフィーに関する資料いろいろ。フォントは悩みますよね・・・。 ↑ お約束ですが、「2.0っぽい」ロゴデザイン集についてもいろいろ教えてくれます。 ↑ 素敵なロゴデザインを集めたサイトも紹介してくれます。 全てのカテゴリーは以下のとおりです。是非ご活用ください。 Importance of Logo （ロゴの重要性） Logo Design Software （デザインのためのツール） Logo Design Tutorials （チュートリアル） Logo Fil
もうこれで迷わない！色に関するお役立ち資料まとめ | P O P * P O P
色って何かと迷いますよね。センスだけでできればいいのですが、なかなかそうもいかないもの。そこで色の理論から、色が心理に与える影響までを網羅した資料をご紹介。 以前ご紹介した「これで完璧！ロゴデザインのためのお役立ち資料まとめ」と同じシリーズですね。 色に迷ったときにかなり使えそうですよ。詳細は以下からどうぞ。 いろいろ網羅されているのですが、いくつか気になるトピックをピックアップ。 ↑ 色関係の使えるオンラインツールいろいろ。 ↑ デスクトップから使えるツールもいろいろ紹介されています。 ↑ 色が心理に与える影響について。大事ですよね。 念のため、全部のカテゴリーをあげておきましょう。 Color Basics （色の基本） Color Psychology & Meaning （色が心理に与える影響および色の意味） Color Science & Theory （色の理論） Color
Web標準の基礎と実践---目次
第1回 なぜWeb標準が「ホット」なのか Web業界では「Web標準（Web Standards）」を意識した正しい(X)HTML+CSSに基づくサイト制作が当たり前になってきている。Webのポテンシャルを最大限に活かすためのWeb標準について、基礎知識だけでなくトレンド的な観点を交えながら、「なぜWeb標準が普及してきているのか」を考えてみよう。 第2回 Web標準と新たなマークアップ言語「XHTML」 Web標準ベースのサイト制作では、「XHTML」という新たなマークアップ言語を採用するのが一般的である。なぜHTMLではなくXHTMLを採用するのか、XHTMLのなかでどのバージョンを採用すればよいかを考えてみよう。 第3回 XHTML+CSSの役割分担 XHTMLはWebページの「構造」（文書構造）を、CSSは「見栄え」（視覚表現）を指定するものである。旧来はHTMLで両方を指定するこ
:::STOP'N LISTEN::::::to the silence:::::
このウェブスペースへは、まだホームページがアップロードされていません。 早速、エックスサーバー上へファイルをアップロードしてみましょう。 アップロードの方法などは、サポートマニュアルをご参照ください。
フッターとかの区切り『｜』のサンプル4種｜CSS HappyLife
フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが） <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home｜ About｜ Gallery｜ Blog 普通にhtmlに｜を記述しているのでソースは当然下記のように。 <ul id="samp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TUTORIAL BLOG
http://www.caramel-tea.com/2007/06/output/
Special Characters
PhotoshopでWeb 2.0風 ウェブデザイン チュートリアルを実際に試してみた - DesignWalker
