Beautiful Watercolor Effect Tutorial and Photoshop Brushes
2014年3月6日 Photoshop, Webデザイン 水彩画っていいですよね。なんだかほんわかした雰囲気が大好きです。ということで今回はPhotoshop CS5を使って画像を水彩画風に加工する方法と、便利なPhotoshopブラシ、水彩画風デザインのWebサイトを紹介します。デザインの参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 写真を水彩画風に加工する方法 また動画撮ってみました。ただでさえ時間かかってないのに、４倍速にしたら30秒くらいになっちゃいました。簡単なのでぜひ試してみてくださいね！ 1. ぼかし 画像を開いて、そのレイヤーを複製します（コマンド＋J）。 複製したレイヤーを「blur」にレイヤー名を変更します。 フィルター > ぼかし > ぼかし（詳細）で、「半径」を10、「しきい値」を25〜30に設定します。 2. エッジの光彩 元の画像レイヤーを
Photoshopのキラーチュートリアル30個
Photoshopはあらゆるところで使われており、だからこそ山のように使い方を解説したチュートリアルがあるわけですが、その中でも特に「これは！」と思われるようなキラーチュートリアル30個です。 30 Killer Free Photoshop Tutorials http://slodive.com/photoshop/free-photoshop-tutorials/ ◆1：ダーク・フォト・マニピュレーション「ヴァンパイアハンター」（光と影をうまく操作するためのレタッチ・カラー調整・レイヤーの操作が分かる） ◆2：魅力的なオウムの写真操作（動物の写真を抽象的かつインパクトのある画像に加工するレイヤー操作方法） ◆3：Photoshopで手描き風イラスト ◆4：雰囲気のある風景に加工する（レイヤーとテクスチャを駆使してそれっぽくする） ◆5：水であふれて見るものを不安にさせるシーン作り（2
illustrato、ベジェ曲線練習法
HOME>Design>Illustrator初心者の方へ送る、ベジェ曲線を描く際知っておくと便利なことと練習法（サンプルテキストもあるよ） ご存知のない方やお忘れの方も多いかもしれませんが、私、本職は一応グラフィックデザイナーなのです。 毎日IllustratorやPhotoshop、InDesignと言ったアプリケーションに触れているわけで、まぁ人並みにはそれらのソフトを使えるわけですよ。 で。 先日TL上で、ウェビメモの@xxmiz0rexx さん、Moon Blackの@tsuki_kuro さんとIllustratorの話をしてたのです。半裸で。 [blackbirdpie url=”http://twitter.com/#!/xxmiz0rexx/status/62715027605557249″] ベジェが苦手とのたまう女子 [blackbirdpie url=”http:/
配置をマスターして「機能するレイアウト」を作る大切なポイント
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
継ぎ目のない背景画像を作成するPhotoshopのチュートリアル | コリス
Photoshop初心者でも簡単に作成できる、ウェブページの背景に利用する継ぎ目のないシームレスな画像を作成するチュートリアルをDesign Shackから紹介します。 Create Seamless Web Background Textures in Minutes 写真の「ぼけ」のようなエフェクトをオリジナルで描き、その画像を元に継ぎ目のないシームレスな画像にします。 下記は、各ポイントを意訳したものです。 Step 1: 新規作成 Photoshopを起動して[ファイル]-[新規]を選択し、ファイルを新規作成します。 設定は、幅：800px、高さ：800px、解像度：72pixel/inch、カラーモード：RGBカラーにします。 新規作成の設定画面 次に、カンバスを「#80ac4b」で塗ります。 [Ctrl]+[A]でカンバスのすべてを選択し、カラーピッカーに「#80ac4b」を指
グラデーションを使用しないでウェブデザインをする方法
なんとなくグラデーションを使用したり、困ったらグラデーションを使用したり、トレンドだからグラデーションを使用したりしていませんか？ グラデーションを使用しないでデザインする方法をBuild Internet!から紹介します。また、グラデーションをより効果的に必然として使用するためのエントリーでもあります。 多くのウェブデザインのブログで周期的にページデザインのPhotoshopのチュートリアルを紹介しています。これらは素晴らしいウェブページを作成するためにグラデーションベースのデザインが一般的であるというおかしな印象を与えてしまいました。こういった記事を書く我々は間違って解釈されてしまう記事を書いたという罪があります。 ウェブデザインはデザイントレンドがどれだけ含まれているかのチェックリストではありません。何を使用するにしても、何をやめて何をアレンジするか学ぶ必要があります。 WeFunc
光を効果的に使用したPhotoshopのチュートリアル集：Part 15
光、光源、光線、光跡を効果的に使用したPhotoshopのチュートリアル集のPart 15です。 Abstract Glowing Background Light and Glow Effect A
[CSS]コンテンツとサイドバーの高さを同じにするスタイルシート
サイドバーがコンテンツの高さと異なる際に、コンテンツと同じ高さのように見せるスタイルシートをwoork upから紹介します。 Really simple CSS trick for equal height columns 仕組みの概要は、コンテンツの右のボーダーを200pxにし、その上にサイドバーを表示して、サイドバーの高さをコンテンツと同じように見せるものです。 HTMLは、コンテンツとサイドバーのdiv要素を内包するdiv要素（wrapper）を配置します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <div id="maincontent">...</div> <div id="sidebar">...</div> </div> </textarea>
ロゴに関する情報まとめ・チュートリアルとかギャラリーとかツールとか
ロゴの作成に困った時に役立ちそうだな、と思ってローカル環境にまとめていたロゴデザインに関するリンク集です。連休前なので時間が出来る方も多いかと思ったので公開してみます。 まとめ方は結構中途半端です。 インスピレーションLogoPondcreatticaLogoFavesLogoSauceLogo Of The Day / 日替わりでロゴを紹介Logospire / ロゴを作成して投稿し、評価し合うWoldaLogoMoose.comLogofiLogoGala / 美しいロゴのデータベースLogo From Dreams Awards / ロゴを厳選して紹介Logo GalleriaLogo Ideas Gallery Photoshop & IllustratorHow to make an awesome logo素材を生かしたロゴの作成 Photoshop create crest
続：PNG画像をより美しく、より軽量に最適化するテクニック | コリス
上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード：[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し（半透明は削除）、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン
光を効果的に使用したPhotoshopのチュートリアル集：Part 13
光、光源、光線、光跡を効果的に使用したPhotoshopのチュートリアル集のPart 13です。 Michael Jackson Wallpaper Soul Rebel Poster Tutoria
Illustratorの基本的なエフェクト集 | コリス
Illustratorの基本的だけど、マスターしておきたい効果的なエフェクトをWeb Designer Wallから紹介します。 Mastering Illustrator Effects 以下、各ポイントをピックアップしたものです。 上記サイトではチュートリアルのAIファイルもダウンロードできます。 間のびしない矢じり 角丸を素早く綺麗に描く 正確なジグザクのライン オブジェクトの収縮と膨張 変形のエフェクト ラフにするエフェクト 落書き風のエフェクト Illustratorのエフェクトを使用時のTips 間のびしない矢じり [効果]-[スタイライズ]-[矢印にする]で矢印のエフェクトを使用できます。
ソースファイル付き！Flashで作るフォトギャラリーチュートリアル10選
WEB制作の要素の中の一つフォトギャラリー。制作しているWEBサイトのジャンルによっては、作らない場合も多いのですが、WEB制作されている方々だと作る機会も比較的多いものだと思います。今日紹介するのはそんな時に役立つFLASHで作るフォトギャラリーのチュートリアル「10 Sleek and Professional Flash Image Gallery Tutorials」です。 Papervision 3D Flash Gallery Tutorial 全部で10個のFLASHによるチュートリアルが収録されていますが、今日はその中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■Build a Dynamic Flash Gallery with Slider Control スライダーで操作するフォトギャラリー、動きもなめらかです。 View Demo » ■Mac
Photoshopの作業効率をアップする10のTips
Photoshopの作業効率をアップする、知ってると便利な10のTipsをBest Design Optionsから紹介します。 Tips 「レイヤーパレット」の「目(レイヤーの表示/非表示)」を[Alt]キーを押しながらクリックすると、そのレイヤーだけを表示状態にし、残り全部を非表示にします。 元に戻す際は、同様に[Alt]キーを押しながら「目のアイコン」をクリックします。 2. Hide the palettes パレットを１アクションで全て隠します。
Photoshop初心者でもきっとできる、スタイリッシュなボタンとバナーの詳細なチュートリアル
1ステップずつ詳細に解説された、Photoshopでスタイリッシュなボタンとバナーを作成するチュートリアルを紹介します。
jQueryやPHPを使った便利な仕組みのチュートリアル集:phpspot開発日誌
9lessons: jQuery and Ajax best 9lessons. jQueryやPHPを使った便利な仕組みのチュートリアル集。 9lessonsというサイトがあって色々便利な仕組みのチュートリアルが公開されています。 Twitter Like More Button with jQuery and Ajax. 「もっと読む」をajaxで実現するサンプル Exactly Twitter like Follow and Remove buttons with jQuery and Ajax Twitter風のフォロー、削除ボタンを実現するサンプル Delete a Record with animation fade-out effect using jQuery and Ajax. 行を削除してフェードアウトアニメーションをさせるサンプル jQuery Username Av
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Photoshop VIP
http://www.designwalker.com/2009/06/flash-effect.html
http://www.designwalker.com/2009/05/illustrator-text-effect.html
