ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座フォトショップの基本 > Photoshopでレトロなベクターのスプラッシュ・ページを作成する方法

Photoshopでレトロなベクターのスプラッシュ・ページを作成する方法

投稿日:2012年3月16日   レベル:初心者    ソフトウェア:Photoshop

このチュートリアルではブラシ、テキスト効果、シンプルなスタイルを使って、ウェブサイトのメインページ用のレトロなスプラッシュ(起動画面)を作成する方法を紹介します。

Step1:はじめに

500×400pxのドキュメントを作成し、薄いブルー(#8FBCFF)で塗ってください。

新規ドキュメント



Step2:レトロブラシでページの背景を描く

下記からレトロブラシをダウンロードしてください。

DeviantArt - Eli Burford
http://www.deviantart.com/deviation/59553360/

このブラシでマスター直径を上げて描くと、次のとおりドキュメント全体に行きわたるはずです。

レトロブラシを使用後

次のようなレイヤースタイルをレトロブラシレイヤーに適用してください。

レイヤースタイルを設定





Step3:ウェブサイト名を入れる

ここで、ウェブサイト名の背景となる、半透明の白の長方形のボックスを作成します。
角丸長方形ツールを使って、ドキュメントの中央に180×54pxぐらいの大きさで長方形を描いてください。
不透明度を70〜85%程度にしてください。
このようになります。

ウェブサイト名の背景

ウェブサイト名を入力し、今作ったばかりの長方形の上部に配置してください。
次にフォントに次のようなテキストスタイルを適用します。

シャドウ(内側)

グラデーションオーバーレイ

境界線

このようになります。

適用後

次に、小さな文字を入力してください。
先ほど使ったのと同じフォントで「Beta」と入力し、「Retro」というウェブサイト名の右上に配置します。
下記の設定で境界線を適用してください。

境界線を設定

このようになります。

適用後

ここで、訪問者がクリックをしてそのウェブサイトへ飛べるようなオプションを加えます。
ここでは「Website」と「Forums」にしました。
入力が終わったら下記の効果を適用してください。

カラーオーバーレイ

境界線


Step4:完成

完成です。

完成

設定を変えて色々と試してみれば、もっとかっこいい結果が得られるかもしれません。

引用:Web Design Library 著者:Aviva Directory 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング