Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に（主に）縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>～</head>に下記を記述します。 <meta
Fireworks 「リンク」をユーザビリティ視点で考える。Fireworksでボタンを立体的に見せる方法いろいろ
Fireworks コレ、5分で作ります。その１ ※このエントリはFireworks CS4を元に書いています。 Fireworks の日本語チュートリアル少ないなーという話を先日Twitterでしていたので、なんか作ってみます。あまり超大作のチュートリアルは手順を書く気力が途中でなくなりそうだったので、今日は5分くらいでコレ作る方法を書きます。 今回の完成形 見出しの背景画像によくありそうなこういう画像をパパっと作ります。 今回は素材集等、Fireworks の機能以外のものは使いません。 土台を用意 まずは一番下の土台を作ります。よくあるアクア風のやつにしますね。矩形で適当なサイズで長方形作って、塗りを線形のグラデーションに。４色決めてスライダーを調節。外側には1pxの線も加えます。 ここでのサンプルのサイズはW 470 * H 40 としました。 こういう見出し用の背景画像でよく左側
Photoshop初心者でも簡単に作成できる、ウェブページの背景に利用する継ぎ目のないシームレスな画像を作成するチュートリアルをDesign Shackから紹介します。 Create Seamless Web Background Textures in Minutes 写真の「ぼけ」のようなエフェクトをオリジナルで描き、その画像を元に継ぎ目のないシームレスな画像にします。 下記は、各ポイントを意訳したものです。 Step 1: 新規作成 Photoshopを起動して[ファイル]-[新規]を選択し、ファイルを新規作成します。 設定は、幅：800px、高さ：800px、解像度：72pixel/inch、カラーモード：RGBカラーにします。 新規作成の設定画面 次に、カンバスを「#80ac4b」で塗ります。 [Ctrl]+[A]でカンバスのすべてを選択し、カラーピッカーに「#80ac4b」を指
ブラシで作るキラキラ光る星のような効果。作り方も簡単なのですぐに覚えられます。１）ブラシで直線を引く見やすいように背景を黒で作成します。新しいレイヤーを追加して基本ブラシで１ピクセルの（場合によっては２ピクセル）ぼかし無しのブラシを選択して直線を引きます。直線はSHIFTキーを押しながらドラッグすると簡単に引けます。２）ぼかし（移動）[フィルタ]→[ぼかし]→[ぼかし（移動）]でこの直線の左右を延ばしたような効果をつけます。プレビューを見ながら最適な長さになるよう調整しましょう。３）複製していくCTRL+J...
投稿日：2008年12月26日 レベル：初心者 ソフトウェア： このチュートリアルでは、Photoshopで1分以内に写真を絵画に変えてみたいと思います。 Step1 ： はじめに Step2 ： 写真の彩度を下げる Step3 ： レイヤーを複製し写真の階調を反転させる Step4 ： ブレンドモードを変えフィルタを使う Step5 ： 完成
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
