#000000は黒、#ffffffは白。 webデザインではHTMLやCSSにおける色の指定の仕方としてこのような16進数による表記を主に用いています。 色指定には他にも 16進数指定(三ケタ) #f00 10進数指定 rgb(255, 0, 0) %指定 rgb(100%, 0%, 0%) 色名指定 red 全て赤の場合 といった指定の仕方があります。Photoshopに慣れ親しんだ方はもっと色指定の仕方に覚えがあると思いますが、今回はコーディングにおける色指定の観点で説明しますね。 デザイナーでさえカラーコードを見て即座に色を想像できなかったり(私が未熟なだけなのかもしれませんが><)、ましてや色を見てカラーコードをぴたりと当てるなんて芸当はさすがに難しいです。環境によって微妙に色が違って見えたり、隣接色や面積によってどうしても人間の知覚する色の見え方は変わってきますしね(色の錯視 –
もっと見たい方はこちらからどうぞ 50 Beautiful and Cool Websites using Character Illustration 用途は限られてきますが、子供向けやエンタメ系サイト、文字情報が多い場合などに効果的そうですね。
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers CSS3はCSS2.1と比較してもかなり高度なスタイル指定ができるようになっている。主要ブラウザは、部分的にせよCSS3をサポートしており、よりリッチなUIを実現することができる。 一方でCSS3は、WebデザイナやWebデベロッパにとっては開発の困難さを引き上げる要因にもなっている。プロパティが多すぎてすべてを頭に入れておくのは困難であるうえ、策定段階にあるためベンダプレフィックスのついたプロパティも併記しなければならない。こうなってくるとCSS3で包括的なスタイルを指定するというのは至難の業になる。 そうしたケースで役立つサイトのまとめがSitePointに10 of the Best CSS3 Code Generatorsとして公開された
アドビ システムズは都内にてクリエイター向けのセミナー「デジタルフォト&デザインセミナー2011~トップクリエイターのテクニックとアイデア~」を開催した。セミナーでは、「HP WorkstationとAdobe CS5.5による写真と動画の最先端レタッチテクニック」が行われた。 セミナーでは、「Photoshop」のパペットワープを使ったレタッチテクニック、「Illustrator」の「エンベローブ」を活用した画像処理テクニックに続いて、「Photoshop」で人物をマスクするテクニックが、フォートンのプロデューサー 兼子研人氏とレタッチャー toppy氏によって紹介された。 Photoshopで人物をマスクするテクニック この画像の子供のマスクを作成する まず始めに、画像の子供の部分を範囲選択し、「選択範囲→境界線を調整」を選ぶ。次に「エッジの検出(スマート半径)」を使い子供の輪郭に沿っ
『Static HTML Iframe Tab』アプリ Facebookページの作成方法で最後に紹介するのが、『Static HTML Iframe Tab』アプリケーションです。Facebookページを作るアプリは他にもいくつかありますが、当ブログのページを作る時に使用したのがこのアプリです。このアプリで制作したページは『https』で接続した場合でも問題なくページを表示してくれます。 Step01 まずは『Static HTML Iframe Tab』をインストールします。 http://www.facebook.com/search.php?q=Static%20HTML%20Iframe%20Tab#!/iframehost ここで気をつけたいのは、メニューに表示させたいアイコンによってインストールボタンが異なる部分です。下の画像を参考に表示させたいアイコンを決めてからインストール
ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます!フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類あります。 PXtoEM.com: PX to EM conversion made simple. ベースのサイズ(px)を決めると、em, pt, %の値が表示されます。 カラー関連 ウェブ配色ツール Ver2.0 配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。 Color Scheme Designer 3 カラーパレットジェネレーターです。海外サイトで
Paul Graham / 青木靖 訳 2006年10月 最近やった講演の後のQ&Aで、スタートアップを失敗させるのは何かという質問をした人がいた。その場に立ったまま何秒か呆然としていた後、それが一種のひっかけ問題なことに気付いた。これはスタートアップを成功させるのは何かという質問と等価なのだ——失敗の原因となることをすべて避けるようにすれば、成功することができる——そしてこれはその場で答えるにはあまりに大きな問だった。 後になって、私はこの問題をそういう方向から見るのも有効かもしれないと思うようになった。すべきでないことをすべて並べたリストがあれば、それをただ逆にするだけで成功へのレシピに変えることができる。そしてこの形のリストの方が、実践する上で使いやすいかもしれない。やらなければならないことをいつも頭に入れておくよりは、何かやってはいけないことをしているときにそれと気付くというほうが
実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています(褒め言葉です)。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、1つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部を無言でご紹介します。 ちょっとヒーローとかの変身シーンみたいな感覚です・・実際に動きを見てもらうと、いかに無駄にすごい動きか
実装も簡単で、オプションも豊富に揃った、使い勝手のよい画像スライドショー用のjQueryのプラグインを紹介します。 約4KBと超軽量なのもいいですね。 右上のオートプレイは状況も表示します。 Orbitの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> スタイルシートも外部ファイルとして指定します。 <link rel="stylesheet" href="css/orbit.css"> HTML 画像のみを配置したシンプルなスライドのHTMLです。 <div id="featured"
利用も簡単にでき、スタイルシートの勉強にもなる、CSS3で実装されたボタンを紹介します。 ほとんどのものがclassを追加するだけで、簡単に利用できます。
こんにちは、ポータルグループでWeb広告の制作を担当している阿部です。 ◆はじめに 先日、個人のブログで「今だから分かる、社会人1年目のころの自分に伝えておきたい、7つの大切な心がけ」というエントリーを書いたところ、何件かリツイートしていただいたり、Facebookの「いいね!」をしていただいたりと、一定の関心をいただきました。 せっかくなのでTipを2つ加え、Webディレクターにフォーカスして追記したものを紹介させていただきます。 1. 無口は"思慮深さ”ではなく、"無能”を演出する 先輩、上司はそもそも、新人にグッドアイデアや正論などを期待していません。期待しているのは、新人が何を考えているのか知りたいということと、経験の少なさからくる慣習にとらわれない意見だったりします。そして、会議で熟考していても "思慮深い人” とは受け取ってくれません。"何を考えているのか分からないやつ” ある
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス を読んで、「CSSだけである程度できそうだな」と思ったのでやってみた。 デモページ とりあえず完成品が見たい方は、ここ まず基本となるHTMLを用意する とりあえず、角丸四角形でボタンらしきものを作る。 <html> <head> <style type="text/css"> .buttonBase { position: relative; width: 300px; background-color: #3699D0; text-align: center; border-radius: 10px; cursor: pointer; } .caption { color: #02659C; font-family: impact; font-size: 40pt; font-weig
アイスタに入社して早9年目、望月と申します。 肩書きはADですが、 プランニングしたり、デザインしたり、コピー書いたり、 まぁWebなんてどんなものでも手を付けてナンボの世界なので、 色々な形で制作の現場に関わっています。 一発目の今回は、本業でのデザインテクニックをちら見せ出来ればと思います。 デザインで大切なテクニックの一つ「Grid System」 デザインの組み方には色々なやり方があると思いますが、 レイアウトを考える際に最も重要なテクニックの一つとして「Grid System」というものがあります。 Grid Systemを知らない人、知りたい人はこちら。 こちらは紙媒体が主流だった時代に考案され、 その後色々なデザイナーにより膨大な数の考察がされています。 ですが、Webデザインのようなマルチディスプレイの現場では 多種多様な解像度に対応しなければいけないため、
10. 画面最上部に戻りたい時は時計をタップこれはほぼ全てのアプリで共通です。画面トップに戻りたい時は時計の辺りをタップすると戻れます。 11. iPhoneの動作が重い時にすることiPhoneの動作が重くなってきたなーと思ったら、とりあえず試して欲しいのが「マルチタスク削除」「Safariのタブ削除」「再起動」ですね。ちなみに電源を切るにはスリープボタン長押しですよ。iPhone4を使っていればメモリ不足なんてことはあまりないかと思いますが。 12. iPhoneのスクリーンショットを撮る方法スリープボタンとホームボタンを同時に押すとスクリーンショットが撮れます。 13. iPhoneへの着信を留守番電話にまわす方法スリープボタン1回でミュート。2回で留守番電話に転送することができます。 14. メールやSafariから画像をカメラロールに保存する保存したい画像を長押しすると、メニューが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く