一人で学べるIllustrator！最新デザインレシピ、つくり方24個まとめ
この記事では、基本操作から制作時間を短縮するテクニックまで、Illustratorを実践的に学ぶ最新デザインチュートリアル、つくり方レシピをまとめてご紹介します。 実際に手を動かし、手順どおり進めることで、Illustratorのツールや機能の実践的な使い方が、自然と身につきます。 Illustratorを本気でモノにする最新デザインレシピ、つくり方まとめ 美しいグラデーションをつかったロゴアイコンのつくり方 シェイプツールを使って基本的なデザインを作成し、トレンディーで鮮やかなグラデーションをつかって立体的なロゴに仕上げます。 モコモコとした毛皮をつかったテキストエフェクトの作り方 手描きしたパスに沿って立体感のある3Dスタイルを表現し、さらに「ラフ」効果をつかってモコモコ感のあるデザインに仕上げます。 カラフルなカスタムグラデーションの作り方 フリーフォームグラデーションとメッシュグラ
デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
CSSのみで実装するボタン、テキストリンク、hoverスタイル19選 | Pulp Note
CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 CSSボタンのスタイルCSSボタンは11パターンあります。すべてのデザインに共通したCSSがありますので以下のコードをコピペした後に、実装したいボタンのCSSをコピペしてください。 CSSボタンの共通スタイル .btn a { display: flex; justify-content: center; align-items: center; position: relative; width: 300px; height: 60px; color: #333; font-size: 18px;
Webデザインの出来を左右する「コンポジション」の重要性 | アドビUX道場 #UXDojo
Webデザインの出来を左右する「コンポジション」の重要性 | アドビUX道場 #UXDojo 連載 エクスペリエンスデザインの基礎知識 一般的なデザインは、カラー、タイポグラフィ、画像など多くの要素の組み合わせからできています。印刷用のデザインでも画面用でも、要素のバランスをとって全体的な体験をより良いものにするためには、デザインのコンポジションに関わるいくつかのルールの理解が欠かせません。この記事では、コンポジション、すなわちデザインの構成とは何かを説明し、ストーリーを語る優れたデザインの構築に役立ついくつかの原則を紹介します。 デザインにおける視覚的な構成とは？ 視覚的な構成は、デザイン構築の基礎であり、すべての要素を調和させて全体としてのメッセージを伝えるためのレイアウトです。下の画像に描かれている単語を使ったアートはその好例です。一つひとつの言葉はとても単純な要素ですが、要素の組み
ベーシックなストライプのPhotoshopパターン 460個セットを作りました ： 460 Basic Stripe Set
ベーシックなストライプのPhotoshopパターン 460個セットを作りました ： 460 Basic Stripe Set 仕事でストライプのパターンを良く使うので、まとめて作ってみました。ストライプのパターンは、斜め・縦・横の3種類、白と黒（背景透過）、線幅2pxごと、線幅の間隔は等倍・1.5倍・2倍の全460個です。 (stripe.zip:571KB) Zipファイルを解凍後、パターンファイルをPhotoshopにドラッグ＆ドロップするとパターンが追加されます。 商用利用OK、印刷OKです。再配布はNGです。ご使用の際の報告やリンク、著作権表示は不要です。お気軽にお使いください。 ストライプパターンについて 斜めのストライプは、英国式の右上がりです。 線の色が白と黒なので、描画モードを「オーバーレイ」等にすれば、大体どんな色にでもできると思います。 線幅は、1pxと、2～50pxま
デザイナー自家製Photoshop用パターン素材大公開中！（商用無料＆クレジット不要） | ページ 2 / 2 | 東京上野のWeb制作会社LIG
こんにちは。デザイナーのもりたです。 私はいつもデザインするとき、パターンが必要になったらその都度適当に作ってしまって、結局パターンファイルの中が「パターン45」とかそんな名前で埋めつくされるタイプなんですけど、デザイナーの皆さんいかがでしょう。 自分の中の命名ルールが決まってないから名前つけても適当すぎて判別できないんだよね……。結果いちいちクリックして試すなんて非効率的なことに。 まあそんなわけで、一念発起してこの自作パターンを整理しようと思い立ったわけですが、せっかくなので、Webデザイン制作時にセットで持っていると便利そうなパターンをまとめて配布することにしました。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれ
イラストレーターパターンのフリー素材をご紹介!【116選】
イラストレーターパターンのフリー素材は、こどもの日や母の日など、イベントが近付くにつれて、それにちなんだデザインが多く登場し始めています。きっと多くの方が「やはりこういう時期はデザインも通常とは異なる仕様にしてアクセントを付けたい！」と思うのではないでしょうか。 素材を配布しているサービスでも、春から夏にかけて使える爽やかな雰囲気の素材も数多く登場します。イベント、季節に合わせたデザインをサクッと作りたいなら、パターン素材を活用しましょう。 今回は、クオリティが高く、かつ無料のパターン素材を116個まとめてご紹介します。 春から夏まで使えるフリーパターン素材5月編 1. Nature pattern design http://www.freepik.com/free-vector/nature-pattern-design_1081435.htm 鮮やかな水色のヤシの葉にビビッドなハイビ
デザイナーが押さえておきたい、2018年のウェブデザイントレンド6個まとめ【完全ガイド】
2018年になってここまで、ウェブデザインにとって驚くべき年を迎えています。これまで何年もかけて進化してきたデザインが、デザインシステムやタクタイルデザインのような新しいトレンド、また楽しく元気なレトロスタイルの復活などにつながっています。これまで以上に、ウェブデザインの現状と今後の流れを考えることが重要になってきます。 この記事では、2018年にもっとも影響を及ぼしている、6つの最新ウェブデザインのトレンドをまとめてご紹介します。 01. コンポーネントを元にした「デザインシステム」 まだデザインシステム（英: Design System）を導入していないなら、きっと今後数年以内に利用することになるでしょう。最新版となる 2017-18 Enterprise UX Industry Report によると、デザインシステムを利用していない企業の67%が、現在作成中と答えています。 デザイ
ヴィンテージの無料素材のまとめ、時代ごとの使い方や特徴も解説
幾何学的な飾り、繊細なパターン、緻密なオブジェクトが美しいアール・デコ、アール・ヌーヴォーなど19世紀のヴィンテージ スタイルを中心に、その時代ごとのデザインの特徴と使い方を紹介します。 合わせて、個人・商用で無料・有料で利用できるデザイン素材・フォントもご紹介。 【更新: 2022/9/13】 元記事がアップデートされたので、合わせて当記事も更新しました。 Vintage Style Guide ヴィンテージ スタイルの手引き 唯美主義運動 -Aesthetic Movement アール・デコ -Art Deco アール・ヌーヴォー -Art Nouveau アーツ・アンド・クラフツ -Arts & Crafts バロック リバイバル -Baroque Revival 新古典主義 -Neoclassical ペンマンシップ -Penmanship ルネサンス リバイバル -Renaiss
ギンガムチェックやストライプなど100種類以上！カラフルでかわいいテクスチャが作成できるパターン素材
背景や質感アップに手軽に使える、カラフルでかわいいパターンが揃ったPhotoshop用のパターン素材を紹介します。
Photoshopでシームレスなパターンテクスチャ素材を作る方法【芝生、木目、レンガなど】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの姐さんです。 今回はPhotoshopの機能を使って、シームレスパターンを作成する方法をご紹介します。 ※この記事は2022年3月に編集部が情報を更新しました 芝生 1. 正方形の新規ファイルを作る 今回は300px×300pxの正方形にしました。 2. 写真を配置する カンバスいっぱいになるように写真を配置します。 3. カンバスサイズで写真を切り抜く 全てを選択（ctrl+A）→選択範囲をカット（Ctrl+X）→編集→特殊ペースト→同じ位置にペースト（Ctrl+Shift＋V）で芝生の写真をカンバスサイズで切り抜きます。 この手順をやっておかないと次の手順の「スクロール」がうまくいかないので、必ずやっておいてください。 4. 「スクロール」フィルタで写真を移動する 次に、先ほど切り抜いたレイヤーを選択した状態で、「フィルタ」→「その他」→「スクロール」を選択しま
レトロなデザインがかわいい！110種類のパターンが揃ったPhotoshop用の背景素材
個人でも商用でも無料で利用できる、レトロ・ヴィンテージなカラーと柄がかわいい110種類のパターンが揃ったPhotoshop用のパターン素材を紹介します。 レトロ風のかわいい背景が簡単に作れちゃいます。
この素材の質感スゴイ！実際にスキャンして作成された商用利用無料の紙・ペーパーのテクスチャ素材
本物の紙を実際にスキャンし、Photoshopでいい感じに補正した紙・ペーパーのテクスチャ素材を紹介します。 通常は有料の素材ですが、今週末まで無料でダウンロードして利用できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーが揃えておきたい！Photoshopで使い勝手のよい無料のパターン素材 660種類のまとめ
テクスチャ素材に困った時に！ダウンロードしておきたい実用度満点のフリーのテクスチャ素材のまとめ
CSSグラデーションで作った背景パターンのサンプル - NxWorld
かわいくデザインされた日本・中国・エジプトなどの文様、ライン・ドット・小さい柄をつかったパターン素材のまとめ
日本の伝統的なデザインは美しい、和の柄や文様・和紙・折り紙・千代紙などの癒やし系素材のまとめ
商用利用無料、最近注目されている美しいパターンが使われた背景素材のまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
