ウノウラボ Unoh Labs: Illustratorの小技
はじめまして 3月に入社したデザイナー業務担当のたけぞうです 私はエンジニアの皆さんと違い、絵を描くことを専らとしてきたので グラフィック関連で自分が普段使っている小技を紹介しようと思います 今回はIllustratorの作業効率がちょっとあがる小技です 例えば、上の動物のキャラクターに影をつけようと思います キャラの顔の輪郭部分を選択してCTRL＋Fを押すと まったく同じ位置の上に重なるようにコピペしてくれます 上になったパスの塗りを無くし、線オンリーのパスにします 適当な、元の色より濃い塗りで適当に塗っていきます このままだとキャラの輪郭から大きく外れています 次は先ほどと同じCTRL＋Fでキャラの顔の塗り側のパスをコピペします 2枚になった塗りのパスとはみ出した影の塗りのパスを両方選択し パスファインダの赤丸で囲ったところをクリックすると・・・ キャラの輪郭に沿って、影塗り部分が切り
ロゴを（切り抜かずに）透過する - DTP Transit
支給されたロゴがビットマップのみで、かつ背景が透過されていないといったケースがあります。 トレースしようにも解像度が低くてムリ、こんなときに使えるテクニックをご紹介します。 この記事の元ネタは、CreativeTechs Tips » Isolate a Logo on a Transparent Background.です。 斜体の「背景」レイヤーになっている場合には、レイヤー名をダブルクリックして「レイヤー0」に変更します。 ロゴの透過を確認するための新規レイヤー（レイヤー1）を作成し、適当なカラーで塗りつぶします。「レイヤー1」は「レイヤー0」の下に移動します。 「レイヤー0」のサムネールをダブルクリックして、［レイヤースタイル］ダイアログボックスを表示します。［ブレンド条件］の「このレイヤー」にある白いスライダーを左方向にドラッグします。 「レイヤー0」の白地が透けますが、フリンジ
国旗バッチをPhotoshop（フォトショップ）で作成 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
国旗バッチをフォトショップで作成してみました。理由は新婚旅行で行ったので、その記念です。作成手順掲載します。（あんまり使いどころはないと思いますが…ボタン作成などに応用できるのはないでしょうか…） アメリカ国旗でやってみましょう ネットからアメリカ国旗をちょこっと拝借 日本・イタリア・フランスなどの国旗は自身でも簡単に作れますが、アメリカ国旗を一から作るわけにもいかないので、ネットから借りてきました。 バッチの大きさを設定 楕円形ツールで中央部分を選択し、メニューの選択範囲より、「選択範囲を反転」をクリックします。選択範囲が反転されたらDelキーで周りを削除します。 レイヤー効果を付けていきます（ドロップシャドウ） レイヤー効果を付けていきます（光彩・内側） 。 レイヤー効果を付けていきます（パターンオーバーレイ） 初期設定ではこのパターンはないと思いますので、自作します。パターン定義を以
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
Illustrator：複数のテキストオブジェクトを結合するには - DTP Transit
複数の文字をひとつにしたい場合、イラレで便利さんのテキスト連結(たて並び・よこ並び)を使ってもいいいのですが、Illustratorでは、かなり昔からプリミティブな方法で実現することができます。 合体させたいポイントテキストを選択し、［編集］→［カット］を選択する。 テキストツールに持ち替えて、ドキュメント上でクリックする。 ［編集］→［ペースト］を選択すると、ひとつのテキストオブジェクトになります。フォントやサイズなどの書式情報は保持されます。 文字の順序が意図通りにならない場合には、文字の前後関係を変更してみてください。 Illustrator CSのデータを下位バージョンに保存する際のTips - DTP Transit ポイントテキストを、ひとつのテキストオブジェクトにするには - DTP Transit デモの度にご紹介しているのですが、昨日DTP Booster 010にてご質
ログインフォームとサインアップフォームを一体化するテクニック – creamu
Leah Culver’s Blogで、ログインフォームとサインアップフォームを一体化するテクニックが紹介されています。 ↑の画像を見てもらうとわかるんですが、 メールアドレス（ユーザー名）とパスワードは共通 「I have an account」にチェックを入れると「Log in」ボタンに切り替わり、パスワード忘れのリンクを表示 「I’m new!」にチェックを入れると「Sign up!」ボタンに切り替わり、利用規約へのリンクを表示 といった仕組みになっています。 ログインフォームとサインアップフォームを分けなくていいので、シンプルで使いやすそうですね。 参考に、HurlとAmazonの例が載っています。見てみると、確かにAmazonもこういうインターフェースになっていることに気づきますね。 フォーム作成の参考にしてみてはいかがでしょうか？ Log in or sign up? 昨日はま
Illustrator（イラストレーター）でアクア風ボタンの作り方 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
ボタンのベースを作成 まずボタンの基となる楕円を作成します。（色はお好みで良いと思います。） 拡大・縮小ツールを利用してオブジェクトを生成 楕円を選択し、拡大・縮小ツールをダブルクリックして、ダイアログを表示させます。ダイアログの縦横比を変更より横を90%縦を30%にして「コピー」を選択します。 下準備の完了 手順2で作成したオブジェクトを選択して、Alt+Shiftを押しながらコピーします。これで、ボタンの基となる楕円の中に、長細い楕円が2つ存在している状態になります。（長細い楕円の位置は図のように調整します。） 下の長細いオブジェクトを… 下の細長いオブジェクトを選択し、メニューの「フィルタ」より「カラー」「彩度調整」を選択し、数値を－50%に設定します。 下の細長いオブジェクトと、基となる楕円を選択し、メニューの「オブジェクト」から「ブレンド」作成をクリックします。すると下の楕円がぼ
立体感のあるボタン・バッジを作るPhotoshopチュートリアル40+ – creamu
これもかなり前のエントリーですが、Naldz Graphicsで立体感のあるボタン・バッジを作るPhotoshopチュートリアルが紹介されています。 ざっといくつかご紹介。 ↑はDesign panic button logo icon in photoshop。 How to make a cool button How to Create a Glassy Button or Enamel Badge Effect in Photoshop Photoshop tutorial website pill button icon design in photoshop How to Create a Slick and Clean Button in Photoshop 参考になるチュートリアルがそろっていますね。 その他のリストは以下からどうぞ。 » 40+ Best Photosho
Twitter の壁紙をかわいくしよう！【上級編】 | nanapi[ナナピ]
Twitter の壁紙をかわいくしよう！【上級編】 に関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。Twitter の壁紙を作ってみよう！ ついに上級編になりました。 ここでは、「Design Your Own Twitter Background!」というサイトで Twitter 用に壁紙を自分で作ってみよう！のコーナーになります。 ここでは、ページ全体が一枚の画像になるようなイメージで作ることができます。 「Twitter のタイル張り画像（同じ絵が繰り返される手法）は飽きたぜ！」という方は是非おためしください。 手順 1: 「Design Your Own Twitter Background!」にアクセスします。 2: 『Sign in with Twitter』をクリック 3: 『許可する』をクリック 4: 画像一覧が出てきま
ネットで学べるillustratorチュートリアルサイト集 – creamu
spoon graphicsで、ネットで学べるillustratorチュートリアルサイトがまとまっています。 ざっといくつかご紹介。 » Vectips Ryan Putnamによるブログ。手軽なものからアイコンデザインまで、トップクラスのチュートリアルを公開している » Vectortuts Envatoによるベクターのあらゆることに関する人気サイト。たくさんの著者によって記事が書かれている » Veerle Pieters ベクターを扱うことで有名なVeerle Pietersによるブログ » Vector Diary 単純なシェイプから複雑なイラストを作っていく過程が公開されている » Illustration Info 初心者にもわかりやすいチュートリアル » Learn Ai illustratorに関するサイトを集めて、スキルの上がる情報を配信している 英語サイトですが、画像の
クオリティーの高いデザインアイコンを作るチュートリアル60 – creamu
Creative Nerdsで、クオリティーの高いデザインアイコンを作るチュートリアルが紹介されています。 ざっといくつかご紹介。 » シンプルなコーヒーカップのアイコン » iTunesアイコン » ベクターのRSSアイコン » ディスプレイアイコン » illustratorで作るベクターのSafariアイコン » 透明のバッテリーアイコン » アラームクロックアイコン » Photoshopで作るバンアイコン Photoshop、illustratorのチュートリアルがたくさん揃っていますね。 その他のリストは以下からどうぞ。 » 60 Tutorials Creating High Quality Design Icons 今日はGadgetPartyの打ち上げ。今後のこととかいろいろ話し合いました。登録してくださっているみなさんありがとうございます！ ↓のページのiPhone 3
超クールなJavaScriptプラグイン40 – creamu
nettuts+で、超クールなJavaScriptプラグインがまとまっています。 いくつかご紹介しますね。 » JQuery Validate jQueryによるクライアントサイドのバリデート » PrettyCheckboxes – jQuery FancyFormと似たかわいいチェックボックスを作るjQueryライブラリ » Thickbox 画像だけでなくテキスト等も読み込めるlightbox » FancyBox 超クールなFancybox。画像をすーっと拡大してくれる。デザインがMacライク » Slideshow 2! for MooTools とてもクールなMooToolsによるスライドショー » SmoothGallery こちらも超クールなスライドショー。MooTools v1.11を使用 » DynamicDrive – Carousel Slideshow 3Dに魅せ
光が超カッコいいPhotoshopのブラシ色々まとめ:phpspot開発日誌
光が超カッコいいPhotoshopのブラシを色々とまとめてみました。 次のような、サイトに入れると迫力満点の光のブラシ集です。 Abstract Brushset X - Free Photoshop Brushes at Brusheezy! Abstract Brushset XI | Qbrushes - Photoshop Brushes ABSTRACT BUTTERFLY BRUSHES Abstract Brushes Vol 2 - Free Photoshop Brushes at Brusheezy! Abstract ps brushes for Photoshop | Qbrushes - Photoshop Brushes BRUSHES PACK 3 CS4 BRUSHES ECOL BRUSHES Exclusive - Galactic Brushes -
無料でダウンロードできるPSDファイル50+ – creamu
DESIGNRFIXというサイトで、無料でダウンロードできるPSDファイルがたくさん紹介されています。 いくつかご紹介しますね。 ↑はiMac。 Mighty Mouse iPod nano 5G Pencil PSD rubber stamp icon きちんとレイヤーに分かれているので、デザインの参考になると思います。 その他のリストは以下からどうぞ♪ » Free PSD Files: Collection of 50+ psd files from around the web カフェでまったり、と。連休ももう終わりですね〜。レッドクリフ Part2めちゃおもろかったです。それにしても周瑜の妻は綺麗すぎますね。
WordPressを高速化するテクニック18 – creamu
wpbeginnerで、WordPressを高速化するテクニックが紹介されています。 いくつかご紹介しますね。 ・キャッシュする WP Super Cacheプラグインを使ってページをキャッシュ ・直リンクを禁止する 以下の.htaccessで直リンクを禁止 #disable hotlinking of images with forbidden or custom image option RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC] #RewriteRule \.(gif|jpg)$ %u2013 [F] #RewriteRule \.(gif|jpg)$ http://www.yourdomain
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
