AI アーカイブ | デザインと日々の見本帳。

Photoshopの生成AI機能を使って、デザインに使えそうなアブストラクトな背景画像を作ってみた

PhotoshopのAI画像生成・生成塗りつぶし機能を使って、デザインに使えそうなアブストラクトな背景を作る実験をしてみました。

生成された画像の例をスクリプトと共にご紹介します。

Photoshopのバージョン

Adobe Photoshop ver.25.0.0

AI画像生成・生成塗りつぶし機能の基本的な使い方

新規アートボードを作成し、全て選択
下部に表示されるバーの「生成塗りつぶし」をクリック
スクリプトを入力し、「生成」をクリックする

スクリプトを入力

3パターン出力されるので、気に入ったものを使います。

生成塗りつぶしのスクリプトと生成されたAI画像の例

スクリプト「分子配列、細胞が舞うグリーンのアブストラクト背景」

バイオテクノロジー的なイメージを作りたかったです。

なかなか良い感じです。

より細胞っぽいイメージ。紫の粒が謎ですね。

スクリプト「ブルー、多角形、アブストラクト、背景」

イメージ通りの画像です。

スクリプト「無数の0と1、ビッグデータ、ネットワーク、ブルー、アブストラクト背景」

マトリックス的なイメージを作りたかったです。

ネットワーク感がまだ弱いです。

スクリプト「データサーバー、電子回路、ブルーのアブストラクト背景」

左側のボカシが気になります。

まあまあ良い感じです。

スクリプト「サイケデリックなアブストラクト背景」

なかなか強烈です。

スクリプト「うすい色、光を感じる多数の円、グラデーション、背景」

もうすこし淡い感じになると良いのですが、ちょっと色が濃いですね。

スクリプト「スパークル、キラキラのライト、抽象、背景、紫」

良い感じです。

まとめ

生成AIで書き出した画像、詳細なディティールを見ると怪しくなりますが、背景に敷いたりして使う分には良さそうです。

色が濃いイメージの方が得意な印象。薄い色とかはニュアンスをしっかり伝えないと難しそうですね。

また試してみたいと思います。

生成AIについて学べる書籍

実践　生成AIの教科書 ――実績豊富な活用事例とノウハウで学ぶ

実践　生成AIの教科書 ――実績豊富な活用事例とノウハウで学ぶ

2,420円(01/16 07:18時点)

Amazon 楽天市場

Amazonの情報を掲載しています

Chat GPTを使って、ブログにJavaScriptで動く計算フォームを設置してみた

本サイトの以下の記事に数値を入力して計算してくれるフォームを設置しました。

mm→pixel計算フォームと換算表(350dpi & 300dpi)｜印刷に適した画像解像度を知るために – WATANABEDESIGN.Blog https://watanabedesign511.info/archives/13020

文字サイズ「mm・級（Q）・ポイント」計算フォームと換算表 – WATANABEDESIGN.Blog
https://watanabedesign511.info/archives/13015

こういった計算フォームのHTMLをChat GPTで作ることができたので、その方法をご紹介します。

Chat GPTに入力するテキスト

例えば、以下のようなテキストをChat GPTに投げます。

２つの数値を入力し、足し算をしてくれる計算フォームのHTMLを書いて

そうすると以下のような感じでコードを書いてくれます。

書き出されたコードの内容

<!DOCTYPE html>
<html>
<head>
    <title>足し算計算フォーム</title>
</head>
<body>
    <h1>足し算計算フォーム</h1>
    <form>
        <label for="num1">数値1:</label>
        <input type="number" id="num1" name="num1"><br><br>
        
        <label for="num2">数値2:</label>
        <input type="number" id="num2" name="num2"><br><br>
        
        <input type="button" value="計算" onclick="calculate()">
    </form>
    
    <p id="result"></p>
    
    <script>
        function calculate() {
            var num1 = parseInt(document.getElementById("num1").value);
            var num2 = parseInt(document.getElementById("num2").value);
            var result = num1 + num2;
            document.getElementById("result").innerText = "結果: " + result;
        }
    </script>
</body>
</html>

このコードをWordpressのブロック要素「カスタムHTML」を選んでペーストします。