アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

【jQuery Tips】スクロールで画像がめくれる動きを表現する

こんにちは、生形です。
最近、嬉しいことにアシアルの書籍の売れ行きが軒並み好調です。

6月に入り、弊社岡本が執筆した「イラストでよくわかるPHP」が、Kindleの月替わりセール対象商品になりました。
なんと699円(紙の本の価格の64%OFF!)で購入いただけます。
現在、アマゾンWebプログラミングカテゴリの売れ筋ランキング1位です!
セールは今月いっぱいですので、ぜひこの機会に。




つづいて、私の執筆した「スラスラわかるJavaScript」に増刷がかかりまして、
個人的な目標の1万部まであと少しというところまで来ました!
セミナー等でお会いした方には本を買いましたよと声をかけて頂くこともあり、大変ありがたく思っております。
購入者特典としてjQueryのTips集を翔泳社スラスラわかるシリーズ公式サイトで配布していますので、
ご存じなかった方はぜひダウンロードしてみて下さい!



さて、今日はこのTips集から、「スクロールで画像がめくれる動きを表現する」を紹介します。
完成イメージは、こちらのページを見て下さい。
画像が2枚重ねて配置されていて、ページをスクロールすると前面の画像がめくれて背面の画像が見えるようになります。



コードの量はほんの少しだけで、とても簡単です。
それでは見てみましょう。

スクロールで画像がめくれる動きを表現する



index.html




<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>JavaScriptの練習</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <div id="over"><a href="https://www.asial.co.jpimages/flower1.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpimages/flower1.jpg"></a></div>
  <div id="under"><a href="https://www.asial.co.jpimages/flower2.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpimages/flower2.jpg"></a></div>
 </body>
</html>


style.css




body {
    /* スクロールバーを表示するために、高さを多く取っておく */
    height: 5000px;
}
/* 画像の親要素 */
div {
    /* スクロールしても画像をウィンドウ左上に固定表示する設定 */
    position: fixed;
    left: 0px;
    top: 0px;
    height: 600px;     /* 画像と同じ高さを設定 */
}
div img{
    height: 600px;
}
/* 背面の要素を囲むdiv要素 */
#under {
    z-index: 1;        /* 背面に表示 */
}
/* 前面の要素を囲むdiv要素 */
#over {
    z-index: 2;        /* 前面に表示 */
    overflow: hidden;  /* 要素からはみだした部分は非表示 */	
}


main.js




$(function(){
    $(window).on("scroll", function() {
        // スクロール量を取得
        var scroll = $(window).scrollTop();
        // 画像の高さを取得
        var height = $("#over img").height();
        // 前面のdiv要素の高さを削る
        $("#over").css("height", height-scroll);
    });
});


index.htmlには、画像を囲む<div>要素が2つあります。
これがそれぞれ、前面と背面に表示している画像です。
初期状態では、<div>要素と画像の高さはどちらも600pxに指定しています。
ページをスクロールすると、スクロールした分だけ前面の<div>要素の高さを低くしています。
仮に200px分スクロールした場合は、<div>要素の高さは400pxになります。
このように、スクロールと連動して上に重なっている要素の高さを変化させることで、あたかも画像が捲れ上がっていくように見せることができます。



これを少し改良すれば、画像を何枚も用意しておいて、
日めくりカレンダーのように次から次へと画像がめくれていくようにしたりと、色々な表現が楽しめると思います。
ポートフォリオやプロモーションサイト等で使ってみてください!

社内勉強会での「チームで作る!イケてるデザイン」の資料を公開しました



アシアルの社内勉強会で発表した資料を公開します。今回の社内勉強会では、「イケてるデザイン」をテーマに勉強会を開催しました。自分はその中でも「どうやってチームでイケてるデザインを作るのだろうか?」ということをテーマにして話をしました。

IllustratorでSVGファイルを保存してみました

はじめまして、高橋まです。

以前は紙のデザインの仕事をしていましたが、
アシアルの一員となり日々webの勉強をしています。
このブログでは、web初心者の私が感動したものを
紹介していけたらいいなと思っています。

さて、今回はSVGファイルについて書きたいと思います。
今までは、webの画像といえばpng!と思っていたのですが、
ベクター形式を残したまま、ファイルの軽いフォーマットがあるよ!と
同じチームのエンジニアさんがアドバイスをくれました。
以前、アシアルデザイナー和田さんも紹介していた「SVG」です。
和田さんの記事と合わせて、読んでもらえたら嬉しいです。



SVGとはなんぞや



SVG(Scalable Vector Graphics)とは、W3CWorld Wide Web Consortium)によって
開発、メンテナンスされているフォーマット。
表示する都度、計算を行って画像を再現するベクター形式の為
拡大縮小しても画質が劣化しません。
もちろん、高解像度ディスプレイにも対応します。
そして、なんとpngファイルよりも軽量になります。




2001年9月より勧告された技術ですが、サポートしているアプリケーションが少なく
あまり知名度もなかったようです。
最近はHTML5やCSS3の普及により、モダンブラウザでは問題なく対応されているようです。
そして、アニメーションとも好相性!
最近良く見かけるアイコンが動くCSS3アニメーションもSVGの技術だったのですね。
Animated SVG Icons with Snap.svg





Illustratorからの保存方法



まずは、Illustratorsvgに保存したいオブジェクトを作ります。




別名保存からSVG(svg)を選択し、保存をクリックします。




オプションは初期設定のまま、OKをクリック。




SVGファイル保存出来ました!!





保存したSVGファイルをIllustratorで開いてみました。





パスはもちろん、
線の太さやレイヤー情報も残っていて、編集可能です。
これは、便利ですね!!


SVGファイルの使いどころ



ベクター形式は、図形の座標情報を元に描画するので、
複雑なオブジェクトや写真などの色が多いものは、容量も大きくなり使いづらいようです。
SVGファイルを最大限活用するならば、
以下のような、単純な構成で色数の少ないものがチャンスです。

・アイコン
・ロゴ
・オリジナルフォント


SVGのことを調べていると、本当に色々な可能性を感じました。
SVGを使ったアニメーションには、インタラクティブな感動があるので
今度、挑戦していきたいなと思います。

CSSだけで作るアイコン付きボタンの作り方

こんにちは、鴨田です。

近頃はボタンのデザインに限らず、CSSで実現できるものは、
グラフィックにせず、CSSだけで書いています。

ボタンデザインに限らず、HTML/CSSで書いた方が効率的なこもあって、
最近はあまりPhotoshopを開くこともなくなってきています。

ということで、本日はCSSだけで作るアイコン付きボタンの作り方です。
アイコン付きというのがポイントです。



● アイコンなしボタン


とりあえず、アイコンなしで作りましょう。

HTML


<body>
  <a href="#" class="button normal">ボタン</a>
</body>

CSS


body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  margin: 0;
  padding: 0;
}

a {  
  /* サイズ指定 */
  width: 200px;
  height: 50px;
  display: block;
  box-sizing: border-box;
  margin: 20px;
  
  /* 縦横中央揃え */
  text-align: center;
  line-height: 50px;
  
  /* 色指定 */
  background-image: -webkit-linear-gradient(top, #FC0, #F60);
  border: 2px solid #F33;
  color: #FFF;
  
  /* 角丸 */
  border-radius: 25px;
  
  /* シャドウ / ベベル */
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(255, 255, 255, 0.9) inset, 0 -1px 3px rgba(0, 0, 0, 0.1) inset;
  
  /* その他 */
  text-decoration: none;
  font-size: 24px;
  
}

a:hover {
  /* 反転 */
  background-image: -webkit-linear-gradient(top, #F60, #FC0);
}



デモページ

こんな感じでしょうかね。
ボタンとしては十分に機能していると思います。



● アイコン付きボタン その1


単純に文字の横に、アイコンを置きたい場合はimgタグで表現したり、
spanタグを使ってもいいと思います。



<body>
  <a href="#" class="button normal"><a href="https://www.asial.co.jparrow.png &mode=1" class="popupimg"><img src="https://www.asial.co.jparrow.png"></a>IMGタグ</a>
  <a href="#" class="button normal"><span class="arrow">></span>SPANタグ</a>
</body>

CSS


a img.arrow {
  width: 24px;
  height: 24px;
  display: inline-block;

  /* 位置合わせ用 */
  vertical-align: middle;
  margin: 0 10px 5px 0;
}

a span.arrow {
  width: 24px;
  height: 24px;
  background-image: url(arrow.png);
  background-size: 24px 24px;
  display: inline-block;
  text-indent: -9999px;

  /* 位置合わせ用 */
  vertical-align: middle;
  margin: 0 10px 5px 0;
}



デモページ

imgとかspanで入れた際に、微妙にずれるので、ちょっと位置合わせする必要があります。

また、この方法で作った場合の問題点として、
アイコン+文字でのセンター揃えなので、アイコンの位置が変わってしまい、
ボタンを縦に並べる様なデザインだと、統一感がなくなるということがあり得ます。

なので、次はアイコンの位置を固定したい場合を考えてみます。



● アイコン付きボタン その2


アイコンを左位置に固定したいと思います。



<body>
  <a href="#" class="button i-left1">ボタン</a>
  <a href="#" class="button i-left2">ボタン</a>
</body>

CSS


a.button.i-left1 {
  background-image: url(arrow.png), -webkit-linear-gradient(top, #FC0, #F60);
  background-repeat: no-repeat, no-repeat;
  background-position: left 10px center, 0 0;
  background-size: 24px 24px, contain;
}

a.button.i-left1:hover {
  background-image: url(arrow.png), -webkit-linear-gradient(top, #F60, #FC0);
}

a.button.i-left2 {
  position: relative;
}

a.button.i-left2:before {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  top: 50%;
  left: 10px;
  margin: -12px 0 0 0;
  background-image: url(arrow.png);
  background-repeat: no-repeat;
  background-size: 24px 24px;
}



デモページ

前者(a.button.i-left1)は背景画像の一部として、アイコンを表現しています。
この場合、一点、難があります。
PCブラウザでは、特に問題なく見られると思いますが、
スマートフォンの一部ブラウザで見ると、表示が崩れます。
原因は下記CSS部分です。
CSS3で拡張されたbackground-positionが解釈されないようです。
(横方向は左端から10px、縦方向は中央揃え)



background-position: left 10px center;


なので、もし前者の方を採用する場合は、
画像にあらかじめマージンまで含める必要があります。

それが面倒な場合などは、後者(a.button.i-left2)の実装をおすすめします。
こちらであれば、モバイルブラウザでも崩れることはありません。

また、アイコン自体を背景画像として表現するのではなく、
ウェブフォントにしてしまうということも出来ます。

もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法
昔の自分の記事ですが、参考までに。

:beforeや:after議事要素を応用すると、いろいろな表現が可能です。
例として、当ブログから以下の記事をご紹介します。
CSSだけで簡単に吹き出しを作成する方法4つ!



以上です。

これから、フラットデザインが流行ってくると、
ボタンの質感よりも、ボタンのアイコンに重点が置かれるようになると思いますので、
そのようなときに役立てばいいかなと思います。

例えばこんな。


デモページ

Webデザイン 配色をイメージで学ぶ【基本11色】

こんにちは、高橋です。

近頃、ユーザが製品を経験してどれだけ満足を得れるのかといった仕組みが注目を浴びています。UXですね。配色もUXの範疇とすれば、理解を深めておいて損はないと思います。今回は基本的は色と使われるWebサイトのタイプも併せてザックリと紹介していきます。


・色紹介




◯赤(Red)



情熱や活気といった気持ちを高ぶらせる色です。
インパクトを与えたいイベント・キャンペーンサイトで使われています。またサイトカラーだけでなく、強調したいコンテンツ・危険を促す削除ボタン等にも使えます。艶のある赤は上品さを感じさせますが、使い過ぎると落ち着きのない雰囲気になってしまいまいます。反対に暗い赤は気持ちを落ち着かせる効果があります。


◯緑(Green)



健康や自然といった癒しを連想させる気持ちを落ち着かせる色です。
自然やエコをモチーフとしたサイトで使われています。また安心のカラーとも呼ばれ、保険に関するサイトでも使われています。また2009年の話ですが、緑のボタンはコンバーション率が高いなんて統計(http://blog.mozilla.org/metrics/2009/06/19/firefox-is-green/)もあるようです。


◯青(Blue)



信頼や知性といった誠実な印象を与える色です。
信用のカラーとして多くの法人サイトでよく使用されており、コンセプトカラーとしては最も使用されている有彩色だと思います。ITとも相性が良いですね。ただ寒色は食欲を抑えますので、料理系のサイトとは相性が良くないです。ということは逆にダイエット系には向いているかもしれません。


◯黃(Yellow)



希望や快活といったとても元気なカラーです。
黄色は有彩色の中で最も明るく子供向けコンテンツに向いています!少し彩度を落とした黄色なら黒との相性が良く冒険や刺激といった雰囲気を連想させます。しかし、お金を扱うコンテンツではそういうつもりがなくても怪しい雰囲気になるかもしれませんので気をつけましょう。それから黄金色はビールを象徴する色であることは忘れてはいけないでしょう。


◯橙(Orange)



陽気や好奇心といった活発にさせる印象を与える色です。
最もバランス良く購買欲を高める色です。スーパーのチラシでは赤と黃の組み合わせが多いですが、これでは激安という印象が先行してチープな印象を与えてしまいます。その両方をうまい具合に表現してくれるオレンジはショッピングサイトでよく使われています。また明るい青とは南国をイメージさせるため夏のイベントサイトなど抜群の相性でしょう。


◯ピンク(Pink)



可愛らしさや幸せといった甘いイメージを与えるカラーです。
ふんわりとした明るいピンクは女性向けのサイトでよく使われてます。ただ、ピンクは開放感のある色ですので真面目なコンテンツでバシッとキメるのは難しかったりします。色からそれますが、その際は角のあるレイアウトで緊張感を出すと良いかもしれません。


◯茶(Brown)



木や土といったズッシリとしながらもぬくもりを感じさせるカラーです。
木の素材感を出したいサイトでよく使われています。また自然を連想させる緑との相性が良く、生命を表現しやすいと思います。また伝統的といった渋いイメージに最適です。


◯紫(Purple)



神秘や魅力といったムードを感じさせるカラーです。
Webデザインではあまり使う機会がないかもしれません。これはよく言われることですが、青と赤の二面性を持つカラーなので印象がその時の気持ちで変わったりして不安定です。それが逆に不思議と感じられるのが紫の魅力だと思います。占い系のコンテンツでは定番のように使用されます。また渋めの紫は和のイメージを持つため例えば京都に関連するコンテンツには使えると思います。


◯白(White)



純粋や平和といった神聖なイメージさせる色です。
潔癖なイメージから病院や医療機関を思い浮かべる人は多いと思います。また白は膨張色でありベースにするとそこに広い空間があるようにも感じられます。不動産関連のサイトもそうですが、間取り図が白塗りなのはそのためのように感じられます。


◯黒(Black)



恐怖や絶望といった不安をイメージさせる色です。
謎やホラーを題材としたコンテンツで使われます。ネガティブな印象の反面、デザインでは有彩色とのバランスを保つとても重要な色となります。また黒という性質上どんな色とも相性が良いです。ですが、カラーバランスが自然でもメインカラーが黒に近づいた時の雰囲気は思い描いているイメージと離れているかもしれません。黒をたくさん使うと途端に難しくなります。


◯灰(Gray)



無機質や調和といった控えめな印象の色です。
バランスが良くシンプルなサイトに仕上げたい時に便利で、多くのサイトで使用されています。また質感を硬くして艶を出せば途端に高級感が出ます。さらにWebサイトの『一工夫欲しいな』という場面にサッと馴染みます。表の偶数行のみ薄いグレーにする。無効なボタンなら濃いグレーにする。といった感じです。


・配色について



配色の選定は、例えばメインカラーを1つ選び類似色3つにアクセントカラー1つを探すといったルールはどうでしょうか。中々バランスのよい配色に仕上がると思います。



まずメインカラーを1つ選び(上品な赤)、それから類似色3つ(渋い赤、くすんだ赤、暗いオレンジ)にアクセントカラー1つ(深く暗い緑)を探す。


Web上に便利なジェネレータや参考になる配色が公開されているので積極的に活用しましょう。

◯ウェブ配色ツール Ver2.0


リアルタイムでプレビューが確認できていい感じ

http://www.color-fortuna.com/color_scheme_genelator2/


◯kuler


レートで並べたりするとイケてる配色がチェックできていい感じ

https://kuler.adobe.com/

・まとめ



とりあえず11色紹介してみましたが、どうでしょうか?面白かったなら良かったです。

色の性格をある程度把握していれば「ここのヘッダは青ベースだな〜」とか「ここの背景は#fdfcfcにノイズつけたぐらいが自然かなぁ」というのがパッと思い浮かびます。組み合わせによっては全く新しい印象を与えることもあるので色は奥が深いし面白いですね。

デザイナーの視点から見たオシャレ&面白いバナーを30個集めてみました。

こんにちは。花崎です。


アシアルでは、積極的にセミナー開催やイベントごとに出展をしています。

その際にバナー広告を作成するのですが、どのようにあの狭いスペースに載せたい情報を盛り込みクリックしたくなるようなデザインにするのかいつも頭を悩ませます。

一番訴求したい情報に目をひかせるか腕の見せ所でもあります。

そこで今回は、

デザイナーの視点から見たオシャレ&面白いバナーを30個集めてみました。




1. 芸人さんにかかっているモザイクと、このキャッチでついついリンクを押してしまいそうなデザインです。リンク先への誘導がうまいなと感じます。



2. 色使いと伝えたい内容がわかりやすくまとまっていて目を引きます。
黄色×赤は目立ちますね。



3. 前回書かせて頂いたブログでもあった、グレー×カラフルな色の組合せですね。
オシャレにまとまっています。



4. すっきりまとまっていて商品の味のイメージとマッチしています。
「参加する!」という文字がクリックしやすいですね。



5. キャッチの内容と絵がマッチしていてパッとみてすぐ理解しやすいデザインになっています。



6. 手書き風のデザインがかわいいですね。
右下にあるボタン風のデザインが、クリックしやすくて良いですね。



7. この数字が非常にわかりやすく他のバナーが並んでいても非常に目立ちます。
他の文字との強弱をつけ、さらに際立たせています。



8. 個人的にこのグランドマザーカレーが好きだったのもあるのですが、文字の部分の配置や強弱の付け方が非常に躍動感があってお店へ急ぎたくなるデザインです。
色もカレーにあっているので本体のカレーの画像が文字で隠れてしまっていてもあまり気になりません。



9. 雪を数字に見立てて、かわいくてポップなデザインです。



10. キャッチなどが抑え気味でデザイン重視ですが、自分のサイトのイメージを崩したくないときなどこのようなバナーはオシャレなアクセントの一つになりますね。



11. 色使いがきれいですね。
この水色とビールの小金色上品にマッチしています。
デザインでつい押したくなりそうなバナーです。



12. 多くの色を使っていないのに目をひくつくりになっています。
あまり多くの主張をしていないのに、オシャレな商品がありそうなデザインで覗いてみたくなります。



13. シンプルなのに目を引きます。色使いが良いですね。



14. キャッチの文字に動きがあってそのワケを聞きたくなるような作りですね。



15. このオブジェクトの赤は目立ちますし、次への情報がわかりやすくて見やすいです。



16. かわいらしいデザインですが、中央にあるキャッチの文字の大小に変化をつけることにより動きもありそこに目が行くようになっています。



17. 内容が読みやすく、黄色の部分がクリックしやすいようになっています。



18. すっきりしたデザインで高そうなイメージが出ています。



19. 放射線のデザインが目立たせたい部分に集まっていて、自然と目が行くようになっています。




ここからは海外のサイトで見つけたバナーデザインを紹介します。



今回見つけてきたものはデザイン性を重視したものが多いと感じました。

20. 緑のグラデーションできれいにまとまっています。



21. 文字に質感もあり、デザイン性が高くてサイトに貼ったらアクセントになりそうなバナーです。



22. 色の組合せが目を引きますし、立体感があり質感があってクリックしたくなります。



23. オシャレな背景ですし、何の情報なのかわかりやすい作りです。
ふちで使用している赤色がアクセントになっています。



24. 角丸でフォントの角も丸いので柔らかい雰囲気があって全体的にまとまっていますね。



25. 余白があることにより、文字に目が行きやすいです。
鳥のデザインが目を引きます。



26. 質感のある背景により触ってみたくなるデザインですね。



27. 円のバナーというのが珍しいので目立ちますね。
素直にクリックしたくなります。



28. 青の色つがいと、縁のデザインがなかなか見ない感じですね。



29. アイコンを買いたくなりますね。ダウンロードのマークもわかりやすくてアクセントになっています。



30. 黒板に書いたようなデザインが素敵ですね。




バナーをじっくり観察することが少なかったのですがいかにリンク先にとばせるか、誘導できるかが考えられているものばかりでした。

この小さい空間で無駄なものをそぎ落とし、且つオシャレなバナー作りが出来たらいいですね。

ウェブ制作に重要なワイヤフレームを書けるツール&ウェブサービス6選


wireframe-zoning.jpg by luc legay, on Flickr

こんにちは、久保田です。

ウェブサイトのデザインやコーディングを始める前にワイヤフレームは作っていますか?ワイヤフレームは、以下の様な内容を設計するのに利用されます。

・ページ間の遷移
・ページの内容
・ページの大まかなレイアウト

これらの項目についてチームやクライアントと予め合意しておくと、後に続くビジュアルデザインやコーディング時の前提を共有でき、作業をスムーズに進めることが出来ます。これからどのようなウェブサイトを作るのか?ということをきちんと共有することでデザイナーやコーダーや関係者と意思統一することができるわけです。

この記事では、このワイヤフレームを書けるツールやウェブサイトを紹介します。

OmniGraffle







古くからある使いやすいMacOSX用のアプリケーションです。ワイヤフレームだけではなく様々な図を書けます。Standard版が$99ドル、Professional版が$199ドルしますが、筆者はワイヤフレーム作りにはこれを使っています。

Cacoo





こちらもワイヤフレームだけではなく図全般を書けるウェブサービスです。こちらはフリーで利用できます。

Balsamiq





ウェブからもローカルからも利用できるワイヤフレーム作成用のツールです。インストール版は$79ドルします。myBalsamiqを利用することで、ブラウザ上でチームでワイヤフレームを作れて便利です。

wireframe.cc





ウェブサイトにアクセスするだけですぐに使える手軽なサービスです。ウェブサイトやツールの雰囲気がポップで魅力的です。フリーで利用できます。

Google Drawing





Google Docsから利用できる図の描画ツールです。こちらもフリーでかつGoogle Docsと同様にチームで共有しながら作業できます。

HotGloo





ワイヤフレーム作成に特化したウェブサービスです。ワイヤフレーム作成だけに特化しているだけあって、チーム作業はもちろんのこと、ワイヤフレームに様々な状態を定義したりインタラクションを付け足したり刷ることが出来ます。SMALLプランだと月$14ドルで利用できます。

終わりに



ワイヤフレームを予め作っておくと後の作業を助けてくれます。チームでも個人でも使いやすいツールを使いたいですね。以上ワイヤフレームを作成できるツールやサービスを紹介しました。

Slicyで面倒なPSDのスライス作業を効率化 !



こんにちは、最近コード書く時間がなくなってPhotoshopいじっている時間の方が主になってきました、久保田です。

Photoshopを使った画像書出しの時には、面倒なスライス作業をやらなければいけません。この記事では、Photoshopで面倒なスライス作業を劇的に効率化してくれるSlicyというアプリの紹介をします。

スライス作業をやっているうちに日が暮れる



Photoshopで作成した画像を書き出す場合には、たいていスライス機能を用いて画像を書きだしていくことになると思います。スライス機能がないと一枚のキャンバスから複数の画像を書き出すことができないのでこれを使わざるを得ませんが、大変面倒くさい。ちょっと書き出すと以下みたいにめんどくさい部分がぼろぼろ出てきます。

・ 書き出す画像のひとつひとつにスライスの領域を設定しなければならない
・ レイヤの位置を調整すると、スライスの位置も同じように調整しなければならない
・「レイヤに基づくスライス」もあるけどこれはこれで使いづらい
・ 複数のスライスを重ねたり、あるスライスの領域内に別のスライスの領域を定義できない
・ 書き出される画像はレイヤを全て統合された結果になるので、書き出す画像の背景が透明にしたい場合に一部のレイヤを非表示にしてから書き出さないといけない

書き出す画像がたくさんあったりすると、スライス作業やってるうちに日が暮れて帰る時間が遅くなるわけです。

Slicyを使おう



Photoshopのスライス作業は面倒臭いし手間がかかる。そこで、Slicyの出番です。Slicyは、設定したレイヤグループごとにいい感じに画像を書き出してくれる便利ツールです。

ウェブサイトからSlicyをダウンロードしてインストールします。AppStoreでインストールしようとすると$29ドルかかりますが、フリーで利用できる評価用のアプリはウェブサイトから提供されています。

Slicyをインストールしたら、Photoshopを開きおもむろにレイヤグループの名前に書き出したい画像名をつけます。

以下の画像の場合、星の画像と背景を別々に書き出したいので、対応するレイヤグループにbg.pngとstar.pngという名前をつけます。



Slicyを起動して、PSDファイルをドラッグ&ドロップします。



すると、画像名を付けたレイヤグループ以下の画像がファイルとして書き出されました。画像の大きさもいい感じにトリミングしてくれています。今までスライス作業に時間をかけていたのが嘘みたいです。



このSlicyのお陰で僕はPhotoshopを触るとき煩わしいスライス作業から開放されて何倍も幸福になれました。価格は$29ドルしますがPhotoshop本体の価格に比べれば塵芥のようなものですよね。

終わりに



スライスを使った画像の書出し作業は、何の創造性も必要とされない割りには時間を食う作業なので、なるべく効率化したいものです。この記事では、Photoshopの画像書き出し作業を効率化してくれるSlicyを紹介しました。

グレーにカラフルな色が効いている国内&海外のサイトを14個まとめてみました。

こんにちは、花崎です。

最近髪の色を赤茶色にしました。
昔から赤毛の外国人さんを見ると、きれいな色だなと思っていたので紅葉のこの季節になると赤く染めます。

よく赤い下着を付けると元気になる、という情報を聞きますが確かに赤色を身に着けるだけで気分も上がります。
その他にパッションピンクや蛍光色、明度の高い色を好んで手に取っていました。

しかし派手なものを集めすぎて、かえってお互いの色や存在が目立たなくなったりします。

デザインをするときもそうです。
サイトを作る際に彩度の高い色を使いたいが鮮やかな色に合わせる色が…
というときに登場するのがグレーカラー。

ベースがホワイトはよくつかわれますが他に色味を欲しいとき、少し変化を付けたいときによく利用されます。

と、いうことで…

グレーにカラフルな色が効いている国内&海外のサイトを14個まとめてみました。




1.グリーン×グレー http://www.thebioagency.com/#/home
緑の使い方が目立ちすぎずグレーとマッチしています。





2.イエロー×オレンジ×グレー http://www.uxcambridge.net/uxc2012/index.php
モノクロの写真もオシャレに見えます。





3.イエロー×グレー http://kar.i-studio.co.jp/
イエローの色が際立っています。ピンクとの相性もいいです。





4.イエロー×グレー http://www.takaten.com/
イエローとブラックも使われていてイエローのマーカーで引いたような感じがして目がいきます。





5.ピンク×グレー http://pulla.tv/#/home/
ポイントだけ濃いピンクを使用しています。





6.ピンク×グレー http://www.metro-pro.co.jp/
薄いグレーに発色の良いピンクが際立って女性が好きそうなかわいいイメージがあります。





7.イエロー×色々×グレー http://www.ozanakoglu.com/
シンプルなつくりにイエローがポップな印象を与えてくれます。





8.オレンジ×ブルー×グレー http://www.acu.co.jp/
山吹色に近いオレンジとブルーの相性がいい感じです。





9.×蛍光レッド×グレー http://www.glamour.biz/
背景は水色に近いグレーで蛍光レッドのような一色で描かれています。





10.ブルー×グレー http://www.subtilstudio.com/
グレーの奥行きがある背景に水色がさりげないポイントになっています。





11.ピンク×色々×グレー http://visualized.com/
TOPにある、色が重なりあっているところが色のカラフルで目を引きます。





12.エメラルドグリーン×色々×グレー http://2012.hd-live.co.uk/
ありそうで日本じゃなかなか見ない組合せでした。オレンジとグリーンの色合いが素敵です。





13.ピンク×イエロー×グレー http://futureofwebdesign.com/prague-2012/
定番のピンクとイエローの組合せのちょっと彩度を落としてある感じいいですね。





14.オレンジ×グレー http://www.asial.co.jp/
最後は弊社のサイトです(笑)グレーにオレンジと水色を使用して作られています。




こうやってみてみると、グレーはいろんな色と相性が良いですね。
鮮やかな色を大胆に入れたりちょこっと入れてみたりしてもどれも色の良さを引き出してくれる気がします。

こうするだけで少しセンス良く見えたりします。

薄いグレーから濃いグレー、黄味がかったものや青味の強いもの。

それぞれを使いこないして素敵なサイトを作りあげたいですね。

ベテランPhotoshopユーザも必見! Photoshop CS6 新機能まとめ

こんにちは、鴨田です。

先日、会社のPCにAdobe CS6が導入されました。
今までCS4だったので、いろいろな変化に驚いています。
今回はPhotoshop CS6の新機能について、紹介したいと思います。

ただし、CS4→CS6になっての変化なので、
CS5からある機能も少し含まれているので、あしからず。

参考記事:
40 Tutorials to Master the New Features of Photoshop CS6 | 1stwebdesigner



● 選択範囲


選択範囲の選択中にドラッグ範囲の横に、
サイズを表示してくれるようになりました。
今までは情報ウィンドウを見ないといけなかったので、
結構便利になったのではないでしょうか。

操作画面



● 自動保存機能


やっと自動保存機能が搭載されました。
これで保存するのを忘れていてPhotoshopが落ちてしまったときの
あの絶望感から解放されるのではないでしょうか。

環境設定ウィンドウ



● 3D機能


シェイプレイヤーでもピクセルレイヤーでもどちらでも可能です。
3Dでの押し出しとともに、ライティング+シャドウ設定も出来るので、
今までの3D機能よりもさらに進化しています。

元画像

3Dフィルター適用後

操作画面

ツールウィンドウ

参考記事:
Photoshop CS6 3D Tutorial



● 切り抜きツール


大きな違いとしては、切り抜く範囲を指定する際に、
縦横比を簡単に決められたり、グリッドの表示が出来たりします。
また、切り抜く対象の方の位置や角度を変えるようになりました。

元画像

切り抜き時

プロパティ

クラシックモードにすると、今まで通り、
切り抜く範囲の位置や角度を変えることが出来ます。

クラシックモード

参考記事:
Introducing the New Crop Tool in Photoshop CS6



● レイヤー設定


レイヤーの選択を行う際に、レイヤーの種類によって、
絞り込みが出来るようになりました。

個人的に嬉しいこととしては、
複数レイヤーを選択して、透明度をまとめて変えることも可能になってます。

通常時 → テキストで絞り込み → 複数レイヤー透明度変更



ベクターツール


今までレイヤーパネルで制御していたシェイプの塗りなどに関して、
専用のパネルが用意されました。

プロパティ

塗りだけでなく、ストローク(線)の色や幅、種類も選択する事が可能です。
同レイヤー内のシェイプの細かな制御も行えます。

ストローク適用時

ストローク詳細設定ウィンドウ



● ぼかしフィルター


「フィールドぼかし」「虹彩絞りぼかし」「チルトシフト」が追加されています。
「チルトシフト」はよく見かけるトイカメラ風のフィルターなので、
昔に撮った風景写真なども手軽にトイカメラ風に出来るのは嬉しいですね。

元画像

チルトシフトフィルター適用後

操作画面

参考記事:
Blur Gallery in Photoshop CS6



● ライティングエフェクト


「照明効果」のフィルターが進化しています。
新しいUIとなって、ライティングの設定がしやすくなっています。
今まで小さい画面で操作しなければならなかったので、この変更は嬉しいですね。

※使用PCと照明効果フィルターとの相性が悪く、
 フリーズするので、キャプチャできませんでした・・・

参考記事:
Improved Lighting Effects in CS6



● 広角レンズ補正


広角レンズで撮影した画像を補整する事が出来ます。
あまりに広角にされていると限界はありますが、
レンズ補正と他のツールを組み合わせると、
どんな画像でも補整できると思います

元画像

レンズ補正後

参考記事:
How to Use Adaptive Wide-Angle Filter in Photoshop CS6



● コンテンツに応じた移動ツール


画面内で移動させたいものがある場合に使用します。
選択範囲で囲んだソースをコピーして、コピー先の場所となじませながら、
元々ソースがあった場所を周りの環境に合わせて、補完してくれます。

元画像

操作画面

ツール適用後

参考記事:
Content-Aware Move Tool Tutorial – Photoshop CS6 Beta



● タイプスタイル


段落スタイル、文字スタイルを設定、保存しておけるようになりました。
スタイル自体を別ファイルとして保存も可能なので、
お気に入りのスタイルを登録することで、作業効率は格段にアップすると思います。
使ったことないのですが、InDesignっぽいみたいですね。

段落/文字スタイルウィンドウ

詳細設定画面

参考記事:
Type Styles in Photoshop CS6



● ブラシツール(CS5から)


ブラシの堅さ、筆先の状態をリアルタイムで表現する
プレビューウィンドウが追加されています。
ブラシ自体の形状も分かりやすい形で、細分化されています。

通常時

描画中

ブラシウィンドウ




いつも基本的な機能ばかり使っていたので、
最近はあまり新機能を追わずに時間をかけてやっていたこともあるので、
もっと新ツールをどんどん使って、作業の効率化を図っていけたらなと思います。