当サイトでこれまでに投稿したエントリーから、Photoshopの基本操作から各ツールの実践的な使い方やテクニックまで、入門者必修の機能を中心にまとめています。これからフォトショップをはじめる人が目を通しておきたいエントリーとなっています。 あらゆるデザインの現場で使われているフォトショップは、豊富に揃った機能がゆえに新しくはじめようという人には敷居が高く感じるかもしれません。ここでは、覚えておきたい定番の使い方から、制作スピードが早くなるプロ便利技を機能や用途に応じて詳しく見ていきましょう。
Photoshopをしっかり学ぶ、入門デザインテクニック集めました。
当サイトでこれまでに投稿したエントリーから、Photoshopの基本操作から各ツールの実践的な使い方やテクニックまで、入門者必修の機能を中心にまとめています。これからフォトショップをはじめる人が目を通しておきたいエントリーとなっています。 あらゆるデザインの現場で使われているフォトショップは、豊富に揃った機能がゆえに新しくはじめようという人には敷居が高く感じるかもしれません。ここでは、覚えておきたい定番の使い方から、制作スピードが早くなるプロ便利技を機能や用途に応じて詳しく見ていきましょう。
数字が美しい書体選びの秘訣とは？すぐに使える Google フォント20個まとめ付
「数字」にフォーカスを当て、書体の選びかたやデザインの秘訣ガイドラインを学びながら、実際に使えるフリーフォント素材20個をまとめてご紹介します。 数字デザインを選ぶときの原則事項 著者 Samantha Zhang の働く Graphiq では、データ表やチャート、インフォグラフィクスなど、細かい数字をいつもたくさん扱っています。データの視覚化では、 ほとんどのデータで Helvetica（ヘルベチカ）書体を利用していますが、フォントを選ぶときのガイドラインがいくつあります。 1. ライニングと等幅ライニング数字を選ぼう。 まずよい数字フォントを選ぶコツとして、ライニングまたは等幅ライニング数字かどうか確認しましょう。 ライニング数字（英: Lining Figures）とは、ベースライン（英: Base Line）とキャップ・ハイト（英: Cap Height）の高さが揃っていることを指
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
コピペで実装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 画面を２分割し、スク
日本語フリーフォント、これだけは持っておきたい厳選22個まとめ
日本中の書体デザイナーさんの努力によって、素敵な日本語フリーフォントが数多く公開されるようになったいま、複数の書体をインストールしているひとも多いでしょう。しかしデザインのとき、いつも同じ書体ばかり使ってしまう、という人もいませんか？ 公開されているフォントの数が増えたことで、どれも利用してよいか悩んでしまうこともしばしば。特に、デザインコンセプトにあった、商用利用にも対応できる素材を探すのは、時間のかかる作業のひとつかもしれません。 今回は、無料ダウンロード可能で、商用ライセンスにも対応した日本語フリーフォントという条件で、幅広いデザインに利用できる、万能アイテムのみをまとめてご紹介します。
ほんの数クリックで完成！文字をかっこよくするPSテキストエフェクトまとめ
Photoshopを利用し、短時間で手軽に、みんながあっと驚く高品質なデザインを作成する方法はいくつかあります。 そのなかでも、文字を挿入し、ボタンを数クリックするだけで、見違えるほど魅力的にするテキストエフェクトは、グラフィックデザインにぜひ活用したい素材です。今回は参考にしたい PSD ファイルを、ファイルの基本的な使い方、カスタマイズ方法と一緒にご紹介します。 詳細は以下から。 ファイルの編集、カスタマイズ方法 では実際にファイルをダウンロードし、どのように編集するのか具体的に見ていきましょう。今回はデモとして以下のファイルを利用しています。 Molten Text Effect – DealJumbo まずPhotoshopでファイルを開き、レイヤーパネルを確認します。パネルの一番上に配置された、サムネイルの右下にアイコンが表示されているレイヤーは、スマートオブジェクトレイヤーであ
商用OK多数！使いやすい万能フリーフォント最新コレクション 2016年5月度
デザインに利用するフォント書体によって、雰囲気や仕上がりはがらりと変わってきます。しかし、目的にあったフォントを見つけるのに、困ってしまうこともしばしば。今回は、どんなデザインにも合わせやすく、使いやすいフリーフォント素材をまとめました。 スタイル数の豊富な書体はもちろん、デザインを選ばずに利用できる万能アイテムを中心に揃えており、多くの素材は商用利用にも対応しています。お気に入りの書体を見つけて、コレクションに追加してみてはいかがでしょう。 詳細は以下から。 商用OK多数！使いやすい万能フリーフォント最新コレクション 2016年5月度 なごみ極細ゴシックフォント 今回特に注目のアイテムで、モダンで直線的な漢字のデザイン。そして、それとは対照的に懐が狭くオールドスタイルなかな文字のデザイン。2つの特徴が見事に生かされています。 ※ 個人、商用利用可能 Muller Narrow やや縦長の
デザインに自信がない人も大丈夫！無料UIキットでWeb制作スピードをアップしよう。
ウェブサイトのデザインが決まらないときは、PhotoshopやSketchで編集できる、UIコンポーネントやPSDテンプレートを活用してみましょう。アイデアを形にしやすくし、写真や文字テキストを編集するだけ手軽にデザインを完成させることができます。 今回は、2016年のデザイントレンドを盛り込んだ、無料ダウンロードできる UI コンポーネントや PSD テンプレート素材をまとめてご紹介します。本格的にデザインをはじめる前のモックアップやワイヤーフレームとしても活用できるアイテムを中心に揃えています。 詳細は以下から。 Web制作スピードをアップする、無料UIコンポーネント、PSDレイアウト素材まとめ Chat UI Kit ミニマルなレイアウトに、カラフルな配色を活用したUIコンポーネントは、Photoshop と Sketch 用ファイルがそれぞれ用意されています。 Carbon Mat
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
Fancy Button 2016年を代表する鮮やかな配色に、オーバー気味のドロップシャドウが美しい、ボタン・ホバー用エフェクト。 See the Pen Fancy Button by Mohsen Khakbiz (@Mohsen-Khakbiz) on CodePen. Big Fancy 3D Rotating SVG Button マウスホバーに合わせて、立体的に回転します。 See the Pen Big Fancy 3D Rotating SVG Button by J Scott Smith (@jscottsmith) on CodePen. Blue Light Button 青白く光る文字テキストや、放射線上に広がるライティングが魅力的なホバーエフェクト。 See the Pen Blue light button by Toshiyuki TAKAHASHI (@g
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
Google Web フォント完全ガイド！使い方や 参考にしたいサンプル例まとめました。
どんなデザインにおいても、ただしいフォント選びが成功の鍵となります。見た目だけでなく、読みやすさも考えながら、フォントの組み合わせを考えるのに悩んでしまうこともしばしばです。 フォントの組み合わせについては、これまでにもいくつか（1/２/３）の記事を紹介していますが、今回は、Google Web フォントを利用した、実用的でデザインも美しいサンプル例をまとめています。 目次 Google フォントとは？ Google フォントの実装方法 実用で使える、Google フォントの組み合わせ パート１ 実用で使える、Google フォントの組み合わせ パート2 Google Web フォントを見つけやすくする Font Library Google 謹製、日本語 Web フォント「Noto Sans Japanese」 Google Font とは? 通常、ブラウザで表示できるフォントは、ユーザ
ビンテージデザインに合わせやすい、筆記体フリーフォント素材まとめ
海外デザインブログBlog.SpoonGraphicsで、ビンテージデザインに合わせやすい、筆記体フリーフォント素材をまとめたエントリー「The Best Free Script Fonts for Creating Vintage Logos」が公開されていたので、今回はご紹介します。 これまでにご紹介した素材が中心となりますが、レトロロゴデザインを作成するときなどに便利なアイテムを中心にまとめています。また多くのフォントが、個人利用だけでなく、商用利用も可能となっている点もポイントとなります。 詳細は以下から。 ビンテージデザインに合わせやすい、筆記体フリーフォント素材まとめ Engagement Font ※ 個人、商用利用可能 Honey Script ※ 個人、商用利用可能 Grand Hotel ※ 個人、商用利用可能 Lavanderia ※ 個人、商用利用可能（寄付希望）
デザイナーの宝箱！商用可、1000個の限定デザイン素材 The Creative Designer’s Colossal Treasure Chest
デザイナーの宝箱！商用可、1000個の限定デザイン素材 The Creative Designer’s Colossal Treasure Chest 「デザインをもっとクリエイティブに、目立つように美しく作成したい。」そんなデザイナーのわがままに応えてくれる、期間限定のプレミアムデザイン素材セット The Creative Designer’s Colossal Treasure Chest を今回はご紹介します。 人気デザイナーが多数参加した、抜群のクオリティーはもちろん、1000種類を超える素材の数に加え、クライアント案件にも対応できる、商用ライセンス付き素材が揃います。通常は総額$2,200（およそ24万円）の99%オフ、$29（およそ3,100円）というとてもお得な価格。2週間限定となっているので、お早めにどうぞ。 詳細は以下から。 クリエイティブなデザイナーに！世界基準のデザイ
手描きイラストや水彩ペイントに強い、すごい無料Photoshopブラシ素材まとめ
デザイナーがより幅広いアイデアを表現したいとき、もっとよく利用されるツールのひとつがブラシ素材です。今回ご紹介する、新作Photoshoブラシ素材を利用することで、今どきのデザインテクニックやグラフィック・トレンドを、手軽に実現することができます。 デザインに重ねるだけでレトロ風に仕上げたり、手描きスケッチや水彩ペイントなど、イラストレーションをレベルアップさせる素材を中心にそろえています。また後半では、比較的安価で高品質な、プレミアム版PSブラシ素材も一緒にまとめています。プロジェクト予算に応じて検討してみると良いでしょう。 詳細は以下から。 手描きイラストや水彩ペイントに強い、すごい無料Photoshopブラシ素材まとめ Mar-ka Brushes 初心者には難易度の高いブラシ設定をカスタムすることで、36種類のさまざまな質感を表現できます。 Magic Brush Photosho
デザイナーが持っていたい、すごいフリーフォント素材42個まとめ
デザインをしているときに悩んでしまいがちで、全体のイメージを決める重要な要素のひとつ、フォント選び。手持ちのフォントコレクションを定期的にアップデートして、クリエイティブな作品をつくってみましょう。 今回は、最近公開された無料ダウンロードできるフリーフォント素材をまとめてご紹介します。太さに応じて豊富なウエイトが用意された書体から、今年のトレンドでもある手書き、ブラシスタイルの他に、人気の高い美しい筆記体デザインなどが揃っています。 詳細は以下から。 デザイナーが持っていたい、すごいフリーフォント素材まとめ あさご本丸ゴシック 伝統的な雰囲気でありながらも、クルクルとしたループ状の線が個性的でモダンさを感じるエレガントな書体だそうです。 ※ 個人利用可能 Margurite 流れるように美しい筆記体スタイルで、リガチャ合字なども豊富に用意された、プロユースのデザインフォント。 ※ 個人利用
【簡単】2023年Photoshop切り抜きおすすめテクニック15選 完全ガイド
コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」（複雑な背景バージョン） オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー（Command/Ctrl+J）したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
