Webデザイナー、(X)HTML/CSSコーダー、マークアップエンジニアが扱いやすいJavaScriptライブラリー「jQuery」を基礎から解説。プログラムの基本的な書き方から、実務で使えるサンプルまで。jQueryをマスターして仕事の幅をぐっと広げよう。<cj:inc template="792" element_id="499288" />
![ASCII.jp:Web制作の現場で使えるjQuery UIデザイン入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c5cc038747f851a6643024dc05c0165ccaeecdd/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2009%2F07%2F22%2F240489%2Fl%2F947ffd95838c8645.jpg)
レトロな紙やハガキをリアルに見せるには、角の折れやめくれは重要です。 前回は「めくれた紙のPhotoshopチュートリアル」をしましたので、今回は「角の折れ」を作成します。 新規レイヤー作成 まず最初はハガキサイズの新規レイヤーを作成します。 ハガキの厚みを出す レイヤースタイル[ベベルとエンボス]に[スタイル:エンボス][深さ:100%][サイズ:3px]にします。陰影の設定は任意です。厚みを表現するだけなので、あまりボッコリさせないほうがいいです。 カラー設定もレトロな雰囲気が出る色であればOKです。紙の質感を出すのは後で説明します。 角の作成 ここから角の作成していきます。 まず角を「多角形選択ツール」もしくは「ペンツール」で三角形に描き選択範囲を出します。このとき均等な三角形よりも歪なほうが良いです。 選択範囲の複製とレイヤーマスク 選択範囲を出して[ctrl+J]を押すと選択範囲
紙を使用したサイトデザインをする際に気を付けたいのは安っぽくならないことです。 ワンポイント表現として、紙をめくれあがった感じにすると雰囲気が出ます。 紙の質感をだす まず初めに四角の新規レイヤーを作成します。 レイヤースタイル[光彩(外側)]に[描画モード:通常][不透明度:20%][色:#000000]を指定し、エレメントは[サイズ:5%]にします。 次にグラデーションを上の方だけにグレーを敷き、質感を表現します。 こんな感じになります。 めくれた感じを表現 出来上がったレイヤーの端を三角形にカットし、新規レイヤーにコピーします。 このレイヤーがめくれた部分になります。 三角形を自由変形で反転させ、紙レイヤーの内側に配置します。 このままだと直線すぎるので、左端を楕円形に削除します。 ペンツールを使用すれば微妙なラインを描けます。 レイヤースタイル[光彩(外側)]に
Product Plannerは、YouTubeやTwitterなどで使用されているサインアップや招待・登録などユーザーフローが多数登録されているギャラリーです。 Product Planner Product Plannerはギャラリーを閲覧するだけでなく、新しくユーザーフローを作成・登録することもできます。 ギャラリーは、ユーザーフローのタイプ別にカテゴライズされています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く