サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ブックレビュー
weblog.weska.jp
Photoshop(フォトショップ)で、レーダー探知機のアイコンを作るチュートリアル。 飛行機や潜水艦の操縦室にありそうなレーダーです。 主に「ベベル」&「覆い焼き」2種類の描画モードと、各ステップでのレイヤースタイルの設定で構成されています。 まずはPSDダウンロード(852KB) 【ステップ1】 編集>新規(幅800px:高さ800px、解像度:72px)で新規ファイル作成。 【ステップ2】 まず背景をグレー(色:#333333)で塗りつぶします。 その背景レイヤーの上に、新規レイヤー(レイヤー名:Background)を作り、「黒」で塗りつぶし、レイヤー>「塗り」を0%にします。 そして下図のようにレイヤースタイルを追加します。 パターンオーバーレイ 描画モード:ソフトライト パターン:今回は自作の「パンチングメタル」を使いました。ダウンロードはこちら 【ステップ3】 ツールパレット
この度の「東北地方太平洋沖地震」におきまして、被害にあわれた皆様に心よりお見舞い申し上げます。 現在も各地で計画停電が実施されていますが、停電中に明かりを灯すアイテムの一つに「ロウソク」があると思います。 そこで今回は、Photoshop(フォトショップ)で、淡い火が灯るリアルなロウソク(キャンドル)の作り方チュートリアルをご紹介します。 まずはPSDダウンロード(6.1MB) 【ステップ1】 編集>新規(幅600px:高さ800px、解像度:72px)で新規ファイル作成。 【ステップ2】 背景を黒(#000000)で塗りつぶします。 【ステップ3】 長方形ツールで、幅200px:高さ400pxの長方形を描きます。(レイヤー名:Candle) 【ステップ4】 レイヤーパレット>"Candle"レイヤーをダブルクリックして、下図のようにレイヤースタイルを追加します。 グラデーション(左から)
【簡単テキストエフェクトシリーズ vol.3】 Photoshop(フォトショップ)CS3で、光沢のあるガラス風の3Dテキストエフェクトを作るチュートリアル。 2010年流行の一つ「3D」と、昔から好まれてるグロス系「光沢感」「キラッと感」の合わせ技です。 文字にはあえて「3D押し出し」など使わず、簡単で汎用性が効くように「3D風」で表現します。 TIPSとしてすぐ使えるよう、作った後はスタイルパレットに登録を。 まずはPSDダウンロード(528KB) 【ステップ1】 編集>新規(幅600px:高さ400px、解像度:72px)で新規ファイル作成。 【ステップ2】 背景を#011923で塗りつぶしてから、ノイズを少々かけます。 フィルタ>ノイズ>ノイズを加える『量:2%、分布方法:均等に分布、グレースケールノイズ:ON』 【ステップ3】 新規レイヤー(Vignette)を作成します。 ツー
Photoshop(フォトショップ)CS3で、しわが寄って、今にもめくれそうなステッカーを作るチュートリアルです。 「覆い焼きツール」と「焼き込みツール」は、Photoshopで物を作るときに非常にパワフルなツールです。今回のチュートリアルでは、主にこの2つのツールを使い、しわが寄ったリアルなステッカーを作ってみたいと思います。 まずはPSDダウンロード(8MB) 【ステップ1】 編集>新規(幅600px:高さ400px、解像度:72px)で新規ファイル作成。 【ステップ2】 背景を#282828で塗りつぶします。そしてその上に、 新規レイヤー>石のテクスチャをスマートオブジェクトで配置>描画モードをオーバーレイ (レイヤー名:Stone) 今回使用する石のテクスチャは、Psdtuts+さんの "Stone Texture Pack" からstonetexture5.jpgを使わせて頂きま
Photoshop(フォトショップ)CS3で、劣化してさびた銅の質感のテキストエフェクトを作るチュートリアルです。 このチュートリアルでは『錆:さび』をデザインする為に、テキストにたくさんのレイヤースタイルをかけます。 一度作ってスタイルに登録しておけば、ダメージ&グランジ系デザインのアクセントとして使えると思います。
Photoshop(フォトショップ)CS3で、汚れて古くてボロボロになった感じのトランプを作るチュートリアルです。 このチュートリアルには『よごし』をデザインする時によく使われる『グランジ系ブラシ&空模様&焼き込みカラー』といった王道(多分)の手法が網羅されています。 古びた紙などを作る際に役立つかも。
前回の『Illustrator|きれいな3Dの円グラフの作り方チュートリアル』に続くグラフシリーズの第2弾です。 今回はIllustrator(イラストレーター)CS3で、きれいな3Dの棒グラフを作るチュートリアルです。 "棒グラフ"と"目盛" それぞれ別々に『3D・押し出しベベル』効果をかけて、3Dの棒グラフを作ってみました。
【簡単テキストエフェクトシリーズ vol.2】 Photoshop(フォトショップ)CS3で、ポップなプラスチック風のテキストエフェクトを作るチュートリアルです。 アメリカの映像制作会社『ピクサー』アニメのタイトルで使われそうな感じになりました。 TIPSとしてすぐ使えるよう、作った後はスタイルパレットに登録を。 まずはPSDダウンロード(336KB) 【ステップ1】 編集>新規(幅600px:高さ400px、解像度:72px)で新規ファイル作成。 ツールパレット>グラデーションツール『色:#485977→#181f29、円形グラデーション』 上から下に暗くなるようにグラデーションを引きます。 【ステップ2】 好きなテキストを入力します。 (今回の使用フォント"Gill Sans Ultra Bold"、レイヤー名:PLASTIC-Bottom) 入力したテキストレイヤーに下のようにレイヤ
Flash(フラッシュ)CS3+ActionScript 3.0で、ランダムな動きをする光のFLASHアニメーションを作るチュートリアルです。 まだまだAS3勉強中です。さらっと作れて尚かつリッチ!そのうえ使い回しが効く小ネタをアップして行く予定です。 【完成図】今回のお題はこんな感じです。 【ステップ1 - 概要】 今回、エフェクト全体を1箇所で操作できるクラスを作ります。 そのクラスをcallするだけで、光の数・色・透明度・サイズ・方向・スピード・ぼかしの質感の全てをお好みに変える事ができます。 なので、色々な光のバリエーションでFLASHアニメーションを簡単に作ることが可能です。 【ステップ2 - FLASHドキュメント作成】 ファイル>新規>『Flashファイル(AS3.0)』を選択。 お好みのステージサイズ・フレームレートを設定します。 (*今回は、サイズ:600×300px、フ
【簡単テキストエフェクトシリーズ vol.3】 Photoshop(フォトショップ)CS3で、ネオンサインのテキストエフェクトを作るチュートリアルです。 BARの看板にありそうな、味のある質感のネオンサインです。 TIPSとしてすぐ使えるよう、作った後はスタイルパレットに登録を。 まずはPSDダウンロード(3.3MB) 【ステップ1】 編集>新規(幅800px:高さ600px、解像度:72px)で新規ファイル作成。 【ステップ2】 キャンバスのどこにテキストを配置するかイメージしておいた上で、フリー素材からレンガを選び、キャンバスにスマートオブジェクトで配置します。(レイヤー名:Brick) (※今回は『フリーフォト素材|写真素材 足成』あけぼのさんの写真を使用しました。) "Brick"レイヤーの上に 新規調整レイヤー>色相・彩度『色相:0、彩度:-21、明度:-85』 【ステップ3】
Photoshop(フォトショップ)CS3で、写真をレトロでポップなアメコミ風にする方法を解説するチュートリアルです。 このチュートリアルを参考に、自分のお気に入りの写真を加工すれば、よりいっそう楽しめると思います。 まずはPSDダウンロード(2.9MB) 1.古い印刷のようなエフェクト 編集>新規(幅800px:高さ600px、解像度:72px)で新規ファイル作成。 加工したい写真をフォトショップで開きます。 (今回は、shutterstock.comの"Five Happy Kids"を使用。*有償)(レイヤー名:"kids")
【簡単テキストエフェクトシリーズ vol.1】 Photoshop(フォトショップ)CS3で、上品なゴールド(金色)のテキストエフェクトを作るチュートリアルです。 ゴールドのテキストエフェクトは沢山でていますが、その中でも使いやすいものをご紹介。 TIPSとしてすぐ使えるよう、作った後はスタイルパレットに登録を。
Illustrator(イラストレーター)CS3でSafariブラウザアイコンである『コンパス』の作り方チュートリアルです。 Web2.0(もはや死語?)が流行っていた少し前に、Aquaアイコン系の海外チュートリアルで頻繁に取り上げられていました。 今更ですが、イラレの基礎『パス&マスク&グラデーション』でほぼ出来ているので比較的簡単に作れると思います。
前回の『Illustrator|きれいな3Dの円グラフの作り方チュートリアル』に続くグラフシリーズの第2弾です。 今回はIllustrator(イラストレーター)CS3で、きれいな3Dの棒グラフを作るチュートリアルです。 "棒グラフ"と"目盛" それぞれ別々に『3D・押し出しベベル』効果をかけて、3Dの棒グラフを作ってみました。 まずはAIダウンロード(344KB) 【ステップ1】棒グラフを作る 新規ドキュメント作成『基本RGB、サイズ:800px × 600px、方向:横組』 ツールパレット>グラフツール>棒グラフツール(J)を選択。 キャンバスをクリック>グラフ『幅:400px、高さ:300px』を選択。 グラフの数値を入力する欄が出ます。 左上から適当な数値を入力し、下の画像のように右上の完了ボタンをクリックします。 【今回の入力数値】28、92、148、50 初期設定は、モノクロの
デザインのネタ探しに海外チュートリアルを見ていると、避けて通れないのが英語表記。 良いネタを見つけて、真似して作ってみようとするけど英語が読めずに、ただ眺めているだけなんて悲しすぎる! という訳で第1回目は、Photoshop(フォトショップ)CS3の日本語レイヤーパレットメニュー『レイヤーの描画モード設定:Layer Mode』を英訳してみました。
Illustrator CS3で、カラフルで波打つようなストライプリボンの作り方のチュートリアルです。 身近にあるストライプ(ネクタイ、ベルト?とか)をヒントに作っても面白いかも。
【Photoshopメニュー|和訳・英訳シリーズ】 第2回目は、Photoshop(フォトショップ)CS3のフィルタメニューの一覧を和訳⇔英訳してみました。 各カテゴリメニューの詳細はまた後日掲載します。
Photoshop(フォトショップ)で、レーダー探知機のアイコンを作るチュートリアル。 飛行機や潜水艦の操縦室にありそうなレーダーです。 主に「ベベル」&「覆い焼き」2種類の描画モードと、各ステップでのレイヤースタイルの設定で構成されています。
【Photoshopメニュー|和訳・英訳シリーズ】 今回は、Photoshop(フォトショップ)CS3のツールパレットを和訳⇔英訳しました。 Photoshopを使ってデザインする時に一番使う重要な部分なので、海外デザインチュートリアルを見る際に頻繁に出てきます。 詳細ページに、ツールパレットチャート表(ちょっと画像が大きくなりましたが)も作ったので見てください。
今回は、moo.fx [JavaScript] を使って、タブメニューでアコーディオン表示を切り替えるサンプルを作ってみました。 チュートリアルの内容的には新しい物ではありませんが、主要ブラウザ(Safari3・Firefox2&3・IE6・IE7)にも対応していて、カスタマイズしやすく、軽い! デザインのネタに是非どうぞ。 まずは、デモサイトを見てください。 1.海外本家サイトからデータをダウンロード NYOKIGLITTER - Tab Styled Accordion サイトの文中、『download: tabAccordion.zip (includes images and scripts)』をクリック。 ダウンロードしたzipデータを解凍します。("tabAccordion"フォルダ) 2.JavaScriptの読み込み ダウンロードしたフォルダの"scripts"フォルダから
【Photoshopメニュー|和訳・英訳シリーズ】 前回、Photoshop(フォトショップ)CS3のフィルタメニューの一覧を和訳⇔英訳したつづきです。 今回は、各フィルタメニュー詳細の和訳⇔英訳を解説します。
Illustrator(イラストレーター)CS3で、きれいな3Dの円グラフを作るチュートリアルです。 Webデザインだけでなく、DTP&グラフィックデザインにおいてもグラフ作成は必要不可欠なファクターです。 今回は平面の円グラフにひと手間かけて、3Dの円グラフを作ってみました。
Photoshop(フォトショップ)CS3で、光とぼかしを使ったクールなエフェクト画像の作り方のチュートリアルです。 このチュートリアルは、比較的簡単な手法で作れるので、バリエーション次第でいろいろ使えそう。 まずはPSDダウンロード(980KB) 1. 編集>新規(幅800px:高さ600px、解像度:72px)で新規ファイル作成。 背景を黒に近いグレー(*例:#262626)で塗りつぶします。 注)完全に黒にすると、エフェクトの効果が得られません。
このページを最初にブックマークしてみませんか?
『https://weska.jp/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く