【hoverで色変え】ちょっと流行りのグレースケール→カラー画像を使ってみた

みなさん、おはようございます!こんにちは!こんばんは!

りんごちゃんです。

さて、梅雨もあっっっっっというまに空けてしまって、スタイルを気にする季節がやってきましたね。みなさん、ちゃんと水分補給しなきゃダメですよ?熱中症には気をつけてくださいね!エアコンのかけ過ぎにも注意!!

もう学生たちは、夏休みとかに差し掛かってきているのですかね〜羨ましいです。( ;´Д`)

海とかにも行きたいですねーそのためにはダイエットもしなくちゃですけど( ;´Д`)

ではでは、本題に入りますか!

題名にもあるようにちょっと流行りに乗ってみました!

いま、当サプライドが8月に5周年になるので、それに向けて、サイトをリニューアルしちゃいます!それで、今はどんなサイトが流行りなのか調べてみました!

するとこちらが出てきました

画像をスタイルでグレーにして、カーソルが重なった時にカラーになる。

もう一つは画像が少し大きくなるんですよ!表示されている画像の大きさは変わらないので、中にある画像がブワンと大きくなる動きが意外と面白い。

では、コーディングして行きましょう。

まずは、htmlはこんな感じです画像をdivで囲んで

CSSでまず外で囲んでるクラスwakuに幅高さを決めて(基本的には画像に合わせて作った方がいいです)、display:block;をかけて、下の三行を入れるだけです!

これでまずは、画像がグレーになります。()のなかの1は、グレー100%を示しています。

次にカーソルが重なった(以降ホバー)時にグレーのフィルターを外します。

()のなかの1を0にするだけですね。

これだけだとホバーした時にパッとカラーに変わるのでそこで!

これですよ!

transition-duration: 1s;

このコードをそれぞれのスタイルにかけるとふわ〜をカラーになったりグレーになったりします。

これで画像をグレーにしまくれますね!

では、次に中の画像をホバーした時に大きくしましょう!

ここでは、中のimgをいじります。

 

まずは、画像自体にtransition-durationを指定します。ここで、枠と画像との間に余白が入っていると見栄えが良くないので、0.1%ほど大きくしています。ここは好みです。

次にホバーした時にtransform: scaleで画像のサイズを大きくしています。1は100%のサイズをしているので、それより大きくしたい場合は1以上の数値にそれより小さくしたい場合は、1より小さい数値に指定したらオッケーです。

これで終わりじゃないですよ。これを忘れちゃダメですよ!

この一文をdivに書き忘れるとdivからはみ出ても表示されちゃいますので、気をつけてくださいね!

これで完成です♪

これひとつ入れておくだけでも流行りに乗っかったサイトになるでしょう〜〜〜☆*:.。. o(≧▽≦)o .。.:*☆

では、失礼します。まったね〜〜〜♪

Adobe Dimension CC を使ってみた。

どうも!tutinokoです。

Javaのプロジェクトを作る話が途中で止まってますが、今回はこっち!

面白そうだったので「Dimension CC」を先日インストールしてみたので、ちょっと遊んでみた感想です。

Adobe Dimension CCとは
新次元の 3D グラフィックデザインソフトウェアです。デザイナーはこのアプリケーションを使用することで、3D や 2D の要素をすばやく合成したり、モデル、マテリアル、ライティングをカスタマイズしたりすることができます。2D を 3D に合成する先進の各種ツールにより、カスタムグラフィックを 3D モデルと組み合わせ、シーン全体を構成して最終レンダリング画像を作成できます。
(「Dimension CC | よくある質問」より抜粋)

…ということで、お手軽3Dグラフィックデザイン体験です!

デフォルトでいろいろな3Dモデルが用意されているので、好きなものをフィールドにドラッグして配置していきます。
左のツールバーでフィールドの目線やモデルの位置や傾きなども変えられます。

アセットの一覧の
「マテリアル」からはモデルの色やテクスチャを加えることができます。
「ライト」で光源の種類を変更できます。(これがまだちょっとよくわからなかった)
「画像」で画面に背景を足したり、モデルにマークを足すこともできます。

もちろん、自分で用意した背景やパターンやマークなども読み込んで使えます!

そして、テキトーにいじってこれで完成!ってところでレンダリングで書き出しをします。
水とかガラスとか透明な素材がデザイン画面だとなんかザラザラに見えるけど、レンダリングすれば綺麗に書き出してくれるっぽいです。
一応コレ、レンガと水の上にサプライドのロゴが入ってるんですよ!(わかりづらい)

左上のレンダリングを押して画面を切り替えて、右のレンダリングボタンを押すと書き出しが始まります。
フォトショで使えるようにPSDで書き出すようにしました。

さて、ここからが大変だった…

とにかくレンダリングが終わらない!

2時間以上待ってもまだ半分過ぎとかちょっとこれは…
最初にチュートリアルで説明を見ながら作った時は5分くらいで済んだ気がするのに…

作業の合間の息抜きだから、他のソフトとかいろいろ立ち上げてるせいも多分にあるとは思うけど…
複雑な水の表現とかレンガのテクスチャが重たいのかしら…

とりあえず、レンダリングは途中の状態をPSDにしてくれる機能があるので、一旦保存して諦めました。

そしてその途中の状態のものをフォトショでちょっとトリミングしたものがこちら。

だいたい形はできてますね?

フォトショのレイヤーを見ると親切にいろいろ分けてくれていました!便利!

書き出しが重たいのはどうしても本体のスペックですよね…
私が使っているのはMacで、Macの標準メモリは8GBなので、たぶんこれ16GBとかぐらいにしないとしんどいですよね…

ということで、3Dソフトを使う時はマシンスペックを要確認!でした!

クリッカブルマップ(イメージマップ)の作成方法!

クリッカブルマップ(イメージマップ)の作成方法!

こんにちは。Webデザイナーのotarieです (。-_-。)
今回はクリッカブルマップ(イメージマップ)を使う機会があったので、クリッカブルマップ(イメージマップ)の作成方法について学んだことを書きます。

画像1枚をまるごとリンクにするのではなく、画像の一部分だけをリンクにしたい。画像内の複数の部分に違うリンク先を指定したい。と思ったアレ。クリックする場所によってリンク先が違う指定をしている絵や画像をクリッカブルマップ(イメージマップ)と言います。

このクリッカブルマップ。初めましての時はとても難しく考えていたのですが、3つの要素を指定するだけで簡単にできたのでご紹介します。
その3つが「img要素」、「map要素」、「area要素」です。
1つづつ見ていきます。
 
 
STEP1「img要素」

img要素は、通常の指定と同様で
<img src=”img/xxxxx.png”>
これに、クリッカブルマップの属性を追加します。

usemap属性:クリッカブルマップの名前を、頭に「#」を入れ指定してあげます。
・src属性:画像ファイルを指定してあげます。
・alt属性:代替テキストを指定してあげます。
 
 
STEP2「map要素」

先ほどのimg要素に指定したクリッカブルマップの名前を使ってmap名を指定してあげます。

 
 
STEP3「area要素」

area要素は少しだけ複雑になります。先ほど指定したmap要素の中に入れていきます。
画像のどの部分にリンクさせるかを形と座標と共に指定してあげます。
指定の詳しい内容は下で説明します。

■「shape=””」 領域の形

 rect:四角形
 circle:円形
 poly:多角形
 default:画像全体

■「coords=””」 領域の座標

 座標(x,yなど)
 rect:左上と右下の角の座標(x,y,x,y)
 circle:中心点の座標と半径(x,y,半径)
 poly:全ての角の座標(x,y,x,y,x,y,x,y,…)
 default:coords属性は指定できない

■「href=””」 リンク先の指定

 URL:リンク先のURL

■「alt=””」 代替テキスト

 テキスト:マップが表示できない場合のリンクテキスト

この3つの指定をしてあげるだけでできるんです!簡単ですよね!
では全部を指定したサンプルコードを書きます。

 
 
STEP4「座標指定」の方法

では、座標はどうやって指定するのか?ここです。ここが面倒です!(´-`).。oO
Photoshopで座標を調べてもいいのですが、ここで私は便利なものを紹介します。
その名も・・・・! 

HTML Imagemap Generator!!!!

この便利なジェネレーターに座標を指定したい画像をポイっ!
そして指定したい形を選んで、絵の上でドラックして形を合わせて。。。。。
指定していくと、右側に自動的にコードが書かれ、座標も入れ込んでくれる本当に便利なジェネレーターで、強く、強くオススメします!!
あとはこのソースコードをコピペすれば簡単に指定できますよ^^

いかがでしたか?
また次回をお楽しみに〜