クリスタやProcreateでも使える高品質なブラシ素材！ Photoshop 2024年春の新作ブラシがAdobeからダウンロードできます
Adobeから新作ブラシ、「2024年春のブラシ」がリリースされました！ 2024年春のブラシには、新しいインクツールや描画ブラシをはじめ、群葉ブラシや鮮やかなマルチカラーブラシなど30種類にもおよぶテクスチャブラシが揃っています。ブラシはPhotoshop, Frescoをはじめ、Clip StudioやProcreateなど、他のアプリでも使用できます。 Adobeでは定番のブラシをはじめ、ペン用ブラシ、塗り用ブラシ、水彩用ブラシ、2018年夏から2024年冬のブラシまで全部ダウンロードできます！ Photoshopの新作ブラシ、2024年春のブラシ 作者のKyle氏のツイートには使用例などもあります。 Live: Spring 2024 #photoshop brushes.https://t.co/cRtjNTOgUA pic.twitter.com/7XC9cMNZLe — Ky
スクロール連動アニメーションの実装例 ｜ TAKLOG
スクロールに連動して要素が画面内に入った際にアニメーションを行う実装のメモです。 スクロール連動アニメーションのコードと実装例スクロール連動アニメーションの実装例 JavaScriptの実装はGitHub Gistに纏めています。コードにはTypeScriptを使用していますので、TypeScriptを利用していないWeb制作現場で使用する場合はChatGPTなどに依頼してJSファイルに変換してください。
無料でハイクオリティなCC0の3Dモデルやテクスチャをダウンロードしまくれる「ShareTextures」
写真家とアセットクリエイターによるサイト「ShareTextures」では、実際に撮影した写真やロイヤリティフリーの写真から作成した3Dモデルやテクスチャを配布しています。コンテンツはすべてCC0ライセンスのため、個人・商業問わず自由にダウンロードして活用することができます。 CC0 Textures & Models | Share Textures https://www.sharetextures.com/ サイトをスクロールしていくと、ShareTexturesの説明を見ることができます。ShareTexturesではAtlases(複数のテクスチャをひとつにまとめた自然素材)、Textures(テクスチャ)、Models(3Dモデル)の3カテゴリがあります。Atlasesは木や石、貝など、記事作成時点では37種類。 テクスチャは1502種類から選ぶことができます。 また、3Dモデ
【React】オブジェクトリストをループしてコンポーネント化する - Qiita
はじめに プログラミング歴2ヶ月の素人が書いています。（間違っていたらご指摘ください） WesBos.com のオンラインビデオコースでReactを学習しています。 動画は以下から。 https://reactforbeginners.com/ 「Reactでオブジェクトリストをループしてコンポーネントを動的に複数生成する」ための学習メモです。 今回の目的 以下のような商品リストがオブジェクトリストとして存在するとします。 const fishes = { fish1: { name: "Pacific Halibut", image: "/images/hali.jpg", price: 1724, }, fish2: { name: "Lobster", image: "/images/lobster.jpg", price: 3200, }, fish3: { name: "Sea
アイデアを刺激する、みんなの最新Webデザイン36選【2024年4月版】
優れたデザインや見せ方で話題となっている、国内外の最新Webデザインをまとめてご紹介。 10年以上Webデザイン観測を行っている筆者が、「これはやられた！」とワクワクさせられたサイトや、2024年のデザイントレンドを採用している最新デザインを中心にピックアップしています。 「アイデアが枯渇してて、、」そんなときのインスピレーションのお供にいかがでしょう。 アイデアを刺激する、みんなの最新Webデザインまとめ Collecting Stamps on Yoshida Trail, Mt. Fuji 山梨県側の富士山の北側から山頂を目指す「吉田ルート」からの登頂の記録を、インタラクティブに残したアートプロジェクト。 サントリーニ ホテル＆ヴィラズ 宮古島 沖縄の宮古島にあるホテルの公式サイトで、訪れてみたくなる美しい風景画像をふんだんに利用しています。コンテンツの切り替えにユニークなシェイプを
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
次世代AI、フォトショップに登場「生成塗りつぶし」が進化、2024最新アップデート新機能レビュー
アドビは、独自の生成AI最新モデル「Firefly 3」をベースにしたPhotoshopの新機能を実装したベータ版 v25.9 の提供をはじめました。 最新アップデートとなる今回は、今週ロンドンで開催されたイベント「Adobe MAX London 2024」に合わせて発表されたもの。 今回は、Photoshopに新しく追加された新機能の詳細を、フォトショップユーザー歴１０年以上の筆者が実際に使ってみた感想と一緒にご紹介します。 ずばり驚いたのは、誰でも簡単に利用できる手軽さに加え、完成度の高いリアルさでした。 Photoshopをアップデート Photoshopの最新機能(ベータ版)を公開 今回のリリースでは「画像を生成」「類似を生成」「参照画像」など新機能が盛りだくさん！ クリエイティブの未来をご体験ください！ #PhotoshopAIhttps://t.co/CqEkozlDXv p
商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -ResourceBoy
個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、ダウンロードに時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。以前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティ
雑誌からデザインを学ぼう
2024年4月25日 Webデザイン, インスピレーション みなさん、雑誌読んでいますか？紙の雑誌は手に取らなくなった人も、電子版なら読んでいるという人もいるかもしれませんね。実は私、お試しのつもりがうっかり楽天マガジンの年間購読に課金しちゃったもので、せっかくだからと読み倒している今日このごろ。眺めているとあしらいやレイアウトが自由で見ていて楽しいんですよね。デザインの勉強中の方にもおすすめなので、雑誌を見るポイントや、おすすめ勉強方法を紹介します。 ↑私が10年以上利用している会計ソフト！ デザインの注目ポイント Webデザインを考えているとき、Webサイトだけ見ていてもなんだかアイデアもレイアウトも偏ってしまうことがあるかと思います。そんな時は雑誌を見てみましょう！ レイアウト パラパラとページをめくるだけでも感じられるのが、本当に自由度が高い！サイズやページ数という制限はありつつも
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
Notionがただのメモ帳になっている人に教えたい。可能性を引き出す使い方6選 | ライフハッカー・ジャパン
三井住友カード ゴールド(NL)のデメリットは?メリットない・いらないは勘違い【年会費無料になる100万円修行のコツ】
Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
【フォトショップ】遠近感のある壁にデザインを自由に貼る方法
この記事では、フォトショップで遠近感のある壁にポスターなどのデザインを貼る方法をご紹介します。 「遠近感がずれてしまい、うまく貼り付けられない」という経験がある方へ。 このテクニックを利用すれば、壁などどんな表面にも思い通りのグラフィックを貼り付けることができます。フォントでも構いません。 むずかしいことはありません、フォトショップの基本的な機能だけで、１分もかからずできるお手軽さです。 加工前ビフォー 加工後アフター このチュートリアルに必要なのはフォトショップだけ。７日間の無料体験もあるので、まずははじめてみませんか？ 7日間無料体験 Photsohopを無料ではじめる 遠近感のあるデザインは「消点」で優勝 フォトショップで開いた状態。写真は4000x6000pxの４K対応サイズ。 お好みのポスターやロゴを用意し、キャンバスにドラッグ&ドロップで配置します。 レイヤーを右クリックし、「
JS：複数の画像読み込みが完了した時点で処理をしたい
Promiseオブジェクトを使うと「画像読み込み完了後に関数の戻り値を返す」などの非同期処理完了後の動作をJavaScriptで記述できる。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="main.js"></script> <title>画像を読み込んだあとに処理をする（複数画像） </title> <style> *{ margin: 0; padding: 0; } body{ margin: 50px; } </style> </h
フォトショップ初心者によくある間違いと解決テクニックまとめ
いよいよ新年度に突入し、フォトショップを始めましたという人もいるでしょう。「魔法のように使いこなしたい」と思ってもなかなか難しいですが、もし知っているだけで作業スピードが数倍アップする方法があるなら知っておきたいと思いませんか。 今回は『13 Photoshop Blunders Beginners Keep Making – And How to Fix Them!』より、フォトショップ初心者によくある間違いと、すぐに取り入れられる解決テクニックを紹介します。 Play このチュートリアルに必要なのはフォトショップだけ。７日間の無料体験もあるので、まずははじめてみませんか？ 7日間無料体験 Photsohopを無料ではじめる そのやり方、本当に合ってますか？ この動画は、500万人超えのフォロワーを誇る世界的なユーチューバーPiximperfectによるもの。これまでにもフォトショップに
無料で使える「Ctrl＋C」でコピーしたあらゆる内容を保存して再利用＆複数PCでの共有もできる「Ditto」を使ってみた
「Ditto」は「Ctrl＋C」でクリップボードにコピーした内容の履歴を表示したり、別のPCにクリップボードの内容を送信したりすることができる無料のクリップボードマネージャーです。どのように使えるのか実際に試してみました。 Ditto clipboard manager https://ditto-cp.sourceforge.io/ まずは公式サイトに行き、ツールをダウンロードします。今回は64bitのPCにインストールするので「Download 64bit」をクリック。 インストーラーをダブルクリックして起動します。 「OK」をクリック。 インストール先は特に変更せず「次へ」をクリックします。 「次へ」をクリック。 「完了」をクリックします。 ネットワークへのアクセス許可を求められるので「許可」をクリック。 Dittoが起動しました。タスクトレイのアイコンをクリックするか、「Ctrl＋
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
[ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法 | ウツボウTECH![[ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法 | ウツボウTECH](https://cdn-ak-scissors.b.st-hatena.com/image/square/4911df4201ee2be31aa9ff13e682cf08f8ad84df/height=288;version=1;width=512/https%3A%2F%2Futubou-tech.com%2Fwp-content%2Fuploads%2F2023%2F05%2Fcookie_react000png.png)
