Photoshopで水彩風イラストを描いてみよう！ | SONICMOOV LAB
※【「滲み」が描ける水彩ブラシの作り方】の手法につきましてのお詫び 当記事にてご紹介しております手法は、他サイトに掲載されている手法を基に設定数値をアレンジ、ナビゲートしたもので、参考記事としてのご紹介並びにURLを明記をしておらず、執筆者の方及び読者の皆様には多大なるご迷惑をお掛けいたしました。ここにお詫び申し上げ、参考記事としてご紹介させていただきます。 ▼参考記事 【フォトショ】水彩風テクスチャをつくる【講座】 ********************************************************** こんにちは！イラストレーターのあんみです。 私は趣味で水彩画を描いているのですが、描く度に絵の具やパレット、バケツなど色々な道具の準備と片付けがちょっと面倒だと思うことがあります(・・；) そんなときデジタルで水彩画が描けたら楽ですよね・・・！ こちらのイラス
単調な背景にノイズをのせて繊細なテクスチャにするチュートリアル
Photoshopの標準機能だけを使って3ステップで、単調なベタ塗りの背景にノイズをのせて繊細なテクスチャにするチュートリアルを紹介します。 Noise Texture in Photoshop 左：ベタ塗り、右：ノイズ有り 下記は各ポイントを意訳したものです。 1. ベースのレイヤーを作成 新規ファイルを作成し、新しいレイヤーを作ります。そのレイヤーにベースとなるカラーを塗ってください。下記は暗いグレー「#272727（原文：142e51）」にしています。 2. ノイズのレイヤーを作成 さらに新しいレイヤーを作成し、ホワイト（#ffffff）で塗ります。[フィルタ]-[ノイズ]-[ノイズを加える]を選択し、量を「15%（原文：25%）」にして「OK」ボタンをクリックします。
ウェブデザインにおけるテクスチャやパターンの使い方をしっかり学びたい人用のまとめ
当サイトでもテクスチャやパターンなどを素材として紹介しますが、ダウンロードして満足するだけでなく、どのように使うかが大切です。 テクスチャやパターンを効果的に使った実例を見ながら、その使い方を紹介します。 The What, Why and How of Textures in Web Design 下記は各ポイントを意訳したものです。 1. ノイズのテクスチャ 2. リアルにするためのテクスチャ 3. ビジュアル効果を与えるテクスチャ 4. トーンや印象を明確にするテクスチャ 5. シンプルなピクセルパターンの繰り返し 6. 大きなインパクトを与えるパターン 1. ノイズのテクスチャ ノイズのテクスチャは最近のウェブデザインでとても人気があります。これは背景からボタンまで、あらゆるデザインほとんどのエレメントにマッチします。 ノイズの使い方は使う場所に依存しますが、良いノイズというのはぱ
CSS3でシャレオツなリストを作るチュートリアル:phpspot開発日誌
CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー
Photoshopの作業効率をアップする10のTips
Photoshopの作業効率をアップする、知ってると便利な10のTipsをBest Design Optionsから紹介します。 Tips 「レイヤーパレット」の「目(レイヤーの表示/非表示)」を[Alt]キーを押しながらクリックすると、そのレイヤーだけを表示状態にし、残り全部を非表示にします。 元に戻す際は、同様に[Alt]キーを押しながら「目のアイコン」をクリックします。 2. Hide the palettes パレットを１アクションで全て隠します。
Spoon Graphics
Text Portrait Effect in Photoshop This text portrait effect is known as a Calligram. It’s where a passage of text bends and warps around the contours of the subject’s face. This effect is particularly powerful when used to present famous speeches by depicting the orator through their words. The process uses just a small selection of Photoshop’s tools, with the Displace filter and a clipping mask b
40 Free Social Media Icon Sets
1. New Social Media Icon Set This icon set contains 25 scalable vectors complete with semi-transparent shadows for use on various types of backgrounds. The download contains a .zip file with the original .ai file and an .eps version as well. 2. Free Stained and Faded Social Media Icons This icon set includes 20 more stained social media icons for use in your grungy site designs. 3. Socialis This i
Webデザイン。イラレは出来る子。フォトショなんかに負けないもん。 - フリーでWebデザインとかやってる紳士。
2015年7月11日、追記。このページ、いまだによくアクセスされているようですが、その全員が「なんだよ2011年の記事かよ、クソが！」と不信感を抱くことと存じます。あらためて確認しますと、CC2015でも通用する内容ですのでクソとかいわずにご一読ください。 本編ここから釣り気味のタイトルですみません。中身も釣りなのでご査収のほどよろしくお願いいたします。さて、この記事↓にリスペクトかつインスパイアされ、勢いで記事投下してみる。 Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ Webデザインをするにあたって、巷ではPhotoshopを使う人が多いようなのだが、ベクターデータの軽快さや自由自在の拡大縮小の便利さもあって、私はIllustratorを使っているため、日頃から虐げられている。ことWebに関しては、Photoshopがたけのこの里なら、Illustra
光源や１ピクのラインや透過を使ったウェブレイアウトのPhotoshopのチュートリアル集
光源やライトやシャドウ、グラデーション、1pxのライン、透過などを巧みに使用したウェブレイアウトのPhotoshopのチュートリアルを紹介します。
均一で単調なシャドウから卒業するPhotoshopのチュートリアル
均一で単調なシャドウではなく、大きさや不透明度を調整して奥行きのあるシャドウを描くPhotoshopのチュートリアルを紹介します。 Warping Drop Shadows to Give Depth 下記はそのチュートリアルを元に意訳したものです。 Photoshopの標準機能だけで簡単に作成ができます。 Step 1 まずは準備をします。 下記の例では、白い背景と紙のテクスチャを用意しました。 Step 2 シャドウの元になる矩形を描きます。 背景とテクスチャの間に新規レイヤーを作成（Ctrl+Shift+Alt+[N]）します。選択ツール[M]で長方形ツールを選択し、実体の下の方にやや小さめに矩形を選択します。塗りつぶしツール[G]を使用して、選択範囲を黒（#000000）で塗りつぶします。 シャドウの形は後のステップで整形するので、適当で構いません。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか
iPhoneやAndroidなどのスマートフォン、「新しいiPad」などのタブレット、そしてデスクトップなど、さまざまなデバイスの幅に対応させるResponsive Web Designのために、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのか3つの方法を紹介します。 各デバイスの幅は、2012年3月のデータです。 A Simple Device Diagram for Responsive Design Planning [ad#ad-2] 下記は各ポイントを意訳したものです。 キャプチャに使用している画像は元記事よりPSDファイルでダウンロードできます。 各デバイスのサイズ レイアウトを3つ レイアウトを4つ レイアウトを6つ 各デバイスのサイズ まずは、2012年3月現在の各デバイスの幅です。 ※クリックで拡大 ポイント 上段：ポートレイト（縦置き）、下段：ランドスケ
[CSS]ホバー時のエフェクトに一工夫、リボン風デザインのナビゲーション
画像を一切使用せず、CSS3や擬似要素を使ったリボン風デザインのナビゲーションを実装するチュートリアルを紹介します。 CSS Ribbon Menu [ad#ad-2] デモ 実装 デモ デモはCSS3アニメーションに対応したブラウザ、Chrome, Safari, Firefoxでご覧ください。 CSS3アニメーション非対応のIE8/9ではアニメーション無し、擬似要素非対応のIE7ではリボン無しになります。 デモページ [ad#ad-2] 実装 HTML HTMLはシンプルで、各アイテムをspan要素で実装し、全体をdiv要素で内包します。 <div class='ribbon'> <a href='#'><span>Home</span></a> <a href='#'><span>About</span></a> <a href='#'><span>Services</span></
女子にモテるWebデザイン 【3】 女子をメロメロにする6つのモチーフ | グレヌデサ La graine du dessin
第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.布・レース リネンやコットンなどの布、レース、ボタン、刺繍など、お裁縫を連想させるものは、いかにも女の子らしいですね。 ナチュラル指向の女性に人気なのがこれらのモチーフです。 布系 水玉、花柄、ストライプ柄の布・リネン・帆布 糸系 毛糸・縫い目・クロスステッチ・あみぐるみ お裁縫系 レース・
[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル
画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
テクスチャとグラデーションで質感のある背景を作ろう - DesignWalker
写真がめくれた感じを表現する | DesignWalker
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP