超簡単！Photoshopで写真を今どきのデュオトーンに加工する方法（無料グラデーション収録）
ウェブサイトやグラフィックデザイン、音楽サービス Spotify などで見かけるようになったデザインのひとつが、鮮やかでシンプルな配色の組み合わせが特長のデュオトーン（英: Duotone）です。 デュオトーンとは、２色（Duo）の色合い（Tone）から構成されたデザインを指し、かつて60年代に生まれたポップアートの旗手のひとり、アンディー・ウォーホルの作品が分かりやすいでしょう。 今回は、たった2ステップで手軽にデュオトーンを作成できる Photoshop チュートリアルをご紹介します。また、ダウンロードしてすぐに使える、デュオトーンエフェクトに適した無料グラデーションファイル10個セットも、記事の後半で公開しています。 詳細は以下から。 Photoshopで写真を今どきのデュオトーンに加工する方法 ステップ1: 加工する写真を開こう。 まずはデュオトーン・エフェクトを加えたい写真を P
結婚式の配色はこれだ！参考にしたい美しい色の組み合わせ25個まとめ
結婚式で使われる配色は、お好みの雰囲気を演出することが大切です。またそれだけに限らず、結婚式のフォトフレームのカラーバリエーションや、新郎に似合う背広の色など、細かい配色も考える必要がでてきます。しかし、もっとも重要なのは、選んだ配色が結婚式とうまくマッチしているかどうかです。 配色を選ぶときにもっとも大変なのは、新郎と新婦のように、調和よくバランスを保つことです。今回は、実際にデザインされた結婚式の招待状をモチーフに、美しい配色の組合せ25個をまとめてご紹介します。配色をコピー＆ペーストできる HEX 値もそれぞれ記載しているので、制作の参考にしてみてはいかがでしょう。 詳細は以下から。 結婚式の配色に悩まない！参考にしたい美しい色の組み合わせ25個まとめ 01. Pastel Peach 水彩絵具でペイントした、パステル系のピンク色とみどり色の組合せが美しい配色で、ガーデンスタイルの結
ソーシャルメディアでシェアされるコツは？できるデザインの秘訣11個まとめ
海外サイトBuffer Blogで公開された「11 Simple Design Tips to Enhance Your Social Media Images」の著者Brian Petersより許可をもらい、翻訳転載しています。 Facebook や Twitter への投稿したいポストを保存しておいたり、予約投稿を可能にしたウェブサービス Buffer。実際にオフィス内で活用されている、すぐに実行できるシンプルなデザインの秘訣11個をまとめています。今回はその中でも、特にソーシャルメディアに投稿する写真やデザインに関するテクニックをご紹介します。 これらのテクニックを利用し、ほんのわずかな修正を行うことで、デザインをより魅力的に仕上げることができるでしょう。 コンテンツ目次 配色 / Color バランス / Balance ライン線 / Lines タイポグラフィー / Typogr
これできる？しっかり学ぶ Photoshop のすごいチュートリアル、作り方33個まとめ 2016年8月度
Photoshop の基本操作から各ツールの実践テクニックまで幅広くカバーした、新しいデザインチュートリアルと作り方をまとめています。これから Photoshop をはじめるというひとはもちろん、每日利用しているヘビーユーザーもあまり知らない新テクニックが多数公開されています。 ステップごと順番に進めていくチュートリアル形式なので、各ツールの機能を覚えるだけでなく、より実践で使えるテクニックを覚えることができます。アップデートされた Photoshop CC 2015.5の新機能も一緒に知ることで、デザインスキルをアップさせることができます。 詳細は以下から。 これできる？知っておきたい Photoshop のすごいチュートリアル、作り方まとめ マジカルボトルをつかった圧倒的な風景画をデザインする方法 レイヤーマスクや調整レイヤーを利用し、複数の写真を合成するテクニック。詳細まで表現するR
GIFアニメーション完全ガイド 2016 : 無料ツールによる作り方や使い道、そして重要なワケとは？
海外サイトBuffer Blogで公開された「The Ultimate Guide to GIFs: How to Create Them, When to Use Them and Why They’re Essential for Every Marketer」の著者 Ash Read より許可をもらい、翻訳転載しています。 GIF アニメーションは、とても素晴らしいツールのひとつです。 わたしたち Buffer では、カスタマーサービス用のツイートや Eメール、Slack チャネルなどあらゆるところで使っています。なにかメッセージを伝えたいとき、GIFを利用できるチャンスだと思いましょう。 さらにGIFアニメーションは通常のSNS投稿に比べ、拡散、シェアされやすくなることも分かっています。またメールによるカスタマーサポートデモ、GIFを使って説明することもあります。 今回は、GIFア
新作続々！デザイナーが確認しておきたい、すごいフリーフォント37個まとめ 2016年8月度
毎月公開されたデザイン性の高いフリーフォントのみをピックアップし、まとめてご紹介しています。今回は、2016年8月度のフリーフォントまとめです。 シンプルで使いやすいフォントから、モダンでオシャレな手書きやミニマル書体、2016年に爆発的人気のブラシフォントなど幅広いセレクションを揃えています。商用利用の有無について一緒に記載しています、変更されている可能性もあるので、参照ページを確認するようにしましょう。 詳細は以下から。 新作続々！デザイナーが確認しておきたい、すごいフリーフォントまとめ Aldi Slim Font 第１弾からややスリムになって帰ってきた書体は、Regular と Bold の2ウエイトが収録されています。 ※ 個人、商用利用可能 Gothvetica もともと似ている Gotham と Helvetica フォントを組み合わせた、その名も「ゴスベチカ」。 ※ 個人利
CSS3の新体験！コピペできるテキストエフェクト用HTMLスニペット30個まとめ
すこし前まで文字テキストをデザインするには、Photoshop や Illustratorといったデザインツールを利用していましたが、CSS3の進化によってこれまでは実現がむずかしかったデザインも、コードのみで作成、スタイリングできるようになってきています。 今回は、コピペで利用できるテキストエフェクト用HTMLコードスニペットをまとめてご紹介します。CSS3など新しいテクニックで実現する手軽なテクニックから、ユーザーの注目を集める面白エフェクトまでが揃います。今後のデザインプロジェクトに活用してみてはいかがでしょう。 詳細は以下から。 CSS3の新体験！コピペできるテキストエフェクト用HTMLスニペットまとめ 「Run Pen」をクリックと読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、各スタイリングを確認できま
マテリアルデザインを手軽に！CSS/HTML/JSコンポーネント「Material Design Lite」の使い方まとめ
数日前にGoogleは、マテリアルデザインの考えを取り入れた公式フレームワークフレームワーク「Material Design Lite」を公開しました。マテリアルデザインの見た目や操作性に重点をおいた、CSS，HTML、JavaScriptコンポーネントで、より手軽にウェブサイトやブログ、ランディングページなどを作成することができます。 今回は、Material Design Liteの基本的な使い方と、公開されている素材やテンプレートを、個人的な備忘録としてまとめています。 詳細は以下から。 Material Design Liteの使い方 ダウンロードしたCSS/JavaScriptを、HTMLファイルに読み込むだけでなく、GoogleがCDNホストしているファイルを読み込むことも可能です。 <link rel="stylesheet" href="https://storage.go
集中力アップ！カフェや雨の音など環境音が聴ける作業BGM用サイト11個まとめ
作業に集中したいけど、なかなかできない。誰もが一度はそんな経験があるのではないでしょうか。完全な無音よりも、図書館やカフェなど程よく騒がしい位のほうが集中できたりします。 今回は、カフェのざわつきや焚き火の音、雨の音、小鳥のさえずりなど、自然の環境音を手軽に楽しめるWebサービス10個をまとめてご紹介します。集中力を高めて、作業効率もアップしてみてはいかがでしょう。 詳細は以下から。 集中力アップ、カフェや雨の音など環境音が聴ける作業BGM用サービス10個まとめ Coffitivity クリエイティブな発想にも良い影響を与える、カフェやランチタイム、大学のざわつきを無限ループで流してくれます。再生ボタンと音量調整のついた、シンプルで使いやすいWebサービス。 https://www.coffitivity.com/ Hipster Sound テキサスとパリのカフェの喧騒に合わせて、焚き火
Bootstrap対応ですぐに使える、すごい無料HTMLテンプレート素材まとめ 2016年8月度
サイトの特設ページやランディングページの作成がなかなか進まない。そんなときは、あらかじめデザインデザインや機能を実装したHTML/CSSテンプレート素材を利用することで、制作作業をよりスムーズに進めることができます。 Bootstrap を基準としているのでカスタマイズしやすく、同時にPSDファイルやSassファイルを収録したアイテムも増えているので、プロジェクトに合ったテンプレートを探してみてはいかがでしょう。 詳細は以下から。 Bootstrap対応ですぐに使える、すごい無料HTMLテンプレート素材まとめ 2016年8月度 Rapture ウェブ制作をよりスムーズに行う、プレミアムフレームワークのデモ用として、2種類のランディングページが用意されています。 デモページ1 ダウンロード Forty 複数のコンテンツを色分けし、滑らかなアニメーション付きページ遷移も同時に表現できるマルチペ
Photoshopにも負けない！無料で使える手軽なデザインツール、アプリ20個まとめ
普段利用しているソーシャルメディアのユーザーおよそ40%が、文字テキストだけの投稿に比べて、写真などのイメージを好むそうです。それだけ魅力的なビジュアルが重要になってきているということでしょう。今回は、フォトショップを利用せずデザイン編集作業できるツールやアプリをまとめてご紹介します。 ドラッグ&ドロップの手軽な操作だけでなく、オンラインやスマートフォン端末など Photoshopがインストールされていない環境でも無料で利用できるツールを中心に揃えています。用途に応じて利用してみてはいかがでしょう。 Photoshopにも負けない！無料で使える手軽なデザインツール、アプリ20個まとめ Canva Canva は、オンラインで利用できるもっともシンプルなデザインツールのひとつ。文字やシェイプの追加など直感的に行うことができ、無料で利用できる点もポイント。 料金: 無料、写真のライセンスは$1
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
ウェブデザイン アーカイブ - PhotoshopVIP
ほんのり影がついたようなドロップシャドウは、「浮いている」ような立体感を演出できる、ウェブサイトでは欠かせないデザイン要素のひとつです。 ...
これ使ってる？Photoshopのベスト機能10個と使ってはいけないワースト機能10個まとめ
デザイン編集に欠かせない Photoshop には、さまざまな機能が揃っており、あらゆる作業をよりスムーズにしてくれます。その一方で「これってどうやって使うの？」と思ってしまう、改善が必要な機能があるのも事実です。 今回は、デザイン作業に取り入れたい Photoshop のベスト機能10個と、利用を避けたいワース機能10個をまとめてご紹介します。Web / グラフィックデザイナーとフォトグラファーどちらの作業フローにも関係のある機能をバランスよく揃えています。 詳細は以下から。 Photoshop で積極的につかいたいベスト機能まとめ 01. トーンカーブ機能 写真レタッチを行いたいとき、もっとも手軽なテクニックのひとつと言えるでしょう。メインメニューより「イメージ」>「色調補正」>「トーンカーブ」を選択したら、直感的に波形を編集することができ、赤と緑、青のチャネルごとにいじることも可能な
今どきデザインはこれ！拡散型シャドウの基本から作成方法まで（PSチュートリアル + HTML/CSSスニペット付）
最近ウェブサイトやUIデザインなどを見ていると、ふわりと浮いているような奥行き感を表現しているものがあります。これは拡散型シャドウ（英: Diffuse Shadow）と呼ばれる新しいグラフィックトレンドで、2016年に入って多く見かけるようになっています。 今回は、この拡散型シャドウの基本的な使い方や、PhotoshopやHTML/CSSなどによるさまざまなデザイン方法を、参考にしたいUIデザインと一緒に見ていきましょう。 拡散型ドロップシャドウって何？ 英語でもきちんとした名前はまだ決まっていないようですが、この拡散型シャドウ（英: Diffuse Shadow）と呼ばれるこのテクニックは、通常のドロップシャドウに比べ、奥行き感をより表現できます。フラットデザインから派生したスタイルのひとつとも言え、今のデザイントレンドを反映しています。 Image Source: VOID Conf
レベル高っ！Bootstrap製HTML5/CSS3無料テンプレートを配布するサイト FreeHTML5.Co
カスタマイズしやすいBootstrapフレームワークをベースに、気持ちの良いCSSアニメーションを追加した、高品質HTML5／CSS3テンプレートを配布する、新しいサイト FreeHTML5.Coを今回はご紹介します。 どのテンプレート素材もクオリティーが非常に高く、カスタマイズもしやすく、そのまま運用できるものばかりが揃っています。もちろん、どれも無料でダウンロードでき、あらゆる端末に対応するレスポンシブデザインが特長です。 詳細は以下から。 Bootstrap製HTML5/CSS3無料テンプレートを配布するサイト FreeHTML5.Co FreeHTML5.Coでは、利用しているユーザーも多いHTMLフレームワーク Bootstrapをベースに、デザインのアクセントとなるアニメーションエフェクトを採用した、モダンなHTML5/CSS3テンプレートを無料配布しています。 サイト開設から
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLスニペット アーカイブ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
