魔法!Webレイアウトを数回のクリックで『Velositey』#Photoshop

2015年1月7日
カテゴリー ツール

画面から飛び出るWebレイアウト

さっさと仕事を終えて帰宅に向かいたいWebデザイナーさんへ朗報ですよ!

Photoshopと合わせて使える便利機能を見つけたので紹介します。

Velositeyは、Webレイアウトを数回のクリックで完成できるPhotoshop用のプラグインです。例えば、以下のようなレイアウト。Photoshopを起動してから、わずか4回のクリックで完成です。

4クリックで完成のWebレイアウト

ワイヤーフレームにも使えますし、ここからさらに作り込んでWebデザインとして完成させることも可能ですね。

それでは実際に上のレイアウト作成にかかった『4クリック』を振り返ってみます。

まずはPhotoshopを起動します。

新規にカンバスを開いたところ。

新規のカンバス

1. ガイド

グリッドごとにガイドを引きます

プラグインをインストールすると新たなツールパレットが加わります。その中の「Layout」タブから、まずガイドを引くためのボタン(黄枠内)をクリックします。すると編集中のカンバス上にグリッドガイドが現れます。この時点ですでに便利さを実感!

2. アイキャッチ

スライダー

写真のスライドショーや、キャッチコピーを載せたアイキャッチ画像を配置することが多い部分です。ここではこれを選択しました。すぐにドキュメント上に反映されます。

3. コンテンツ

コンテンツ

コンテンツではボックスが横並びに四つ揃うレイアウトを選択しました。

4. フッター

フッター

フッターにはこれを選びました。ロゴを配置する場所、地図へのリンクや連絡先を記載する場所をあらかじめ用意してくれています。

完成!

本当にわずか4回のクリックだけで、こんなにクオリティの高いレイアウトを実現できました。

Webレイアウト完成

レイアウトさえ決まれば、あとは写真をはめ込んだりテキストを差し替えたりしながら作り込んでいけます。簡単&便利すぎる!!

こんなふうに使い方は簡単ですが、初めてプラグインを利用する人にとってはインストールする方法がわかりにくいかもしれません。なので、Velociteyをダウンロードするところからインストールまでの手順も記しておきます。

1. まずはVelociteyのサイトへ行きます。

velositeyのサイト

2. ダウンロードボタンをクリックします。

ダウンロード

ダウンロードするにはfacebookでシェア、もしくは、twitterでツイートが必要です。サイト上のダウンロードボタンをクリック後、画面の指示に従いどちらかを済ませるとダウンロードできます。

3. Velositeyフォルダを「Plug-ins>Panels」の中へ移動します。

フォルダを移動

ダウンロードしたVelositeyのzipファイルを解凍すると中に「Velositey」フォルダがあります。それをPhotoshopのフォルダの中にある「Plug-ins>Panels」の中に移動します。

4. Photoshopを起動します。

Photoshopを起動します。

「ウィンドウ>エクステンション>Velositey」へ進めばOK! 思う存分に試してみてください。今回紹介した以上にたくさんのレイアウトやパーツが用意されてます。

以上!

とにかくあっというまにWebレイアウトを完成できます。特に大量の案件に追われがちなWebデザイナーさんはぜひお試しを! 制作スピードがグンと速まること間違いなしです。

では、ごゆるりと〜

こちらもcheck!ついに再開!ウェブさえのHP作成サービスはこちら

シェアしてくれると嬉しいです!(コメントも喜ぶよ

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
  • google

コメントも大歓迎!

Top