次世代AI、フォトショップに登場「生成塗りつぶし」が進化、2024最新アップデート新機能レビュー
アドビは、独自の生成AI最新モデル「Firefly 3」をベースにしたPhotoshopの新機能を実装したベータ版 v25.9 の提供をはじめました。 最新アップデートとなる今回は、今週ロンドンで開催されたイベント「Adobe MAX London 2024」に合わせて発表されたもの。 今回は、Photoshopに新しく追加された新機能の詳細を、フォトショップユーザー歴１０年以上の筆者が実際に使ってみた感想と一緒にご紹介します。 ずばり驚いたのは、誰でも簡単に利用できる手軽さに加え、完成度の高いリアルさでした。 Photoshopをアップデート Photoshopの最新機能(ベータ版)を公開 今回のリリースでは「画像を生成」「類似を生成」「参照画像」など新機能が盛りだくさん！ クリエイティブの未来をご体験ください！ #PhotoshopAIhttps://t.co/CqEkozlDXv p
【実例付き】Photoshop(フォトショ)のスーパー解像度の使い方・注意点| 株式会社LIG
こんにちは、Webデザイナーのまっつーです。 フォトショ(Photoshop)のスーパー解像度の使い方について、実際の画像をお見せしながらわかりやすく紹介していきます。 この記事を読めば「提供された画像の画質が悪い…」「古い写真を使いたいが画質が悪い…」といった悩みが解決できます。 Photoshopのスーパー解像度とは 「スーパー解像度」とは一言でいうと、AIの技術で画像の解像度（画質）を格段にあげることできる機能です。 2021年Adobe Camera Raw v.13.2に追加された新しい機能で、Adobe Senseiという人工知能のAIが細部を自動的に補完し鮮明な画像に処理してくれます。（似ている機能で「ディテールを保持2.0」というものがありますが、期待できる効果は「スーパー解像度」の方が高くなります。） この機能を使うと画像の解像度は縦横それぞれ2倍のサイズになり、全体の解
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h
2024年のCSSの書き方、ワークフローとツールについて
CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウザにサポートされました。 2024年のCSSの書き方として、より保守しやすいCSS、ワークフロー、ツールについて紹介します。 How I'm Writing CSS in 2024 by Lee Robinson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインの制約 2024年のCSS お勧めのCSSツール 終わりに はじめに 2024年のCSSは、素晴らしいの一言に尽きます。
【総まとめ】2023年公開のすごいPhotoshopチュートリアル、作り方ベスト70
２０２３年は、Photoshopにとって「革命」と言えるほど重要な年となりました。 理由はずばり、「AIを活用することで、従来は考えられないほど簡単に、デザインができるようになった」から。 これまでプロでも時間と手間のかかっていた面倒な作業も、ほんの数クリックで誰でも作成できる。 そんな嘘のようなことが、当たり前になってきています。 この記事では、２０２３年のフォトショップ最新機能やチュートリアル、使い方ベスト70選をご紹介。 カテゴリより目的に応じた新しいPhotoshopテクニックを活用してみましょう。 「フォトショップって、こんなこともできるの?!」きっと、あなたも驚くはずです。
CSSの進化が止まらない！ Chrome 120で追加された7つの新しいCSSの機能
年末になっても、CSSの進化が止まりません！ 先日リリースされたChrome 120で追加された7つの新しいCSSの機能を紹介します。JavaScriptをサポートしているかチェックできる新しいメディアクエリ、新しい指数関数、CSSネストの記述方法がより簡単になったり、要チェックです。 New in Chrome 120 Chrome 120 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 120で追加された7つの新しいCSSの機能 カスタムプロパティに対する<image>構文 カスタムプロパティ用の<transform-function>および<transform-list>構文 JavaScriptをサポートしているかチェックできる新しいメディアクエリ :dir
Photoshop(フォトショ)で塗りつぶしをする簡単な方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webデザイナーのまっつーです。 「Photoshop(フォトショ)で塗りつぶしをする方法」について、実際の画像をお見せしながらわかりやすく紹介していきます。 「塗りつぶす対象は何か」「どのように見せたいか」によって適した方法があります。 この記事を読んでどんな塗りつぶし方法があるのか理解し、ベストな方法で塗りつぶしができるようになりましょう。 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 「とりあえずスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください！ 塗りつぶせる対象は２種類ある １つ目はレイヤーです。 レイヤーは透明なフィルムのようなもの
FigmaのVariableの使い方
Figmaの新しい機能Variableについて、作成方法や適応のしかた、スコープ、モードなど基本的な使い方をまとめました。 Variableとは Variableはスタイルのように再利用可能な定義で、色、数値、文字列などのさまざまなデザイン属性に割り当てることができます。 Variableのタイプ Variableには、以下の4つのタイプがあります。 ColorNumberStringBoolean Color Colorは値に色を設定でき、オブジェクトの塗りやストロークに適用できます。 Number Numberは値に数値を設定でき、幅や高さ、間隔、パディング、角丸などに適用できます。 String Stringは値に文字列を設定でき、テキストレイヤーに適用したり、バリアントに使うことができます。 Boolean Booleanは値にtrueまたはfalseを設定でき、レイヤーの表示非表
VS Code 1.78の新機能が便利！ 画像の相対パスが簡単に入力できるようになったぞ
VS Codeで画像のパスを入力するとき、今まではフォルダツリーで画像を右クリックして「パスのコピー」「相対パスのコピー」でパスを取得していたと思います。 先日アップデートされたVS Code 1.78で、画像ファイルをshiftキーを押しながらドロップするだけで、相対パス・完全パスが入力できるようになりました。 これはドロップセレクタと呼ばれるもので、VS Codeではshiftキーを押しながらドロップすることでファイルやコンテンツをエディタに挿入することができます。今までは画像のドロップで画像ファイルを開く、shiftドロップでファイル名でした。 VS Code 1.78のアップデートでこの挿入する方法を変更できるUIが追加されました。shiftキーを押しながらドロップすると、相対パス・完全パスを切り替えて挿入することができます。
Next.js App Router (app ディレクトリ) の逆引き辞典
2023/05/05 追記 v13.4.0 をもって App Router は安定版になりました！ https://nextjs.org/blog/next-13-4 公式ドキュメントもベータ→正式版にマージされました。 内容が充実してきている様子ので、そちらを確認してください。 https://nextjs.org/docs 加えて、公式ドキュメントの改善で分かったポイントもいくつか修正しています。 Next.js v13 から App Router 機能 (app ディレクトリ) が新しく追加されました。 （v13.3.0 現在はベータ版です。 v13.4.0 をもって安定版になりました！） ファイルベースの Layout 機能 処理の一部を Server Component に移しバンドルサイズを削減できる 例: remark を利用した Markdown のパース が有名なところだ
2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ 2022年現在、CSSの使用状況を調査した「The State of CSS 2022」を紹介します。 The State of CSS 2022 The State of CSS 2022は、State of CSSでおこなわれたアンケートの調査結果（14,310人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は24-44才が多く、性別は男性が多めです。
Chrome 108にはCSSの新しい機能がたくさん含まれている、新機能と変更・削除された機能のまとめ
11/30（日本時間）にリリースされたChrome 108では、CSSの新しい機能がたくさん含まれています。また、変更・削除された機能もあります。特に、Android版のChromeでposition: fixed;を使用している要素の配置が期待通りにならない可能性があります。 Chrome 108の新機能、変更・削除された機能を紹介します。 chrome-108-beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 Chrome 108のCSSの新機能 変更・削除された機能 Chrome 108のCSSの新機能 Chrome 108でデフォルトで有効になったCSSの新機能は、下記の通りです。 新しいビューポート単位（lvh, svh, dvhなど) 新しいプロパティ（break-after, break-before, break-insid
【フォトショップ】パペットワープでポーズを自由に変更する方法
パペットワープはどこにある？ パペットワープは、他の領域に影響を与えずに、画像の一部のだけを変形できる、フォトショップの写真加工には欠かせないツールです。 メイン・メニューの 「編集」>「パペットワープ」より適用することができます。 パペットワープの使い方 写真の被写体を選択しよう 今回は試しに、こちらの写真の人物のポーズを変更してみましょう。 写真加工をより自然に行うために、まずは写真の人物のみを切り抜きます。 人やモノの切り抜きで、特に便利な「被写体を選択」。 ツールバーより「オブジェクト選択ツール」、「クイック選択ツール 」、「自動選択ツール」(ショートカット: w）を選びましょう。 すると、ツールバーに「被写体を選択」ボタンが表示されるので、クリックで実行。 または、メニューバーの「選択範囲」>「被写体を選択」からえらぶこともできます。 「被写体を選択」の効果的なテクニックをつかう
VS Codeの新機能「スティッキー スクロール」がさらに便利に！ 追従行数の変更、関数やクラスをリスト化できます
先日アップデートされた、VS Code v1.71で「スティッキー スクロール」がさらに便利になったので紹介します。 「スティッキー スクロール」はv1.70で実験的な機能として実装されましたが、v1.71で正式に実装され、さらに追従行数を設定できるようになり、スティッキースクロールで関数やクラスをリスト化して移動もできるようになりました。
VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
VSCodeおすすめ設定大公開！！おすすめ拡張機能も - Qiita
はじめに 皆さんVisual Studio Code(以下VSCode)使ってますか？ 私はメインで使っているのですが、自分なりにしっくりくる設定や拡張機能がある程度揃ってきたので公開しちゃいます。 おすすめ設定だけではなく、おすすめの機能もできる限り紹介したいと思いますので、最後までぜひお付き合いください。 ※プログラミング言語固有の設定の解説は軽めですのでご了承ください。 GIF画像が小さい場合は、クリックして頂けると拡大して表示が可能です デフォルト機能編 Local History機能 Gitは非常に便利なので、皆さん使われていると思います。 Gitはコミット単位で履歴が管理できますが、保存単位で履歴が見れると嬉しいな、保存単位で復元できると嬉しいな、と思うことはないでしょうか。 私はVSCodeは自動保存をオフにして、手動で保存するので、保存単位で履歴が見れると嬉しいなと思うこと
Figma Config 2022で大幅アップデート 新機能を全てまとめてみた
チームでの共同デザインプロジェクトに最適なツールとして呼び声の高い、デザインアプリ Figma（フィグマ）。 はじめてでも迷わない簡単なFigmaの使いかたはもちろん、用途に合わせて自分好みにアプリの使いやすさを便利プラグインも人気の理由でしょう。 先日、Figmaのアップデートイベント Config 2022 が開催され、数多くの新機能が追加、発表されました。これまでFigmaによるデザインで気になっていた多くの点を解消してくれる大型アップデート。 今回は、Figmaに追加された新機能について詳しくみていきましょう。 コンテンツ目次 1. ダークモードの導入 2. より使いやすくなった Auto Layout 3. コンポーネントのプロパティ 4. 他のユーザーに追尾してもらうスポットライト機能 5. Figjam ウィジェットの追加 6. 可変フォントが利用可能に 7. ポヨンとしたバ
Premiere Pro 動画をガイドにスナップさせる方法 - by Takumi Hirashima
Adobe Premiere Pro で動画をガイドにスナップさせる方法を紹介します。 例えば、プログラムモニター上に表示されているオブジェクトを、画面端やガイドにスナップさせて綺麗に配置したい時に便利な方法です。 表示からプログラムモニターをスナップインを選択 プログラムモニター上に表示されているオブジェクトを、画面端やガイドにスナップさせるには、メニューバーの「表示」→「プログラムモニターをスナップイン」にチェックを入れます。 ここにチェックが入っていると、動画やグラフィックシンボルが画面端やガイドにスナップするようになります。 まとめ Adobe Premiere Pro で動画をガイドにスナップさせる方法を紹介しました。
FigmaのVariants入門 - さらにコンポーネントを使いこなそう - ICS MEDIA
ウェブ制作の現場で定番となってきたデザインツール「Figma」。前回の記事『デザインの管理と効率化が行える FigmaのComponents入門』では、デザインパーツの管理や柔軟な変更が可能になる「Components」機能を紹介しました。 本記事ではComponentsをまとめ、検索性を保ちつつ、さらに柔軟な変更と管理が行える「Variantsバリアンツ」を紹介します。 Variantsを使うと、複雑なコンポーネントの切り替えや管理が行いやすくなり、堅牢なデザインファイルが作成できます。また、コーディング時に近い思想でデザインを組めるので、実装時に破綻が起こりにくくなります。 Variantsは規模感に関わらず小さな単位でも活用できます。 「使いこなせていない」、「自分の制作の規模感では不要」と考えているデザイナーにも、手軽に導入できメリットを実感できるはずです。本記事で使い方を説明する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知っておきたいPhotoshop 2024＆ベータ版の最新機能７つ
