グレヌデサ La graine du dessin
Design Graphic

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

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

ブラシ

Fall Leaves
br0901101.jpg
秋のイメージに万能に使える落ち葉のブラシ。
(配布元:brushlovers:Fall Leaves )
Autumn leaves
br0901102.jpg
綺麗な枯葉のブラシ。
(配布元:123freebrushes:Autumn leaves )

ベクターデータ

もみじ紅葉イラスト
ve0901101.jpg
紅葉の無料イラストです。
(配布元:emStudio:もみじ紅葉イラスト )
秋のイラスト
ve0901102.jpg
すこし汚れているけど赤系の色で温かみのあるパターン7種。
(配布元:Lemon:秋のイラスト )

パターン

inFocus Ad Grungy Fiery Red Seamless Patterns
pt0901101.jpg
すこし汚れているけど赤系の色で温かみのあるパターン7種。
(配布元:WEBTREATSets.:inFocus Ad Grungy Fiery Red Seamless Patterns )
Free Exotic Polkadots Photoshop Pattern Set
pt0901102.jpg
ランダムな水玉がレトロな印象のパターン。
(配布元:WEBTREATSets.:Free Exotic Polkadots Photoshop Pattern Set )



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

(megumi)
Graphic

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

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

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

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



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

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

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

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


moto.jpg
moto_2.jpg


2.パッチツール



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

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

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

(seishi)      

Coding Design Web service

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

クロスブラウザとは: 「複数のブラウザ上で,正常に動作すること」を意味します。
企業様のサイトでは、まだまだIE6が閲覧対象であったり、
最新の環境でも閲覧できることが必須であったりと、
Web制作においてクロスブラウザのチェックは欠かすことの出来ない重要ポイントです。
 
最終的には実機での確認となりますが、制作段階でチェックに気を配ることが出来れば、
"チェックバックで大幅な修正をしなければいけない "
という最悪のシナリオも回避できるかもしれません!
 
そんなわけで、今回はクロスブラウザチェックに心強い、便利なツールを紹介します。
 

Adobe BrowserLab

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

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

■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画面並べて表示したり、
adobe02.jpg

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

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

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

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


Browsershots

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

スクリーンショットを生成するタイプで、あまり多くの環境をリクエストすると、
bs2.jpg
結果が出るまでに時間がかかりますのでご注意ください。


IE Tester

ietester.jpg
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)

Coding

MTカスタマイズ カスタムフィールドの検索

MT4から追加された機能に、カスタムフィールドという独自の入力項目を追加できる便利な機能があります。
ですが検索フォームを使ってカスタムフィールドの値を検索できませんでした。
今回はそれに加えて、カテゴリ検索のAnd検索をする方法を紹介します。
※下記はMT5での解説となります。


11604_01.jpg
こんな感じのAnd検索が可能です


1.プラグインを追加する

まずTechnology on Informationさんのプラグインを利用します。
それぞれダウンロードしてインストールしてください。
■カスタムフィールドの内容を対象にして検索:CustomFieldsSearch
■カテゴリー情報による検索:CategorySearch

どちらも修正BSDライセンスですが、これはかなり緩いライセンス形態で、商用利用も改変もしてよいですが、かわりに無保証で著作権の表示が必要というライセンスです。
ソースの上部に著作権表示しておけばOKじゃないでしょうか。


2.ソースを作成する



○カスタムフィールドサーチを有効にするかどうか。
value="1" これでカスタムフィールド検索が有効になります。
<input type="hidden" name="CustomFieldsSearch" value="1" />

○検索対象を指定します。
value="entry"でブログ記事が検索対象になります。 
value="page"でウェブページが検索対象になります。 
<input type="hidden" name="CustomFieldsSearchClassType" value="entry" />

○カスタムフィールドでないカラムを無視する場合に指定します。
これにより余計な検索をせずに若干結果表示が速くなります。
<input type="hidden" name="CustomFieldsSearchIgnore" value="EntryTitle" />
<input type="hidden" name="CustomFieldsSearchIgnore" value="EntryBody" />
<input type="hidden" name="CustomFieldsSearchIgnore" value="EntryMore" />
<input type="hidden" name="CustomFieldsSearchIgnore" value="EntryKeywords" />

○カテゴリサーチを有効にするかどうか。
value="1" でカテゴリ検索が有効になります。
<input type="hidden" name="CategorySearch" value="1" />
<input type="hidden" name="CategorySearchSets" value="1" /> 

○カスタムフィールド検索
指定したキーと値で絞込みを行います(value="カスタムフィールドタグ:○○○")
<select name="CustomFieldsSearchFieldLike">
<option selected="selected">▼エリアを選んでください</option>
<option value="area:北海道">北海道</option>
<option value="area:青森県">青森県</option>
<option value="area:岩手県">岩手県</option>

○カテゴリ検索
カテゴリ選択用がプルダウンの場合は
「select name="1"」に設定すれば有効になるみたいです。
<select name="1" id="select_category">
(takanosuke)
Other

出っ歯はステータスやで

kana_20110530.jpg


出っ歯君は欲望に忠実です。


ここ数年でさまざまな展開を見せているARですが、セカイカメラなんかが有名ですね。

WikipediaではAR(拡張現実)は下記のように定義されています。

拡張現実(かくちょうげんじつ)とは、現実環境にコンピュータを用いて情報を付加提示する技術、および情報を付加提示された環境そのものを指す言葉。
引用元:Wikipedia - 「拡張現実」項目


世界を変えてしまうのではなく、少しだけ加えて、楽しくべんりにする。それがARのいいところ。
少し前に、ARを使ったこんなサービスがリリースされました。



これは「Zoff Mirror」というメガネ試着サービスで、カメラのついているPCなら無料ソフトをインストールすることで利用できます。
家にいながら、メガネを取っかえ引っかえ試着して購入までできてしまいます。


そのうち、出っ歯を試着出来る日も来るかも?


(kana)

Coding Web service

実務で使える便利なCSS3ジェネレーター5種

スマートフォンの利用者が増加するにつれ、HTML5とCSS3のコーディングもより身近になってきましたが
CSS3のプロパティは指定する箇所やコードが非常に多く視覚的にも判断しにくいのが難点。
そんな時に便利な、見て、いじって、実務に導入できるCSS3ジェネレーター5種類を紹介します。


Layer Styles


Layer Styles
http://www.layerstyles.org/

Layer StylesはPhotoshopライクなCSS3ジェネレーターです。
使い方はまさにPhotoshopのレイヤー効果と同じで、
スタイルの数値を変更するだけでボックスに指定した効果が適用されます。
最後に左下にある『CSS Code』のボタンをクリックすると、
現在表示されているボックスに適用されているコードが生成されます。

生成可能CSS3:
border-radius, background-image, box-shadow


CSS3プロパティジェネレーター


CSS3プロパティジェネレーター
http://css-eblog.com/eblog_sample/0912/css3-generator/

CSS3プロパティジェネレーターは全て日本語表記なので、英語が苦手な方にも扱いやすくなっています。
こちらも使い方はPhotoshop等のグラフィックソフトと操作方法が同じなので、感覚的に操作できます。
また、このジェネレーターはIE6向けのfilterも出力できるのでIE6も指定ブラウザであるときは便利です。

生成可能CSS3:
border-radius, background-image, box-shadow, text-shadow


CSS3 Playground by Mike Plate


CSS3 Playground by Mike Plate
http://css3.mikeplate.com/

CSS3 Playgroundはボックスをレイヤー化でき、複数枚重ねてグラフィックを作れる様になっています。
ボックスを追加する場合は、右上の緑の+ボタン、削除する場合は赤のXボタンをクリックするだけです。
惜しいのは、複数ボックスを生成した場合、選択しているボックスしかコードがコピー出来ないところです。

生成可能CSS3:
border-radius, background-image, box-shadow, text-shadow, transform, column-count


CSS3.0 Maker


CSS3.0 Maker
http://www.css3maker.com/

CSS3.0 Makerはアニメーションの指定まででき、Transitionの中にあるTransition Timingで動きの速度が変更できます。
また、通常状態かホバー状態か設定できるセレクトボックスが用意されているので、
アニメーションつきの少し凝ったナビゲーションを作りたい時に最適です。

生成可能CSS3:
background-image, background-image, box-shadow, text-shadow, transform, outline-style


Ultimate CSS Gradient Generator


Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generatorはグラデーション作成に特化したできるジェネレーターです。
自分が作ったグラデーションを保存することができるので、頻繁に使うものやストックしておきたい時に便利です。

生成可能CSS3:
background-image


使用頻度が高くなりそうなCSS3のジェネレーターは色々あるので、
上手く使えば効率よく一歩進んだコーディングが出来るのではないでしょうか。


(kazuki)

New Entries
1  2  3  4  5  6  7  8  9  10  11

Webトレンド情報局とは

クリエイティブグループスタッフがお送りする、Webデザイナーのための知識とTIPS。 PhotoShopの便利な豆知識や、CSSのお困り解決、デザイン概論などなど。
【隔週木曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive