タグ

ブックマーク / photoshopvip.net (14)

  • 画像生成AIでウェブサイトやUIデザインを生成するコツ

    人工知能AI)は、ウェブサイト制作を、根から変えてしまうでしょう。 今のところ、AI画像生成ツールは、呪文(プロンプト)を唱える、ちょっとしたコツを覚えることで、以下のようなWebレイアウトを作成できます。 beautiful landing for spiderman website, design, ux/ui, ux, ui --ar 3:2 --v 4 --q 2 「花屋、フラワーショップ」をテーマにすると、一発でWebサイト向けレイアウトを錬成できます。 「日」をテーマにすると、こんな美しいUIデザインに。 実際にAI画像生成ツールを使いこむうちに、少しずつわかってきた、AIツールでウェブサイトやUIデザイン画像を生成するコツを、メモ的にご紹介。 アップデート、継続していきます。 コンテンツ目次 ✨ AI画像生成ツールとは? ✨ 唱える呪文(プロンプト)って何? ✨ 画像を

    画像生成AIでウェブサイトやUIデザインを生成するコツ
  • 本当は教えたくないWebデザイン参考ギャラリーサイト37選

    ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA

    本当は教えたくないWebデザイン参考ギャラリーサイト37選
  • Web制作の時短に!2020年の便利オンラインツール・ベスト100選

    この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール(14個) 2. パターンツール(7個) 3. イラスト系ツール(3個) 4. デザインツール(10個) 5. 配色カラーツール(6個) 6. グラデーションツール(3個) 7. SVGツール(8個) 8. スクリーンショ

    Web制作の時短に!2020年の便利オンラインツール・ベスト100選
  • たった1行のCSS!よく見かけるWebレイアウトを実現する凄技テクニック10個

    モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren

    たった1行のCSS!よく見かけるWebレイアウトを実現する凄技テクニック10個
  • Web制作の常識が変わる、便利な最新オンラインツール48個まとめ

    この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手

    Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
  • すごいぞフォトショップ!レタッチ、写真加工の最新チュートリアル、つくり方42個まとめ

    この記事では、写真レタッチ・加工がうまくなる最新チュートリアル、テクニックをまとめています。 定番で基のレタッチ術から、風景や人物の違和感のない合成テクニック、輝くライティングエフェクトなど幅広いフォトショップの技術を学ぶことができる最新チュートリアルが揃います。 サンプル用PSDファイルを無料ダウンロードできるものもあります。フォトショップのツールやエフェクトの具体的な使い方を実践で覚えてみましょう。 すごいぞフォトショップ!レタッチ、写真加工の最新チュートリアル、つくり方まとめ 写真を手書きイラスト風に加工する方法 豊富に用意されたフォトショップのフィルタ機能の中から、スタンプエフェクトを利用したお手軽テクニック。 写真の人物やモノをピカピカに輝く黄金にする方法 アカデミー賞で授与されるオスカー像のような、ピカピカに光る黄金エフェクト。 写真から黄金像をデザインする方法 上記チュート

    すごいぞフォトショップ!レタッチ、写真加工の最新チュートリアル、つくり方42個まとめ
  • 無料のおすすめ最新HTML5テンプレート厳選45個まとめ【2020年版】

    スマートフォンからウェブサイトを閲覧するひとが増えたことで、あらゆる端末に対応するレスポンシブなWebサイトが主流となっています。 しかし、「HTML5でWebサイトをゼロから作成するのはちょっと、。」というときは、HTML5でできたテンプレートを活用してみましょう。 この記事では、無料ダウンロードできるオススメのHTML5テンプレートをまとめてご紹介します。 2020年に公開されたものを中心に最新テンプレートを揃えています。Bootstrapフレームワークを利用しているものも多く、手軽にカスタマイズできる点もポイント。あらゆる業種にマッチする、お好みの無料HTMLテンプレートを探してみましょう。 商用利用もできる無料HTMLテンプレートまとめ Switch あらゆるデバイスでの表示に対応するランディングページ向けテンプレート。ダークモード切り替えも可能で、イラストを背景として効果的に活用

    無料のおすすめ最新HTML5テンプレート厳選45個まとめ【2020年版】
  • いまWebがすごい!参考にしたい話題の最新ウェブデザイン37個まとめ

    この記事では、デザイン制作のインスピレーションや参考にしたい、2020年に入って注目を集めている最新ウェブサイトデザイン37個をまとめています。 2019年の暮れに公開されたサイトも含み、多彩なアニメーションや鮮やかな配色カラーパレット、ストーリーテリング手法など注目のスタイルを揃えました。また、高級感のあるサイトデザインが特に多いシリーズとなりました。 いまWebがすごい!参考にしたい話題の最新ウェブデザイン37個まとめ Sussex Royal イギリス王室からの離脱や、王室を連想させる「サセックス・ロイヤル」の商標登録など、なにかと話題となっているサイト。閲覧できるのは今のうちかも。 Spotify for Pets 自分の聴いている音楽、ジャンルをもとに、愛犬などのペットに合ったプレイリストを自動生成してくれるオンラインサービス。 Coachella 毎年チケット販売とともに完売の

    いまWebがすごい!参考にしたい話題の最新ウェブデザイン37個まとめ
  • ウェブデザイン制作が加速中!便利な最新オンラインツール53個まとめ

    この記事では、Webデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインツール 2. モックアップツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. アイコン素材パック 6. コラボレーション、共同作業ツール 7. 面白ツール 8. デザインコレクション ウェブデザイン制作を爆速に!便利な最新オンラインツールまとめ デザインツール SVG Colorizer 用意されたアイコンやキャラクターなどのSVG素材の配色をカスタマイズできる

    ウェブデザイン制作が加速中!便利な最新オンラインツール53個まとめ
  • 超便利!確認しておきたい最新CSSツール、リソースガイド 2018年度

    ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース

    超便利!確認しておきたい最新CSSツール、リソースガイド 2018年度
  • Webデザイン、これからどうなる?すぐに使えるアイデア見本集58選

    ウェブサイトのアイデア出しに困ったり、これからサイトを作成しようというときに参考にしたい、最新の良質ウェブデザインをまとめてご紹介します。 配色やレイアウト、フォント選び、トレンドなど優れた実サンプル例を見て、クリエイティブなデザインアイデアにつなげてみましょう。デザインの打ち合わせなどにもオススメしたいサイトが揃います。 2018年に流行しそうな、注目Webデザイントレンド20個を大予想 https://photoshopvip.net/106130 Webデザイン、これからどうなる?すぐに使えるアイデア見集 Happier Village Toshiba イラストを全面に利用したサイトデザインで、スクロールしながら隠されているコンテンツを表示する体験を中心としています。 Interword マウスカーソルに合わせてデザイン要素が動いたり、文字テキストでマスキングされた動画イメージなど

    Webデザイン、これからどうなる?すぐに使えるアイデア見本集58選
  • デザイナーが持っていたい、すごい新作フリーフォント素材54個まとめ

    全体のイメージを決める重要な要素のひとつ「フォント選び」。素材がありすぎてどれを使ったら良いか分からないと、悩んでしまうこともしばしば。手持ちのフォントコレクションを定期的にアップデートして、クリエイティブな作品をつくってみましょう。 今回は、最近公開された無料ダウンロードできるフリーフォント素材をまとめてご紹介します。太さに応じて豊富なウエイトが用意された書体から、今年のトレンドでもある手書き、ブラシスタイルの他に、人気の高い美しい筆記体デザインなどが揃っています。 商用可で完全無料!2017年公開のフリーフォント素材129個総まとめ デザイナーが持っていたい、すごい新作フリーフォント素材まとめ Handwritten Font Collection 収録されている5つの書体を一緒に利用するだけで、海外のカフェのようなオシャレデザインを完成できるフォントコレクション。 ※ 個人、商用利用

    デザイナーが持っていたい、すごい新作フリーフォント素材54個まとめ
  • Webサイトを使いやすく!UIデザインのCSS小技テクニック21個まとめ(実例サンプルコード付)

    素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。 文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報(文字ラベル)をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。 背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな

    Webサイトを使いやすく!UIデザインのCSS小技テクニック21個まとめ(実例サンプルコード付)
  • 2018年に注目したい!グラフィックデザインの最新トレンド10個まとめ - PhotoshopVIP

    「流行は繰り返す(英: Everything old is new again)」と言うように、2018年は過去のグラフィックデザインのトレンドをよりモダンにし、ここ数年人気だったフラットなデザイントレンドから移行する年となることが予想されます。ミニマルスタイルやシンプルなデザインは引き続き人気がありますが、いくつかの懐かしいスタイルをモダンな雰囲気にアレンジしたトレンドにも要注目です。 この記事では、これから2018年に注目したい、グラフィックデザインの最新トレンド10個をまとめています。「アッと驚かすデザインをつくりたい。」そんな思いにさせてくれる、たくさんのデザイン事例と一緒にご紹介です。 コンテンツ目次 1. レスポンシブ・ロゴデザイン 2. グラデーション/カラー・トランジション 3. セミフラットデザインでより奥行き感を。 4. デュオトーンの人気 5. 80&90年代の配色パ

    2018年に注目したい!グラフィックデザインの最新トレンド10個まとめ - PhotoshopVIP
  • 1