Affinity

CanvaがAffinityを「完全無料・永遠に」と宣言！ すごい！という感覚と、大丈夫？という感覚が交差した。使うユーザーにとっては願っても無いこと、もちろんすぐにダウンロード。 これから多くの人がこの「Affinity」を使い出すのは間違いない。これには生成AI機能もあるのだが、これだけはオプションとして有料になるようだ。 これから後も、いろんな機能のアップデートは全て無料とのこと。日本人にとって一つ残念なことは、テキストの縦書きが今回もサポートされていないと言うこと、これはこれからAffinityを使って本格的に仕事しようという人にとっては致命的なものになるのでは？と思っている。 この投稿は以下のYouTubuを見て、テスト実行した内容になる。より詳しい内容は以下のサイトで確認。 説明YouTube：https://www.youtube.com/watch?v=UP_TBaKODlw Affinityのスタート画面 以下は「Affinity」を起動した最初の画面。多少いじくったので、中央の画面が少し違うと思うが以下の様になっている。 以下が上の中央にある別ウインドウになっているホーム画面。お気に入りや、最近使用したドキュメント、設定したテンプレートなどが表示されている。作成開始となっているところに、自分で作成したファイルが表示される。 下の「Welcome to Affinity」は例題を使ってAffinityの追加方説明している。 新規ドキュメントの作成 新しいドキュメントを作成し、独自のプリセットを作成するには右上の「＋」ボタンから始める。このボタンをクリックすると以下の画面になり、サイズを指定することができる。他にもドキュメントのフォーマットなどの基本設定になる。 チュートリアルのサンプルをダウンロード これはクラウドマークをクリック、青色の進捗バーが出る、内容によっては時間がかかる。ダウンロードというより、クラウドにアクセスしている感じ、終わったらまたクラウドのアイコンが表示されるのでダウンロードはしていないと思うのだが？。 以下の画像で、中央を見ると「雲マークのダウンロード」アイコンがある、これはまだダウンロードされていないサンプルになる。左側はそのアイコンが表示されていないので既にダウンロード？したサンプルということになる。 ダウンロード中は下の中央画像のように青色の進捗バーが出るのでわかると思う。動画が含まれている場合は時間がかかる。 以下の左を試しにダウンロードして見てみる。 ダウンロードが完了すると自動的に以下のような画面が開く。右側に小さめの動画チュートリアルが表示され、左の下になっている大きな画面で実際に動画を見ながら編集の練習ができる様になっている。 以下はこの最初の説明を翻訳したもの。 Embedded Documents and Non-Destructive EditingIn this topic, we will create a mockup with a placed Affinity file, using shapes, the Perspective Tool and Adjustments.Your project file includes a placed Affinity file. It has been added as shown in the video and hidden for us to use later. 埋め込みドキュメントと非破壊編集このトピックでは、配置されたAffinityファイル、シェイプ、パースツール、調整機能を使ってモックアップ（サンプル）を作成します。プロジェクトファイルには配置されたAffinityファイルが含まれています。このファイルはビデオに示されているように追加され、後で使用するために非表示になっています。 スタジオドックについて メインアプリで、最初に目にするのは、上部に新しいスタジオドッグがあるということ。デフォルトでは、Vector Studio、Pixel Studio、Layout Studioとなっている。これはAffinity Designer、Affinity Photo、Affinity Publisherと同じものになる。 そして、この３つのスタジオ間はシームレスに切り替えることができる。しかしこれまでと、このツールの真の違いは自分の好きなようにカスタマイズできる点にある。 実際にやってみる、「ピクセル」スタジオを選択、左のサイドバーの一番下の「三点アイコン」をクリック。 以下の画面が出る。これでツールバーをカスタマイズすることができる。例えば、Pixel Studioにアートボードツールが必要だとする。それを以下の様にドラッグして追加するだけ。 自分にとって必要なものだけを入れことができるので便利ではある。 あるいは、ピクチャフレームを追加したい場合など、これまでピクチャフレームはPublisherだけで利用可能だったが、これからはピクセルスタジオでも利用できる様になる。 検索ウインドウで「ピクチャ」と入れるとその項目が表示される。検索はシビアで「ピクチャー」と入れると検索されないので注意が必要。 サイドバーに入れるのは先ほどのやり方と同じドラッグして入れるだけ。 また、必要に応じてPixel Studio内でも使用したい場合は、それを実行できるようになった。 また、必要に応じて複数のツールをネスト（入れ子）にすることも簡単になった。ここで以下の様に「エフェクト」を選択してみる。 追加できるライブフィルターツールが多数表示されるので、ここで１つ追加してみる。そして、そこに「ドック」が構築されているのがわかる。 以下の様にドラッグして、複数のツールをネスト（入れ子）にすることができる。つまり、必要に応じて、よく使うエフェクトのグループとしてまとめて表示することが可能になるということになる。 他には、豊富なツールヒントも追加されている。ツールが不要な場合。 実際にこれらをオフにするには、左側のツールバーを右クリックし、表示されたメニューからオンとオフを切り替えることができる。 また、サブツールと呼ばれるものも追加された。サブツールをオンにすると、ネスト（入れ子）にされているすべての項目で２番目のツールバーが表示される様になる。このサブツール、現時点では長方形が選択されており、実際に全ての図形が右に表示されている。 そしてこのサブツールは、実際に好きなところに移動したりして、操作を行うことができる。 上部のツールバーも完全にカスタマイズが可能。以下の様に上のバーのどこかを右クリックして「ツールバーをカスタマイズ」を選択。 必要な項目をツールバーにドラッグして入れることができる。 テキストの「ベクタービュー」と「ピクセルビュー」の切り替え 以下の場合は、ピクセルスタジオで画像の上に「Affinity」とテキストを入れている状態である。 このテキストを拡大して見てみると、ベクタービューになっていることがわかる。カーブのところのテキストはベクターで表示されているので、いくら拡大しても綺麗なカーブになっている。 これは以下の様に上部にあるトグルで切り替えることができる。左側を選択するとベクタービューになり。 右側をクリックするとピクセルビューになるのがわかる。ピクセルになると、大きく拡大するとビットマップになっているのがわかる。 「ワイヤーフレームビューモード」と「Retinaピクセルビューモード」 もう一つチョットした機能がある。右側のピクセルビューモードを右クリックして「詳細」に進むと、 以下の様に変化して、左から２番目の「ワイヤーフレームビューモード」や、右端の「Retinaピクセルビューモード」等を選択することもできる様になる。 「Retinaピクセルビューモード」は、高解像度ディスプレイ（Retinaディスプレイなど）上で、デザインがどのように表示されるかを正確にプレビューするための表示モードの一つ。 「ワイヤーフレームビューモード」の説明として以下の様画像があるとすると、 「ワイヤーフレームビューモード」を選択すると、以下の画像の様ににラインで表示される。 フローティング可能なコンテキストツールバー 普通ではコンテキストツールバーは上部に下のように収まっている。これをダブルクリックすることでフローティングさせることができる。 以下の様に上部のコンテキストツールバーは、フローティングすることができ、どこにでも移動することができる様になる。 そして、フローティングされたツールバーはダブルクリックすることで、元の状態にドッキングすることができる。 独自のスタジオを作成する 自分用の、独自のスタジオを完全にゼロから作成することも、既存のスタジオをベースに作成することもできる様になっている。下の画像を見てみると、上の三点アイコンをクリックすると、他のデフォルトのスタジオがいくつか用意されていることがわかる。レタッチ、カラーグレーディング、タイプグラフフィーなど。これらは、アプリで利用できる全てのツールと機能の単なる他のスタジオと同じ構成になっている。 また、Slice Studioがあることも指摘しておきます。それは重要です。何故なら、以前のアプリのいくつかでエクスポートペルソナを使用していた人にっては、基本的にそれがSlice Studioだからです。 これらのスタジオをオン/オフにすると、以下の様に上にあるドッグに追加表示されることがわかる。希望があればこのメニューの位置を上下ドラッグして並べ替えることもできる。 そして、重要なのは実際にスタジオを作成することもできるということ。ピクセルを選択して、「スタジオを作成」をクリック。 以下の様な「スタジオ作成」ウインドウが表示される。 ここでは「My Perfect Studio」と名前を入れて新しいスタジオを作成する。ピクセルからクローンを作成する。色を選ぶ、必要に応じて独自のアイコンを作成することもできる。 例えば、①で色を選択、②と③に色が反映されて、④でアイコンを選択肢、それが⑤に反映されることになる。最後に一番下の「作成」をクリック。 ドッグの以下のところをクリックすると作成した「My Perfect Studio」が表示されるので選択する。ここでは横スペースに限りがあるので以下の様にプルダウンで表示されるが他のスタジオを表示しない様にするならドッグに直接表示される様になる。 上のドッグに表示するには、スライスとCanba AIをオフにして、作成した「My Perfect Studio」をオンにすると下のようにドッグに表示される様になる。 これで、好きなようにカスタマイズできる様になったことになる。そこにブラシを移動するには、ブラシのタブをドラッグして左サイド側に入れることができる様になる。 移動することができた。他にも自由に移動することができる。 Studioを更新するたびに保存するのは簡単。「My Perfect Studio」を右クリックしてメニューから「更新My Perfect Studioスタジオ」を選択するだけ。これで保存した内容が希望通りに更新されることになる。 元に戻すのも簡単。沢山の変更を加えたピクセルスタジオを選択、アートボードツール等を追加し他ので、それを元に戻すために「ピクセル」を右クリックして「復元ピクセルスタジオ」を選択するだけ。 上で追加されたアートボードが消えて元の状態の戻っているのが分かると思う。 これが新しいAffinityの中核となる原則の一部になる。様々なワークフローを柔軟に実現し、独自のスタジオを作成できる様になっている。 「塗りつぶし」ツールによるグラデーションの作成 まずは塗りつぶしツールに加えたい幾つかの変更点について。 簡単なところから、長方形を選択しバックを青色のベタで塗りつぶす。下図の様に「塗りつぶしツール(G)」を選択して青バックの上を下の様にドラッグするとグラデーションが適用される。 この作成されたグラデーションは、①を選択すると表示され、選択しないと非表示になる。②を選択すると③のところで色を変更することができ、④を選択するとその色を③で変更することができる様になっている。この縦のドラッグ位置によって微妙なグラデーションを設定することができる様になる。 例えば青と黄色のグラデーションの場合、２つの混ざった色の中間のところが少し濁ったような感じになることがある。他の組み合わせでも中間点が濁る場合がある。 この問題を解決するために「着色ブレンド」はそれを回避することができる。以下の様にチェックを入れると濁った部分が自然な混ざり合いになっているのが分かると思う。 3Dデータのメッシュの編集 メッシュフィルも追加された。これは説明されているYouTubeの動画から画像を取得させてもらっている。以下の様に3Dで作成されたイラストのハイライトや影の部分を変更できるということらしい。自分のところではそのデータが無いので実際検証できなかったが、説明をそのままここに記述。 以下の様に３Dで顔の部分を選択。 その状態でグラデーションツール（実際は塗りつぶしツールとなっている）をクリックすると既に以下の様な「メッシュ塗りつぶし」が作成されているらしいのでそれが表示されるというわけ。 放射状、線形、楕円形など立体的に表現できるメッシュになっている。 この塗りつぶしツールの他のオプションの１つとしツールバーから「タイプ」を右クリックしてメッシュを選択できる。 メッシュの位置を調整したり、そのポイントまたは他のポイントの色を変更したり、常に様々なオブジェクトを重ね合わせることなく、滑らかなテクスチャを作成できるとのこと。 「調整ブラシ」と「フィルターブラシ」 塗りつぶしツールに関する幾つかの新しい調整ブラシを追加した。 左サイドに「調整ブラシ」と「フィルターブラシ」がある。これらは基本的のそれぞれのブラシを選択するだけで使用できる。コンテキストツールバーを見ると、適用する調整を選択できる。 「調整ブラシ」を選択して上のバーから「露出」をクリックすると、いろんな調整ができる様になる。ここでは「HSL」を選択。調整ブラシツールを使って調整してみる。 画像が明るく色鮮やかになった感じ。 これはワークフローの問題で、これまでマスクを作成して反転して再度適用していた手間が省けるということらしい。 ブラシをかけ始めると調整の設定が表示されるので、その調整をして少しだけブラッシングをする。ここでは追加した彩度の量の変更もできる。下の右の調整ウインドウで彩度のシフトを少し暗くすると山の色が少し暗くなるのが分かる。 フィルターブラシでも全く同じことができる。もちろん、Affinityにはライブフィルターレイヤーがある。 左サイドからフィルターブラシを選択して、上のバー「ガウスボカシ」のメニューから「レンズぼかし」を選択して調整してみる。 この様にボカシを入れることができる。もちろん戻って調整したり、様々な方法でマスクしたりすることもできる。 グリッチフィルター 新しいフイルタータイプも追加されている。これはグリッチフィルターと言う。 現像、歪み、トーンマッピングなどの機能にアクセスできる場所が変更されていること。以前はペルソナやAffinity Photoの様なものだったが、現在はコンテキストツールバーに配置されている。 これは、画像またはピクセルレイヤーを選択しない限り、これらのいずれも使用できないことになる。 画像を選択、更にゆがみを選択して、以前と同じように変形させることができる。 画像をドラッグするとゆがみが適用される。 新しいフィルターがいくつか追加されている。その中の一つ「グリッチフィルター」以下のところから選択できる。 画像の「グリッチ」とは、意図的に画像を乱れさせたりずらしたりする画像フィルター加工のことで、ノイズが走るようなレトロな雰囲気やサイバー空間のような近未来的な演出を表現できる。 以下では「収差ゆがみ」を実行している。 実際に使うかどうかわからないが、シュレッドオプションもある。 グリッチタイプの「ゆがみ」を使用するとこんな感じ。 ここで実際にグリッチのスクランブルを適用してみたい。 以下はスクランブルを41%で設定した状態。 そして、いつもの様に適用するあらゆる種類のライブフイルターはレイヤーになっているので、これは下の画像の右端の目玉アイコンでオンオフ消したり表示したりすることができる。 次に消しゴムブラシを使ってみる。今ブラシを掛けたグリッチレイヤーを選択して、左サイドバーにある「消しゴム」を選択。上のバーで調整しながら消していくと、下の元画像が出てくることになる。これで髪が溶けていくように見えるかな？これが新しいグリッチフィルターになる。 これは便利、ピクセル形式からベクター形式に変換 以下の様にpng画像がレイアウトスタジオに貼られている。 拡大して見てみると明らかにピクセル単位になっていてラスター画像ということが分かる。 こいう時、ベクター形式で欲しいという時もあると思う。「画像トレース」が追加された。この「ベクター」メニューから「画像トレース」を選択すると、ピクセルからベクターに変換できる様になったのです。 画像を選択 -&gt; ベクター -&gt; 画像トレース... 「画像トレース」を選択し以下の様に設定した。下の画像では「エッジのしきい値：50%」になっているが、これでも綺麗にラインになっている。「エッジのしきい値：100%」にすれば完璧。あとは適用をクリック。ラインが綺麗になっているのが分かると思う。 これで、下の画像のようにベクターオブジェクトとして扱うことができ、別々に選択できる様になる。 このラインを綺麗に表示する条件として、画像が高解像度であるほど綺麗になり、低解像度の場合はカーブのラインが少し凸凹になってしまう可能性があるということ。 最後にグループ化すると１つのオブジェクトとして自由にどこにでも配置することができる様になる。一般的なベクター形式の図形と同じになるということ。 データの結合 ついでのもう一つデータの結合について、以前のダイアログでなくパネルとして追加されている。これ、実際にどう使うのか私には理解できなかったが説明どおりに一応記述してみる。 ウインドウ -&gt; レイアウト -&gt; データ結合 Publisher、Designer、Photoにあったパネルを、どのStudioでも選択できる様になったということ。全て、完全にカスタマイズ可能。パネル上部にあるドロップダウンに移動し、パネルを選択する。 すべてのパネルのリストが表示される。 検索で「データ」と入れると簡単に検索できる。データ結合をオンにする。 説明では、ここで以下のパネルが出るはずだが、上の右のウインドウが出て「データファイルを追加...」となる。 データ結合すると、スプレッドシートまたはCSVファイルの行からドキュメントページを自動的に生成できます。始めるにはデータファイルを追加してください。 となっているので、スプレッドシートかCSVファイルを読み込む必要があるようだ。 話を進める、上のパネルが作成できたとしたら、これをオンにしてドッキングできる様になるらしい。 実はこれにソースファイルを既に追加してある。（ここでファイルが必要と出てきた）これは単なるスプレッドシートである。これはパネルになっている。つまり、これをカスタムスタジオに含めることができるということ。 つまり独自の「データマージ スタジオ」を作成したい場合は、これにより独自の「データマージ スタジオ パネル」を作成できるということ。 フォールドやそう言ったものを持つことができる。テキストボックスを追加してみる。フィールドの挿入が簡単になる。 ここでの説明、意味が不明 （このソースファイルの説明が無いので実際の使い方がイマイチ不明） クイックエクスポート 下のPNGをエクスポートの右をクリックすると開く。ここで色んなファイル形式を選択することができる。 右上の＋ボタンで「お気に入り」を指定することもできる。オンに設定したものがお気に入りとなる。選択範囲も指定できる。 出力範囲を「ドキュメント全体、選択エリア、選択のみ」と指定することができる。 メインのエクスポートを開くのではなく、ここからクリックしてエクスポートする。ドラッグ&amp;ドロップして別のフォルダーに保存することもできる。ドキュメントの中にドラッグすることもできる。エクスポート先を指定しておくこともできる。 ベースボードの機能 ボードのバックを右クリックするとメニューが開くので色んな機能が使える。一度右クリックして確認してみると面白いかも。 ベースボードの色も変更することができる。 Canva AI 機能 これはCanvaプレミアムプラン（有料）に加入した場合に使えるスタジオになる。 このスタジオにアクセスすると、色んな条件を設定することにより画像をAIで生成できる機能になる。これはあくまで任意で、プレミアムプランに加入しなくてもAffinityは無料で使用することができる。 Affinityは最初はオンラインでの手続きが必要だが、その後はオフラインでも問題なく使える。 このビデオの最後には、これからのAffinityのiPadの情報や幾つかの機能の開発状況、フォントの無料提供の話があるので見てみるのもいいかも。日本語で解説されているのでわかりやすい。

Affinity

Affinity – ブラシの使い方

Affinity -「合体、型抜き、交差、中マド、分割」の複合作成

Affinity – ライン、カーブ、シェイプの基本

全く新しいCanva Affinityの機能について