ぽっこりお腹をヘコませよう!

こんばんは。デザイナー一年目のともよです。

まだ一年目ということで、日々基礎を勉強しながらWEBに感動をしています。

 

それでは、今回もPhotoshopのお話をさせて頂きます。

 

とある業界ではよく使われる写真補正についてです。

私が今回お話するのは、Photoshopでぽっこりお腹をキュッと引き締める方法です。

 

■Photpshop(cs5版)

今回はこの男性を痩せさせて見せます。

すっごく簡単な手順で、この男性はあっという間に痩せるんです。

①使用する写真をPhotoshopで開きます。(上記のイメージ)

②オプションバーからフィルターを選択します。

 

「ゆがみ」を選択すると、下記の画面が表示されます。

③左のサイドバーで指先ツールを選択します。

④右のサイドバーで、ヘコませたい部分に対応するサイズのブラシサイズを調節します。

 

あとはイメージの背景に合わせながら、

お腹周りを痩せたい方向に少しずつマウスを動かして下さい。

★ポイント

お腹を直接ヘコませようとしてはダメです。お腹の周りの背景を引っ張るようにして下さい。

そうすればポッコリお腹も・・・

■before

■after

いい感じに引き締めることができます。

下の方が自然に見えるかもしれませんが、元素材は上です。

 

背景が複雑な場合は、ブラシを変更すれば問題ありません。

とっても簡単で便利な補正方法なので使ってみてはいかがでしょうか?

 

 

HTML5をもっと身近に

こんにちは、陽気なシステム屋です。

 

GoogleからHTML5を簡単に書けるツールが発表されたということで取り上げてみます。

それが「Google Web Designer」!

広告主向けのツールで、webに詳しくない人でも直感的に広告を作成できる…

しかもアニメーションも3Dも使えて、表現はまさに自由自在といったところ

http://www.itmedia.co.jp/news/articles/1310/01/news043.html(ITmediaニュース記事)

 

早速使ってみました

画面はこのような感じです

カラーパレット、テキストボックスはもちろん、

背景をグラデーションにしたり、好きなところにペンツールで描画できるなどなど…

機能の豊富さが滲み出ていますね。

 

角丸も簡単にできます。

 

作成しながらソースを確認したり、プレビューをブラウザで確認できます。

ブラウザはChrome、Firefox、IEの3つを用意…うーん痒いところに手が届く…

 

格闘すること30分…アニメーションが出来上がりました。

※本当はアニメーションなんです、信じてください

使いこなせばもっとすごいものができるはず…

ただソースがものすごく複雑になっていましたので、あまり壮大なものは作れないように思います。

 

イメージとしては、Flashのようなものを想定していただければわかりやすいかと思います。

FlashはiOSだと見られないのでHTML5で表現…時代に沿った進化進化を感じます。

webの広告がますます洗練されていくのではないでしょうか。

 

web制作の実績はこちら

How to Photoshop―画像の切り抜き

こんにちは!

今回はPhotoshopの切り抜きについてお話させていただきます。

 

Photoshopで写真を細かく切り抜きたい!そんな時は・・・

PhotoshopのCS3から搭載されている、

[境界線を調整] で精度の高い切り抜きをすることができます。

 

■STEP1

まずは、以下のように選択範囲を作成します。

 

そして、オプションバーに現れる[境界線を調整…]をクリック!

ここをクリックすると…

[境界線を調整]のダイアログが表示されます。

 

 

■STEP2

[表示モード]の表示:選択範囲と非選択範囲の見え方を選びます。

(今回は背景が明るいものを使用しておりますので、黒地を選択いたします。)

 

そして、[表示モード]以下のエリアで、画像に応じてブラシのエッジの調整いたします。

調整をしたら、キレイに切り抜きたい部分をくるくるっとブラシで選択すると…

髪の毛の細かい部分まで選択されました。

 

■STEP3

最後に出力先を選びます。
今回は「新規レイヤー(レイヤーマスクあり)」を選択いたしました。

また、[不要なカラーの除去] にチェックを入れると、

フリンジ(境界部分のノイズ)を除去してくれます。

OKをクリックして確定をします。

 

\  切り抜きの完成です!  /

 

説明不足なところもあるかもしれませんが申し訳ございません。
最後までご覧いただきありがとうございました!

 

Webサイト開発実績はこちら

 

 

職人技!本物の氷で作られたWEBサイト

おはようございます!

お盆が明け、弊社も本日から営業開始です。

まだまだ暑い日が続きますが、お休みで養った鋭気を活用し元気に頑張ります^^

皆さまも、熱中症にはお気をつけ下さい!

 

そんな暑い日に、なんとも涼しげなサイトを見つけました。

AGF(味の素ゼネラルフーヅ株式会社)のキャンペーンページです。

http://stick-ice-world.com/

 

なんとこのWEBサイト、本物の氷で作られているそうです。

にわかに信じがたいですが、こちらの動画をみて感動してしまいました。

 

これぞ職人技ですね!

トップ画面の氷の彫刻は、高さ2m×横3mの巨大な氷を使用し、

マイナス5度の冷蔵倉庫で約9時間かけて制作されています。

 

サイトをよく見ると、氷の表面に水滴がたれていたり、

氷の周りから冷気がでていたりと、涼しげな演出がたくさん。

 

その他にも、冷やすと色が変わるヒンヤリグラスのプレゼントキャンペーンや、

SNSアイコンや好きな画像を凍ったように加工して遊べる機能なんかもあります。

 

スティックタイプの飲み物は、なんとなくホットで飲むイメージがありますが、

夏にはアイスで楽しめるんだよ!というのを、サイトと動画で訴求したおもしろいWEBサイトですね。

CG技術に頼らず、本物の氷を使っているという点にも、製作者のこだわりと職人の情熱を感じます。

ユーザーに訴えかけるサイト作りのためには、こういった企画力も重要なスキルになってきます。

こだわりの詰まったサイトを企画し、実現する力と行動力を身につけていきたいと改めて感じました。

 

弊社は、WEBサイトの制作から運用まで、トータルで承っております。

実績紹介はこちらをご覧ください。

デザインの本質を学ぼう。UI・UX関連のスライド・ドキュメントまとめ。

デザインの本質はかっこいいものやかっこいいビジュアルを作ることだけではありません。

デザインの本質とはビジュアルを通じて、
顧客の体験を設計し、価値を伝え(または与える)、
自らのビジネスのゴールを達成することが目的です。

それについて書かれているよい、
スライド・ドキュメントをまとめました。

デザイナーと非デザイナー両方の方たちに読んで欲しいです。

■これはウェブページです。
http://justinjackson.ca/words_japan.html

■ハートに響くUIを生み出すためのデザインプロセス
http://www.slideshare.net/websig/websig-vol332ndui

■UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
http://www.slideshare.net/ao_bascule/uiux-ui-ux

■コンテンツで改善する UI デザインの極意
http://www.slideshare.net/yhassy/ui-17299700

■伝わる!デザインのつくりかた
http://www.slideshare.net/Hidetaro7/ss-17269767

■デザイン思考による人間中心のイノベーション
http://www.slideshare.net/gitanez/ss-13733854

■UXのためのUIデザイン
http://www.slideshare.net/hironobuaoki/uiux-13149154

■優れたデザインの 定義と思考方法
http://www.slideshare.net/junichiizumi/ss-19254542

効果的なWEBデザイン~効果的な写真の使い方~

こんにちは、wakaです。
最近、セブンイレブンの新商品のポテトサラダにハマりました。
「ポテトサラダは一日一個まで」を目標にガンバります。

さて、今回は「効果的なWEBデザイン」についてお話ししたいと思いますが
その前に、私のWEBデザインの恩師の言葉をご紹介したいと思います。

 

”デザイン”とは”問題を解決すること”である。
「この患者さんの病の苦しみを取り除くにはどうしたらいいのだろう?」
と考えるお医者さんは、デザイナーだ。
「このお客さんが花を渡したいと思っている相手はどんな花を喜ぶだろう?」
と考えるお花屋さんは、デザイナーだ。
「このWEBページを見てほしいユーザーはどんなサイトを見たいのだろう?」
と考えるのがWEBデザイナーだ。』

 

WEBページはなんらかの目的を持って存在しています。(または生み出されようとしています。)
その目的を達成するためにどうしたらいいか、解決する方法を考えることが
デザインするということなのですね!

ところでみなさんは
人の目を引くWEBページには、写真やイラストが効果的に使用されていることが多い
と感じることはないでしょうか?
有名芸能人や、美しい風景の写真は、瞬間的に目に入っていく気がしますよね。
それでは、以下の写真をご覧ください。

ぱっと見て、どの写真にまず最初に目が行きましたか?

人の目は、

人の顔>動物の顔>風景・モノ

の順に目が行きやすく記憶も残りやすい、と言われています。
この特徴を効果的にWEBページに使用すると、以下のようになります。
・特に注目してもらいたいコンテンツやバナーには
モデルの顔の写真を使用すると、注目がいきクリックしてもらいやすい!

・載せなければならないが強く記憶に残ってほしくないコンテンツ(謝罪広告など)には
風景の写真を背景に使用すると、悪い印象があまり強く残らない!

 

ちなみに、人に見てもらえる、人に好感を持ってもらいやすい素材を「3B」といいます。
「Beauty(美人)、Baby(赤ちゃん)、Beast(動物)」は広告や雑誌の表紙によく使用されていますよね。

効果的に写真素材を用いて、クライントの抱える問題を解決し
WEBデザインの高みを目指していきたいですね♪

本日はこのあたりで。それではノシ

Webサイト開発実績はこちら

やっぱり画像の拡張子が気になります

こんにちは。月曜担当・ほんだです。

先日友人と会って、趣味を持つことが大事だという話になりました。

趣味はガーデニングと言いながら、冬場はやることがないので放置気味です。

枯れない程度に見守っています。実に春が待ち遠しいです。

 

さて先週、画像の拡張子についてお話をしましたが、今週もその続きです。

jpg以外の拡張子にはどのような特徴があるのでしょうか。

 

先週の画像をちょっと加工してみました。

背景が夕焼け…?

実はこちら、画像自体に透過処理を施して、背景の色をcssで指定しています。

png形式では、透明部分を設けることができるので、

背景色を指定していても違和感なく画像を表示することができます。

(背景色をきっちり処理しないと、上のようにざらざらの境界になってしまいますが…)

背景色のある部分のアイコンなど、

画像自体が背景色を持っていると影響を受けてしまうときにこの処理をすると便利です。

透過pngはIE6で表示できないなどと言われていたこともあったそうですが、

専用のjsを読み込むことで回避ができるそうです。またしてもIE…曲者ですね

透過はpngだけでなく、gifでも可能です。

gifよりもpngの方が圧縮率が高く、画質の劣化が少ないようです。

 

pngにはpng-8png-24png-32の3種があり、

png-8は使用できる色数が256色までに限られます(gifも同じく256色まで)。

png-24png-32ではそれ以上の色数を使用できます。

その分画像の容量は重くはなりますが…画像によって選択できるのがありがたいですね。

 

gif形式では、アニメーションのあるバナーを作ることができます。

製作にはソフトが必要ですが、要領はパラパラ漫画と同じです。

変化させたい画像を段階的に用意することで、なめらかなアニメーションを作ることができます。

 

というわけで2週にわたって、画像の形式について簡単に説明してきました。

使い分けに明確な決まりがあるわけではありませんので、色々試して最適な選び方を見つけるのが良いかと思います。

それではまた再来週!

画像の拡張子が気になります

こんにちは。月曜担当・ほんだです。

日ごろの運動不足解消に2つ隣の駅まで歩いて行きましたところ、なぜか肋骨が痛み出しました。

運動不足は相当深刻なようで、整体のパンフレットを頂いて電車で帰ってきました。

 

さて、本日のブログですが…

先週の記事で「2012年最も伸びた(浸透した)技術ランキング」を取り上げましたが、

こちらでもう1つ気になった点がありましたので、書いていきたいと思います。

 

前回のおさらい

These are the technologies that gained most top 1 million sites in 2012:

  1. jQuery
  2. HTTP compression
  3. PNG image file format
  4. UTF-8
  5. Facebook
  6. Google +1
  7. Nginx
  8. Twitter
  9. HTML
  10. Google Analytic

 

今回取り上げますのは、第3位の『PNG image file format』です。

web制作では欠かせない画像ですが、

形式に関しては地味ながらも重要な事項です(ということが調べていて発覚しました)ので、

今回取り上げてご報告させて頂きます!

 

まず画像の拡張子ですが、皆さんがよく目にするものと言えば…

jpg(jpeg)gif、そしてpngの3本柱かと思います(あとbmpやtifなど…?)

jpgjpegは同じものだそうです

試しに、持っていた写真を3つの拡張子で保存してみました。

写真に関しては、jpgがややなめらかな表現となっていることが分かります。

(ひまわりの下の花びらが分かりやすいかもしれません)

jpgは写真向きという特徴があり、保存時に圧縮率を変更できます。

jpgの圧縮形式は不可逆圧縮(非可逆圧縮)というもので、

圧縮の効率性を重視しているため、データ自体は視覚的に劣化のないように変容しています。

容量を操作できるのは便利ですが、圧縮をかけすぎると当然のことながら画質は落ちてしまうので要注意です。

 

さて逆に色の境界に関しては、gifpngの方がはっきりとしています。

(空とひまわりの左の花びらとの境界を見ると分かりやすいです)

gifpngは、ロゴやチラシなど文字の入った画像や、輪郭や境界のはっきりとわかる画像に向いているといえます。

jpgと異なる圧縮形式のため、容量はjpgより重くなってしまいますが…

実はgifpngにはすごい能力が…!?

 

長くなってしまいそうなので来週に乞うご期待です!

参考:http://blog.v-colors.com/png-gif-jpeg.html