下記の画像はこのサイトのトップページの画像です。両者の違いは、1ピクセルのラインが入っているか、いないかの違いです。左の画像はピクセルラインあり、右側はラインなしです。（画像クリックすると原寸表示されます。） ピクセルラインを入れることで、立体感を演出することができ、さらに質感を高めることができます。 さらに拡大した画像も下記の画像をクリックすることでご覧いただけます。
photoshop- 1ピクセルラインで質感を高めるテクニック - WEBデザイン BLOG
下記の画像はこのサイトのトップページの画像です。両者の違いは、1ピクセルのラインが入っているか、いないかの違いです。左の画像はピクセルラインあり、右側はラインなしです。（画像クリックすると原寸表示されます。） ピクセルラインを入れることで、立体感を演出することができ、さらに質感を高めることができます。 さらに拡大した画像も下記の画像をクリックすることでご覧いただけます。
Photoshopでやってしまいがちな12個の間違った使い方
Photoshopは便利なソフトウェアである反面、あまりにも便利なので思わずやってしまいがちな間違い、誤用、乱用といったものもあります。これらのことをしてしまっているからといって嘲笑の対象になるというのではなく、こういうミスを犯しがちなのでPhotoshop初心者・初級者は気をつけましょうというポイントのリストになっています。 どれもこれもPhotoshopをマスターしている人から見れば当然のことばかりなのかもしれませんが、誰でも一番最初には「初めて」のときがあったことも事実なので、これらの間違いを犯しているユーザーを見かけたら、相手の心を傷つけないように注意しながら、上達を促してあげると良いのかもしれません。 Photoshopでやってしまいがちな12個の間違った使い方は以下から。 12 Common Photoshop Mistakes, Misuses and Abuses | Th
Photoshopで人物の髪の毛を切り抜く｜| Woops'dez | Bloggin'
人物の切り抜きにはよく「パス」を使います。 しかしながら髪の毛はとっても大変。ここではちょっと楽が出来る切り抜きTIPSをお送りします。 まぁ、私のやり方なので名フォトショッパーさんはもっとグレイトなTIPSを持っているかも知れませんので、そしたら教えてくださいなー。 1.切り抜きをすませる 問題の部分は適当に残しておきましょう。 こんな感じ。 2.背景→レイヤーにする 鍵の付いているレイヤーをダブルクリックすると、「背景」ではなく「レイヤー」になります。こうすることで、チャンネルなどいろいろ遊べるようになります。 こんなダイアログが出てくるのでとりあえずOK押しちゃえ。 「背景」と「レイヤー」の違い 「背景」 消しゴムなどで消しても後ろが白いままで透過されない。 移動が出来ない チャンネルの複製など出来ない などなど レイヤーにするとこれらのことが全て出来るようになります。 3.「チャン
Photoshop で背景透過の美しい favicon を作成する - 2xup
2006-04-28T23:23:04+09:00 favicon (ファビコン)はウェブブラウザのアドレスバーや、ブックマークした URL の横に表示される小さなアイコンです。いまやもうサイトのアイデンティティを明示するツールとしてほとんどサイトでみることができますが、小さいファイルであると共に、ファイルを扱えるソフトェアがそれほど多くは無いため、なかなか想い通りにデザインできない。という悩みを持っていました。できれば背景を透過にして、マットの少ない美しいものを作りたいと考えていて、使い慣れたソフトウェアである Adobe Photoshop で作れれば幸せだなあ。と思ってました。 これまでは、FavIcon from Pics という Web 上のツールを利用して作っていましたが、これは背景を透過にできなかったり、元の画像から変換される際に大きく画像の質が落ちてしまうという欠点がありま
スクロールさせると動くステレオ写真 :: デイリーポータルZ
先日、画面をスクロールさせると動く動画、というのをやった。（⇒「スクロールさせると動く動画」） これをステレオ写真でやったらどうなるだろう？ ちゃんと飛び出す動画になってくれるだろうか？ （T・斎藤） 前回の復習 前回、以下のようなことがわかった。 ・連続写真を縦に並べたものをスクロールして見ると動いて見えた。 ・ただし普通にスクロールしても動いて見えない。画像の縦幅に合わせてスクロールするのがポイント。そうなるよう簡単な細工を施した。（JavaScriptで実現） ではさっそく、新作を用意したのでカーソルキーの「→」を連打、または押しっぱなしにして動かしてみよう。 ちゃんと見えたでしょうか？ （ここがクリアできてないと今回は先に進めないので） ＩＥ と Firefox と Safari にてちゃんと動くことが確認できているので、たぶん大丈夫だろうと思うが、ブラウザによっては、間違って「↑
スクロールさせると動く動画 :: デイリーポータルZ
なにげなく画面をスクロールした時、ふと写真が動いて見える（ような気がした）ことが何度かあった。そこである時こう考えた。「連続写真を縦に並べてスクロールさせたら、動いて見えるんじゃないか？」 なんで？って思ったかたはよく考えてみてほしい。 映画だって、連続写真が何枚も縦に繋がってて、それをリールに巻きつけてダーっと流す。言ってみればスクロールさせてるようなものだろう。そもそも、スクロールって「巻物」って意味だし。 （T・斎藤）
JPEG画像をより美しく、より軽量に最適化するテクニック
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
| ＾＾ |秒刊SUNDAY | 勝てる企画書を書くためのエントリー集
2009年06月24日 誰得？と言われない勝てる企画書を書くためのエントリー集 カテゴリ：役立ち・知識 企画書って何のために書くのか・・・そんなことを毎回上司に言われる毎日ですが、そりゃお客さんのためだ！ってわかっているんですが、いつの間にか自己中心的な企画書になっていくんですね・・・そんなときに参考になるエントリーです。 ◆企画書の書き方 企画書の基本は『コスト』『メリット』『スケジュール』これらが欠如しており、かつ納得できるような説明ができないと誰得？となってしまう。 コスト・・・何がいくらかかり、なぜ必要か。 メリット・・・期待できる効果と、過去の例や数値。 スケジュール・・・いつまでに可能か。いつ開始か。 これらを、実績や数値を基に企画書を書く為にどういう準備や記述が必要かということです。 ■ASCII.jp：これぞ完璧企画書――「1枚企画書」パターン実例3題 ｜パワポで極め
3キャリア共通のモバイルサイトコーディングにおけるポイント
MT4i3.0.8X1の公開後、テンプレートセット作ったりしてますが、中には自分でコーディングしたい!って人もいると思われます。 そんな人のために、既に情報としてはいろいろなところで出ているんですが、一応3キャリア(i-mode/EZweb/Yahoo!ケータイ)共通のコーディングのポイントを纏めておこうかなと。 別にMT4i3.0.8X1だけじゃなく、普通にどんなモバイルサイトのコーディングでも使えます。 一応、注意点をまず述べておくと、XHTMLに対応しているのは、 docomoのFOMA端末 auのWIN端末 softbankの3GC端末 という、いわゆる上位端末になります。古い下位機種では利用できません。 最近は下位端末を利用している人は少なくなりましたし、仮に利用していてもまずネット閲覧にケータイを使う目的ではないので、このあたりは非対応でも問題ないかなと考えています。 次に全体
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
Mac OS X Style Dock in Flash 7 (ActionScript 2.0)
This is the new improved version of the Flash Dock wrapped in an ActionScript 2.0 class. We included an example that is easy to customize. See the code below that is used to create this dock. The rest is in the Dock.as ActionScript class. Download Source File: Flash7_Dock.zip Code: // Handles clicks on icons this.dockActions = function(label) { switch(label) { case 'Preferences': trace('This is ho
FirefoxでHTML中のFlash(swf)が印刷できない」の対処法 � TECH Matari
申し訳ございません。 只今メンテナンス中です。
YUIのfonts.css
YUIのfonts.css ブラウザ間やOS間のフォントの差異を吸収してくれるCSSライブラリにYahoo! Developer Networkで公開されているYUI(Yahoo! UI Library)の「fonts.css」があります。 利用方法は非常に簡単でhead要素などでfonts.css を読み込むだけで利用できます。 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css"> Yahoo!のサーバー上のファイルを直接読み込んでも良いですし、ダウンロードしたファイルを読み込んでも大丈夫です。 fonts.css を読み込むとブラウザやOSは関係なく、font-familyは「Arial」、font-sizeは「13 px 」、lin
世界四季報: 3キャリア対応携帯サイトXHTMLテンプレート
ドコモ（docomo）、AU、ソフトバンク（SoftBank）の３キャリアに対応した３G携帯サイト専用のXHTMLテンプレートをまとめてみました。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <meta name="keywor
3キャリア対応のCSS変換モジュールHTML::MobileJpCSS - komoriyaのはてなダイアリー
DoCoMo,EZweb,Softbankを共通の外部CSSファイルからスタイルを反映させるモジュールを作りました。 http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.01/ 3キャリア間での変換の必要性 DoCoMoでは外部CSSを参照できずインラインのみの対応となっています。 DoCoMoのインライン化についてはid:tokuhiromさんの作成したHTML::DoCoMoCSSこちらで対応が可能なのですが、3キャリア間で共通のCSSを参照するとなると属性の指定方法に微妙な差異が問題となります。 例えば小さいフォントを表示したい時は、 DoCoMo --- font-size:xx-small EZweb --- font-size:10px Softbank --- font-size:smallと属性の値が異なります。 hrタグ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
http://blog.e-riverstyle.com/2009/07/-html5css3.html
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
IDEA * IDEA
http://gerenuk.crazyphoto.org/2009/06/15/714/