グレヌデサ La graine du dessin

Flash君とIE6君

2012-04-18T15:00:00Z

といっても、まだまだHTML5の可能性や理解が難しい現状では
Flashは活躍しつづけそうです。

果たしてFlashは今後本当に必要とされなくなるのか...。

一方お葬式が行われたことがまだ記憶に新しいIE6ですが
愛用者が10％にも満たなくなった今でもクロスブラウザの範囲に入ってしまうこともしばしば。

クロスブラウザやタブレット、スマートフォン...。
Flashが良いのかHTML5がいいのか...現在が移行期で一番中途半端ですが、
HTML5で組むだけで「話題性」になる、ということにポイントを置くと
十分"アリ"と感じています。

(kana)

マルチデバイス対応でのCMSの在り方

2012-04-11T15:00:00Z

これまではPCでWebサイトを閲覧する事が主だったのが、
スマートフォンやタブレット端末の普及により、Webサイトの在り方も多様化してきました。
それぞれのデバイスに最適化されたマルチデバイス対応へのニーズが急速に増えているのです。

そのため、Web制作をとりまく環境も大きく変わりつつあります。
ひとつのPCサイト制作では終わらず、様々なデバイスに対応したサイト制作が必要となるわけで、
それだけアウトプットされる情報が多岐に渡り、サイト更新などの運用面でも大変なコストと労力が
かかってきてしまいます。

そこでCMSとの連携が大変重要になってくるのです。
今までは、情報の更新性を高めて容易に更新できるようにするのが
主な目的だったのに対して、今後はデータの一元管理という点で、
CMSは非常に貢献するツールになるのではないでしょうか。
下記サイトは大変参考になるケースです。

株式会社ローソン

http://www.lawson.co.jp/index.html
Movable Type コンテスト2010では準グランプリを獲得しています。
スマートフォンやモバイルへの対応のほか、TwitterやFacebookといった
ソーシャルメディアサービスとの連携も行っており、Movable Type + Power CMS for MTを
活用して情報の一元管理をしています。
まさに今の時代に合ったサイト構築が実現されています。

ルヴァンヴェール

http://le-ventvert-wedding.com/
ジーピーオンラインでも自社オリジナルCMS「WOW」を使った
PC・モバイル・スマートフォンを制作しています。もしろん一元管理しています。
また、Flash非対応のスマートフォンのためHTML5によってインタラクティブな演出を補い、
かつSEO対策としての効果も期待できます。

その他にも、MovableTypeを使った大学サイトやアパレル系サイトなども制作してますが、
今後もこのようなCMSの需要はより一層増えていくでしょう。

(takanosuke)

スマホ向けコンテンツ作成のために知っておきたい、使えるギャラリーサイトのリンク集

2012-04-04T15:00:00Z

スマートフォンのシェアが高まるにつれて、ますますニーズが高まるスマートフォン向けコンテンツ。
スマホサイトの作成やUIデザインなどの参考に役立つ、
国内と海外の優れたデザインギャラリ―を一挙ご紹介！
スマートフォン向けコンテンツの作成や学習に、ぜひお役立てください。

国内ギャラリー

Phoneデザインボックス

スマホサイトとPCサイトの両方を1ページで紹介。PCサイトとの連動を考えるときの参考にもなります。

iPhoneデザインアーカイブ

国内・海外の優れたデザインサイトが集結。

スマートフォンサイト集めました。

カテゴリ―、カラー別のサイト分類付き。

ミートアイ

iPhoneポータルサイト。気になるサイトのURLをiPhoneに送信することができます。

海外ギャラリー

Mobile Awesomeness

サムネイルの種類が豊富で見やすいギャラリーです。

TappGala

インターフェイスのデザイン集。QRコード付き。

iPad and iPhone Design Inspirations Gallery

iOSのデザインサイト。iPhone、iPad向けのweb、app、game画面などを閲覧できます。

CSSiPhone

iPhone用サイトの参考に。

Mobile UI Patterns

シーン別のUIのスクリーンショット集。

lonvely ui

iPhone、iPadのUIのスクリーンショット集。

APPSITES

スマートデバイス、Macのアプリ紹介サイトのデザイン。

overlapps

アイコンの参考などに。

jQuery Mobile

jQuery Mobile Gallery

jQuery Mobileを使用したサイト制作の参考にどうぞ。

(yukari)

Photoshopのテキストエフェクト作り方40選

2012-03-28T15:00:00Z

フォトショップは写真加工やデザインなどのほかにテキストエフェクト作成にも使われます。コチラの「40+ Impressive Photoshop Text Effects Tutorials」というサイトですごくリアルな質感なものから幻想的なもの、意外と単純にできるものまで紹介されています。今回は簡単にピックアップして紹介していきたいと思います。

雲のような、煙のようで岩っぽいエフェクトをつける方法。

重厚感のあるデザインで使えそうです。
ガウスのかけ方がポイント。
Design a Snowy Rock Text Effect in Photoshop

燃えているようなエフェクトをつける方法。

燃えているようなエフェクトをつける方法。
炎で一番熱くなっている所に別のグラデーションをかけると、どこから燃えているのかという感じが加わりリアリティが増します。
Dramatic Text on Fire Effect in Photoshop

後方から光と爆発が起こっているようなエフェクトをつける方法。

アクションものの映画とかで使われそうなダイナミックなテキスト。
工程がすごく長いのでこれを作るのは苦労しますが、
覚えておくとデザインの幅が広がりそう。
Colorful Light Burst Text In Photoshop

ネオン効果のような、POPなエフェクトをつける方法。

エフェクトの8割はレイヤー効果で作れるのでかんたんにできます。
普通のネオン効果で物足りない時に使えそう。
Glass Neon Text With Ornament Photoshop Tutorial

その他のチュートリアルはこちらから
「40+ Impressive Photoshop Text Effects Tutorials」

(seishi)]]>

画面解像度のまとめ

2012-03-21T15:00:00Z

デザインの際、ページ幅を決める上で判断材料となる画面解像度。
スマートフォン、タブレットPCの普及で、そのサイズもいろいろとなりました。
今回は、PC、スマートフォンに分けて主要な解像度をまとめてみました。

PC対応の画面解像度

まずはおなじみのPCの解像度。
1280×1024(SXGA)、1024×768(XGA)が今でも利用は多く、
ここを踏まえてページ幅を決めておけば無難、という印象です。

・XGA : 1024×768 (4:3)
・WXGA : 1280×800 (16:10)
・SXGA : 1280×1024 (5:4)
・HD　 : 1366×768 (16:9)
・WXGA+: 1440×900 (16:10)
・HD+　: 1600×900 (16:9)
・FHD　: 1920×1080 (16:9)
・WUXGA: 1920×1200 (16:10)

スマートフォン対応の画面解像度

Android系のスマートフォンは機種によってサイズがまちまちですが、以下の4種類が主流の傾向です。

・720×1280
・540×960
・480×800
・480×854

これに加えてiPhone、iPadのサイズを踏まえる必要がありますね。

・320×480 (主な機種：iPhone3G / 3GS 他)
・640×960 (主な機種：iPhone4 / Au IS03 他)
・768×1024 (主な機種：iPad / iPad 2)

・720×1280（主な機種：GALAXY NEXUS SC-04D 他）
・540×960（主な機種：htc EVO 3D 他）
・480×800 (主な機種：Galaxy S / Nexus One 他)
・480×854 (主な機種：Xperia (SO-01B) / Xperia arc (SO-01C) 他)
・600×1024 (Galaxy Tab)

■参考：Hacking My Way ? itogのhack日記 : Androidデバイスのディスプレイサイズ、DPI一覧

(masanori)

スマートフォンのコーディングで気を付けたい4つのポイント

2012-02-01T15:00:00Z

はじめに

現在、スマートフォンは大きく分けて2つのOS（iOS、Android）があります。
OSごとの仕様の違いも重要ですが、特に問題になる端末の違いは画面の解像度で、
iOSは960×640px(iPhone4とiPhone3Gは同じサイズで表示できる)
Androidは800×480px?(端末によってサイズがバラバラだが、横幅は480pxが基本)
と、表示サイズが大きく異なります。
さらにスマートフォンは画面を横に回転させることもできるので、
解像度が縦横反対になることも想定しておかなければいけません。

iPhone4を基準としたデザインからコーディングをした場合の注意点とその参考サイトをまとめました。

iOSのSafariは様々な制限やバグがある

・画像のサイズ制限がある（GIF、PNG、TIFF画像のデコードサイズ制限は2メガピクセル）
・Web Fonts は使えない。
・zoomプロパティを使用した場合、特定の条件で文字が拡大するバグ

[参考サイト]
PhoneのSafariブラウザにおける、色んな制限｜FINE lab.
http://lab.fine-net.com/modules/wordpress2/index.php?p=15
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ｜to-R
http://blog.webcreativepark.net/2011/04/07-063417.html

Android2.1以前はselect要素に対して、スタイルの高さに関連する指定が効かない

Androidでスタイル属性に高さを指定した場合、ボックスサイズが拡大されず、中のテキストのみ大きく表示されます。対処方法として、背景画像を指定することでブラウザ標準の枠線を取り去ることができます。また、CSS3である程度の装飾は可能にです。

[参考サイト]
Android・iPhone向けwebサイト開発で知っておくと良いこと｜村式流イッパシエンジニアへの道
http://blog.ville.jp/2011/04/25/619

横に回転させた時に画面のサイズに合わせて拡大させたい場合

ワンソースで全てのスマートフォンに横幅をフィットさせる方法です。この方法を使えば一回のコーディングですべての端末に反映することが可能ですが、端末ごとに拡大縮小をすることになるので、文字サイズが読みづらくなったり、逆に大きくなりすぎたりする場合があり、けして万能な方法ではありません。また、Android2.1以降でselectボックスのサイズを大きくするときの懸念点として、 zoomプロパティを使用した場合に発生するiPhoneの文字の表示バグ等があります。使用する場合は表示チェックを入念にしなければいけません。

[参考サイト]
スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには｜これからゆっくり考L +α http://sakaki0214.com/2011/06/05223738.html

スマートフォンサイトで文字サイズが違う場合

iOSのsafariではフォントサイズが自動アジャストされ、PCで見ていたサイズとかなり差異がある場合があります。それを解消するためにcssに-webkit-text-size-adjust というプロパティを使用することで、フォントサイズの変更が可能になります。このプロパティはwebkit特有の特有のプロパティで、基本はautoになっています。必要があれば変更するぐらいで、基本的にはあまり使用しません。

[参考サイト]
項目：文字サイズの自動アジャスト｜＠IT
http://www.atmarkit.co.jp/fsmart/articles/iphone/04.html
iPhone/Androidサイトで文字サイズを固定する方法｜Web Designing satoimo18+
http://www.satoimo18.com/archives/136

スマートフォンはPCと比べて比較的コーディングはしやすいですが、実機チェックと対応バージョンの考慮など、様々な制限があるので、要件をしっかり決めてから、デザイン、コーディングを進めるのが重要です。

(kazuki)

Photoshop・Illustratorでリボンを作るチュートリアル10選

2011-12-21T15:00:00Z

ガーリーにもエレガントにも、キュートにも。
くるくると動きのあるリボンのグラフィックをワンポイントにするだけで
デザインがランクアップすること間違い無し！
覚えておくと何かと重宝するリボンの描き方チュートリアルをまとめてみました。

【Illustrator】カリグラフィブラシでパスを描いてアウトライン化

カリグラフィブラシでパスを描いてアウトライン化、
その後手前と奥のリボンを分割して色を塗り分ける方法です。
複雑なくるくる具合にしたい場合に最適です。
このチュートリアルではプレゼントBOXの描き方の中で、リボンの作り方が紹介されています。

How to Make Festive Vector Gift Boxes | Vectortuts+　※英語
http://vector.tutsplus.com/tutorials/illustration/how-to-make-festive-vector-gift-boxes/

【Illustrator】3D効果を使う

自由曲線に3D効果をつけてリボンを作る方法です。お手軽。
細かい微調整は必要ですが、パースを正確にしたい場合におすすめ。
リボンの太さが一定になるので、少し無機質な雰囲気になるのと
うねりに合わせて太さをデフォルメしたい場合には向かない方法です。

イラレラボ　illustrator-labo - Tutorial_くるくるリボンを描く
http://illustrator-labo.com/?p=218

【Illustrator】パスを垂直に下ろして1面づつ作る

自由曲線を垂直にコピーして作る方法です。
1面1面作っていかなければならないので、複雑な動きの場合は面倒ですが
リボンの太さを変えたり、動きをもたせたりといったデフォルメがしやすいのが特徴です。

Creating a ribbon in Adobe Illustrator | Veerle's blog　※英語
http://veerle-v2.duoh.com/blog/comments/creating_a_ribbon_in_adobe_illustrator/

【Illustrator】結んだリボン

こちらは3D効果を使った結んだリボンの描き方です。
短時間でハイクオリティなリボンが描けるのでおすすめ！
このチュートリアルひとつ覚えておくだけで、いろいろ応用が効きそう。

イラレラボ　illustrator-labo - Tutorial_リボンの描き方
http://illustrator-labo.com/?p=365

【Illustrator】勲章リボン（ロゼット）

こちらは欧米ではメジャーな勲章リボン。（ロゼットというそうです）
フリルがかわいいですね。ランキングのイメージなんかに使えそうです。

Create a Tri-Color Rosette Ribbon in Illustrator | Vectortuts+　※英語
http://vector.tutsplus.com/tutorials/illustration/create-a-tri-color-rosette-ribbon-in-illustrator/

【Photoshop】質感がすてきなレトロリボン

ペタンと折り返されたストライプのリボンです。
パターンオーバーレイで布のような独特の質感を出します。

Design a Retro Style Ribbon　※英語
http://www.photoshopstar.com/graphics/design-a-retro-style-ribbon/

【Photoshop】巻きついたリボン

最近Web界で流行りの、巻きついたリボンのデザイン。
サイトデザインに反映する時の画像の切り出し方とコードの書き方まで紹介されています。
しかも、うれしいPSDソースファイル付き！

Create a 3D Ribbon Wrap-Around Effect (Plus a Free PSD!) | Webdesigntuts+　※英語
http://webdesign.tutsplus.com/tutorials/site-elements/create-a-3d-ribbon-wrap-around-effect-plus-a-free-psd/

【Photoshop】超基本のリボン

おなじみの超基本リボン。直線的なので、描きやすいです。
うれしいPSDソースファイルつき！

Ribbon Tutorial - Learn how to create a simple ribbon using adobe photoshop.　※英語
http://www.trickdigest.com/tutorials/banner.html

【Photoshop】アプリアイコンで作ったリボン

iPhone Giftのグラフィックでやってた、アプリアイコンリボンをつくってみたよ！というチュートリアル。
変形ツール「ワープ」をつかってアイコン画像をぐりぐりとねじ曲げています。
同様にすると、こんなリボンも作れます。こちらはムービーフィルムのイメージなんかに応用できそうですね。

iPhone Gift Ribbon　※英語
http://webdesignerwall.com/tutorials/iphone-gift-ribbon

【Photoshop】超リアルな結んだリボン

覆い焼きツールと焼き込みツールでハイライト、シャドウを描き込む本格派。
難易度が高いですが、かなりリアルなものが作れます。

Photoshop design ribbon logo stock photo in photoshop. | Fun tutorials　※英語
http://www.php2k.com/blog/beginners-photoshop-tutorials/photoshop-design-ribbon-logo-stock-photo-in-photoshop/

番外編

最後は、リボン素材のまとめ記事をご紹介。
時間がない場合はフリー素材を使っちゃいましょう。ファイルの中を見ることで勉強にもなります。
※利用規約は各々のサイトをご確認ください。

Photoshop VIP | リボンやステッカー、バッジを簡単作成、PhotoshopフリーPSD素材30個まとめ
http://photoshopvip.net/archives/29521

30 kostenlose Photoshop Ribbon Sets | hpvorlagen24 Webdesign Magazin
http://www.hpvorlagen24.de/2011/04/26/30-free-photoshop-ribbon-sets/

これらを全てマスターすれば、あなたに描けないリボンは無いはず！
たのしいリボンライフを送って下さい！

(sayaka)

ちょっとだけ制作効率をアップする?! 簡単にできる線のあしらいtips

2011-11-23T15:00:00Z

破線を書く

Webデザインで、囲んだり、区切ったりと、よく使われる破線。
今回は、Photoshopのブラシツールで簡単につくれる破線をご紹介します。

1)ツールパレットから鉛筆ツールを選択してから、F5を押しブラシパレットを表示

2)間隔に任意の数値を入力

3) 線を描くと破線になります。

図形の境界線を破線で描く

Photoshopで図形の境界線を描くときに、レイヤースタイルの"境界線"を使用する場合があります。
この境界線を使って破線で描きたい場合は、一工夫が必要です。

1) 破線のパターンを用意します。

2)これをパターンに登録

3)好きな図形を描きます。

4)レイヤースタイルの"境界線"を選ぶ

設定を

○サイズ：2pixel

○塗りつぶしタイプ：パターン

○パターン：先ほど作ったパターン

この方法は、繰り返し同じあしらいのボックスを作成したい等の場合に便利です。

番外編：境界線のあしらいを工夫する

レイヤースタイルの"境界線"の塗りつぶしタイプ：パターンを使って、いろいろなあしらいの線を簡単に作ることが出来ます。

ガーゼパターンを使って不規則な破線。

羊皮紙パターンを使ってクレヨン＆手書き調の境界線。

漆喰パターンを使ってがっちりとした印象の境界線。

ゼロから作ると時間がかかるボックスのあしらいもこの方法だと少々の時間で出来るので便利です。（今回使用している環境は、Photoshop CS5です。）

(masanori)

高品質なWebデザイン素材（PSD）がダウンロードできるサイトまとめ

2011-11-09T15:00:00Z

このボタンのデザインって、どうやって作るのかな？
質感のあるWebデザインのパーツや素材の作り方が分からない、知りたい！って方におすすめする、
Webデザイン用の高品質なPSD素材がダウンロードできるサイトをご紹介します。

眺めるだけで、デザインの参考や学習になるのはもちろんですが、
ダウンロードしたpsdデータを読み解くことで、制作の裏側を学ぶこともできます。
レイヤー効果やテクスチャーなど、このように使っているのか！と発見があり勉強になります。

みなさんもぜひ参考にしてみてください。

Elemis

ページデザインのテンプレートから、パーツ、パターン、テクスチャ素材等をダウンロードできるサイト。
細部まで緻密に作られているデザインは勉強になります。

Freebies Booth

ボタンやメニュー、アイコンなど、主にデザインのパーツを紹介しているサイト。

Free PSDs & Resources for Web Designers by Orman Clark

Orman Clarkさんによって作成された、デザインパーツサイト。
フォームやボタン、グラフィックなどがダウンロードできます。

※ライセンス、利用条件にについては各自ご確認ください。

(yukari)

初めてHTML5でコーディングにする際に気をつけるべき事

2011-10-26T15:00:00Z

近頃HTML5が本格的に導入される傾向が高まりつつあります。
HTML5対応が促進される理由は、XHTMLの時よりもセマンティクス^*な文章構造を意識してコーディングをすることで、
データ自身に的確な意味をもたせる事が可能になりました。
それにより、サイト自身の情報の精度が高まり、検索結果等に正しい情報が反映されていくことになります。

*セマンティクスについてはこちらをご参照ください
エンタープライズ：Gartner Column：第11回そもそも「セマンティクス」とは何だろう？
http://www.itmedia.co.jp/enterprise/0108/20/01082088.html

HTML5で新たなに追加されたよく使用する要素の注意点をご紹介していきます。 ]]> section要素はdivタグと同じような使い方をしない sectionタグはdivなど、要素を大枠で括って使用していたものと置き換えるのではなく、
見出しを含む文章や章、段落などをひと塊として扱います。

間違い例

<section>
　<div id="header">
　　<h1>sitename</h1>
　</div>
　

　<div id="contentsWrap">
　　contents
　</div>
　

　<div id="footer">
　　footer
　</div>
　
</section>

上記のように、全てをsectionタグで梱包してはいけません。

正しい例

<div id="wrapper">
　<div id="header">
　　<h1>sitename</h1>
　</div>
　

　<div id="main">
　　<section>
　　　contents1
　　</section>

　　<section>
　　　contents2
　　</section>
　</div>
　

　<div id="footer">
　　footer
　</div>
　
</div>

情報を細分化し、以下のようにmainタグ内生成し、要素ごとに区切って使う事が望ましいです。
なお、sectionタグ内に見出し要素がない場合はarticleタグ、重要でない要素にはasideと使いわけます。

header要素、hgroup要素は必要な場合のみ使用する

headerは各ページの上部に付けるだけではなく、
各要素の見出し、イントロダクション、ナビゲーションなど、
情報の導入部分や誘導部分との梱包として使用する事が望ましいタグです。
また、hgroupも見出し要素に使用するのですが、
こちらは要素ごとに対し小見出しやキャッチフレーズ等が複数ある場合、
それらをひと塊として扱うために使用します。

header間違い例

<section>
　<header>
　　<h1>pagename</h1>
　</header>
　<p>read</p>
</section>


sectionタグ内でアウトラインが生成できており、尚且つ見出し要素が一つしかありませんので、
この場合headerタグは必要ありません。

header正しい例

<section>
　<h1>pagename</h1>
　<p>read</p>
</section>

hgroup間違い例

<header>
　<hgroup>
　　<h1>pagename</h1>
　　<h2>promoword</h2>
　</hgroup>
</header>


header内にhgroup要素しかない場合は、headerタグを使用しなくてもいいです。

hgroup正しい例

<hgroup>
　<h1>pagename</h1>
　<h2>promoword</h2>
</hgroup>


header要素、hgroup要素は、同じ意味合いのタグで囲まれていれば生成せずに使用することが望ましいとされています。

nav要素

nav要素にはサイト内の誘導するナビゲーション要素が入りますが、
全てのナビゲーション要素をnavタグで囲むことは望ましくありません。
特にグローバルナビゲーションやサイト内検索、ページ内リンクなど、
サイトにとって主要なものに関してはnav要素を使い、
サイトを分割するページャーやブログのタグなど、
優先度の低いものには使用しないとする方がよいとされています。

navタグを使用する際には、この要素がこのサイトにとって主要となるナビゲーションか？
navタグで囲む物がsectionタグ等で梱包できないか？
などを基準にし設置しましょう。

今回はよく使用するHTML5の一部だけのご紹介ですが、
よりサイト内の情報に気をつけてマークアップする事が重要です。

(kazuki)

職業病って怖い

2011-10-12T15:00:00Z

職業を理由に犯罪は起こしちゃいけませんね

普段の生活の中で「このテクスチャ使えるかも！」とバシバシ素材集めができるぐらいの...まずいいカメラを手に入れる事から始めねばいけませんが。

ネットからテクスチャに限らず素材をダウンロードする際は利用規約にご注意を。

（kana）

女子にモテるWebデザイン【3】女子をメロメロにする6つのモチーフ

2011-10-05T15:00:00Z

第1回：ピンクを使いこなそう
http://lab.gpol.co.jp/graine/2011/04/web-1.php

第2回：模様を攻略！ひと味ちがうデザインへ
http://lab.gpol.co.jp/graine/2011/06/web-2-1.php

色、柄の次はモチーフ！
わかっているようで、わからないのが女の子の好きなもの。
女の子好みは千差万別ですが、定番モノがあるんです。
ちょっとしたアクセントに、ぽんっと置くだけで女子向けデザインになっちゃう
定番モチーフを押さえましょう。

1.布・レース

リネンやコットンなどの布、レース、ボタン、刺繍など、お裁縫を連想させるものは、いかにも女の子らしいですね。
ナチュラル指向の女性に人気なのがこれらのモチーフです。

布系

　水玉、花柄、ストライプ柄の布・リネン・帆布

糸系

　毛糸・縫い目・クロスステッチ・あみぐるみ

お裁縫系

　レース・ボタン・まち針・リボン

2.紙・ステーショナリー

雑貨大好き、カフェ大好きな女性に人気なのが、文房具系のモチーフ。
おしゃれな海外文具メーカーのものなら、なお良し。

書く物系

　ペン・鉛筆・インクとつけペン・クレヨン・万年筆

紙系

　ノート・メモ・方眼紙・スケッチブック・段ボール・封筒・タグ

シール系

　セロテープ・マスキングテープ・切手・ラベル

3.オシャレな女の子

かわいいだけでも、美人なだけでもない。
女性は自分のあこがれを投影できるオシャレな同性が大好き。
オシャレな女性の写真があるなら、他に装飾はいらないぐらいです。
女性ファッション雑誌の表紙を見れば言わずもがなですね。
ちなみにこの寝顔がかわいいモデルさんの写真は下記サイトでダウンロードできます。

【フリー写真素材】モデル・人物の写真素材はモデルピース
http://www.modelpiece.com/

4.手描き感

文字やイラストなど、手描き感はかわいさを出すのに最適な味付けです。
一見女性っぽくなさそうな配色、テイストでも、
手書きフォントひとつで女性向けデザインになります。

5.きらきら

これはよく知られていますね。女性はきらきらが好きです。
きらきらの光もそうですが、宝石なんかもきらきら要素に入ります。
なお、きらきらした光の描き方はこちらをどうぞ。

Photoshopできらきらした魔法の光を描く（きらきらブラシ付き）
http://lab.gpol.co.jp/graine/2010/10/photoshop-9.php

6.花

エレガンスにもキュートにも、文字通り華やかにも。
お花はいかにも女性らしいという感じですね。
生花の写真、模様、イラストなど、デザインに取り込みやすい題材です。

他にもいろいろありますが、基本はこんな感じです。
調達するのが大変なモチーフもありますが、最近は女子向け素材集がたくさん発売されているので
購入を検討してみてはいかがでしょうか。
(sayaka)

秋のイメージ作り：商用利用可能なブラシ、ベクターデータ、パターン(Photoshop・Illustrator)

2011-09-28T15:00:00Z

秋にぴったりの商用利用可能な「秋のイメージ作りに役立つブラシ、ベクターデータ、パターン」のご紹介をします。

ブラシ

Fall Leaves

秋のイメージに万能に使える落ち葉のブラシ。
(配布元:brushlovers：Fall Leaves )

Autumn leaves

綺麗な枯葉のブラシ。
(配布元:123freebrushes：Autumn leaves )

ベクターデータ

もみじ紅葉イラスト

紅葉の無料イラストです。
(配布元:emStudio：もみじ紅葉イラスト )

秋のイラスト

すこし汚れているけど赤系の色で温かみのあるパターン7種。
(配布元:Lemon：秋のイラスト )

パターン

inFocus Ad Grungy Fiery Red Seamless Patterns

すこし汚れているけど赤系の色で温かみのあるパターン7種。
(配布元:WEBTREATSets.：inFocus Ad Grungy Fiery Red Seamless Patterns )

Free Exotic Polkadots Photoshop Pattern Set

ランダムな水玉がレトロな印象のパターン。
(配布元:WEBTREATSets.：Free Exotic Polkadots Photoshop Pattern Set )

※ご利用になる前に、利用規約等の確認をお願いいたします。

(megumi)

Photoshopでの画像処理の便利機能

2011-09-14T15:00:00Z

Photoshopでパス抜きや補正・処理などの画像処理を行う時、機能を把握していないとけっこう面倒くさいものですが、Photoshopには便利な機能があるのでそれらを駆使することで簡単に効率良く画像処理を行うことができます。

今回は2つの機能を紹介したいと思います。

１.ヒストリーブラシツール

Photoshopで行う一連の編集作業の内容、作業ごとの画像の状態はヒストリーパレットに記録されており、簡単に一つ前の状態の画像に戻せます。
ヒストリーブラシツールは、ドラッグした軌跡をヒストリーパレットで指定したヒストリーの画像と置き換えるツールです。

■使い方
１、ヒストリーから元となる画像を選択します。
２、ドラッグすると、軌跡に併せてヒストリー画像でペイントされます。

■ツールオプション
・モード：描画モードを切り替えます。
・不透明度：描画色の不透明度を設定します。
・流量：インクの量を設定します。
・エアブラシのアイコン：一点でマウスを押し続けると、エアブラシの様に広がっていきます。

■使用例
今回は空部分を白黒にする前のヒストリー画像でペイントして建物部分を白黒で残し、夕暮れの空の色を強調しました。

２.パッチツール

左のアイコンがパッチツールを表します。
パッチツールを使用すると、傷や汚れなどを自然な画像に修正することが出来ます。
修復ブラシと違う点としては、他の部分の画像で覆う様に隠すという点です。
また、パッチツールでは修復ブラシツール同様、画像の一部を使用するのではなくパターンを使用して塗りつぶすことも出来ます。

■使い方
１、パッチツールを選択します。
２、オプションバーでソースを選択します。
３、修復したい箇所をドラッグして範囲指定します。
４、３で選択した選択範囲を補正元となる綺麗な画像のあるところまでドラッグします。
５、ドラッグ先の画像によって、画像が修復されます。

■使用例
影の部分をソースにしてゴミを削除しました。

(seishi)　　　　　　

クロスブラウザチェックに欠かせない便利ツール

2011-08-31T15:00:00Z

クロスブラウザとは: 「複数のブラウザ上で，正常に動作すること」を意味します。

企業様のサイトでは、まだまだIE6が閲覧対象であったり、
最新の環境でも閲覧できることが必須であったりと、
Web制作においてクロスブラウザのチェックは欠かすことの出来ない重要ポイントです。

最終的には実機での確認となりますが、制作段階でチェックに気を配ることが出来れば、
"チェックバックで大幅な修正をしなければいけない "
という最悪のシナリオも回避できるかもしれません！

そんなわけで、今回はクロスブラウザチェックに心強い、便利なツールを紹介します。

Adobe BrowserLab

adobe社が無償で公開しているサービス。　（利用にはadobe IDでのログインが必要）

現時点で確認できるブラウザ環境は、

■windows: IE(6 ? 9), Firefox(3.0, 3.6, 4.0), Chorome(9, 10)
■OS X : Firefox(3.0, 3.6), Safari(4.0, 5.0)
(2011/5/30 現在)
となっておりメジャーなブラウザはほぼ網羅されています。

インターフェイスもわかりやすくていいです。

プレビュー機能では2画面並べて表示したり、

「オニオンスキン」で重ねて表示させたりすることが可能です。

環境によるズレが比較しながら一目で確認できるので、
表示についてシビアな調整が必要なサイトでは特に重宝します。
レスポンスもよく、何より、Mac OS環境の表示状態が確認できるのがありがたい限り。

現在、私がよく活用するツールです。

※ベーシック認証が必要なサイトはプレビューが出来ませんので、ご注意ください。

Browsershots

非常に多くの環境での表示チェックが出来ます。

スクリーンショットを生成するタイプで、あまり多くの環境をリクエストすると、

結果が出るまでに時間がかかりますのでご注意ください。

IE Tester

IE環境での表示チェックでは有名なソフトですね。

プレビュー機能はもちろん、リンクチェック・JavaSciptも動作するので、
jsで動く部分のチェックもあわせて行うことが出来ます。

今でもIE6対策には欠かせないツールです。

Microsoft Expression Web SuperPreview

こちらはMicrosoftから提供されている、チェックツール。

私は旧バージョンを使用したことがありますが、
開発元が提供している分、動作に安定感を感じました。

今年3月にリリースされた最新版では、オンラインサービス（ベータ）の「リモートブラウザー」を利用することにより、
Mac OS 上の Safari 、「Google Chrome」、「Firefox」でのプレビューも可能とのこと。

試用期限があるものの、機会があれば使ってみたいツールです。

※このソフトは「Microsoft Expression Web 4」に含まれるツールの単体試用版として無償提供されており、
60日間すべての機能を試用できるそうです。
※「リモートブラウザー」は60日間の試用期間のみ利用可能。
※試用期間が過ぎたあともローカルで動作するIE6/7/8を利用したプレビューは可能です。

(Masanori)