Affinity Designerを導入しました。
UIはクリスタよりわかりやすく迷うことがありませんでした。数時間で実作業レベルまで使えるようになりましたので、解説不要なソフトかもですけど、一応めもしておきます。
(追記)UIとパスはまあまあよいのですけど、半年弱してベクター線単純化など機能が足りずクリスタ(CLIP STUDIO PAINT EX)に作業を戻したものがあります。。安価なCLIP STUDIO PAINT PRO版もあります。詳細はこちら!
必要に応じて追記しています。長くなってきたのでcommad+Fで検索するか、目次を利用するかしてください。
- Affinity Designer v2のおすすめ本
- Affinity Designer v2(アフィニティデザイナー)の使い方
- パスのハンドルを片方動かす
- パスの結合・除外
- 複数のカーブを繋ぐ
- パスの続きを描く
- パスの切断と閉じる
- パスのノードを四角を丸にする
- ノード(パスのポイント)を削除
- 図形をパスに変換
- 塗りつぶしなし
- 左右対称(シンメトリーの反転)
- 基本点を作って左右反転
- 点の数調整
- ブラシ(デザイナーペルソナとピクセルペルソナ)
- 消しゴム
- カーブの線の色をまとめて変える
- ズーム
- 新規作成で自分のプリセットを追加
- 透過png
- 言語を変える
- ベベルとエンボス
- 等角投影は3点透視などの透視図法にサポートされている?
- 長方形などのシェイプを数字の直打ち調整
- 同じptなのにシェイプの境界線とカーブの境界線の太さが違う!?
- 破線のイメージを調整
- 点線・破線を正円にする
- 全体のイメージをグレースケールで確認する
- 角丸の三角形の描き方
- 角丸の四角形の重ね方
- カーブをマスクで抜く(ベクター線をマスクで消す)
- ベクターのレイヤーマスクの作り方
- グラデーションマスクの作り方
- 線、塗りのグラデーション
- 文字のグラデーション
- グラデーションの角度を変更
- グラデーション・パターンをパレットに保存
- グラデーションの中心座標をずらす/ずれる/表示がおかしい
- ピクセルレイヤーのグラデーション
- ピクセルレイヤーの色を変える
- ピクセルレイヤーの結合
- 個別オブジェクトの座標を元に、複数の長方形のサイズを一括で変更する
- ツールを2列にする、移動する
- 拡大縮小しても線の太さは変わらない
- レイヤーとグループの違い、子レイヤーの単体選択はどっちが優れている?
- 回転のリセット
- 境界線の不透明度を数値入力する方法
- Affinity Designerのバグ
Affinity Designer v2のおすすめ本
こんな本がでているようです。
ポチップ
上記の本はkindle unlimitedユーザーなら無料で読めます。
kindle unlimitedのまとめ記事はこちらです。
Affinity DesignerはUdemyでも動画学習できます。
Affinity Designer v2(アフィニティデザイナー)の使い方
要点のみ簡単に。
パスのハンドルを片方動かす
optionを押しながら
パスの結合・除外
2つパスを選んで
右クリック > ジオメトリ
いろいろあるので、好きな結合方法を選べます。
追加：合体見たい感じ。外枠が残る形。中の線は消える。
除外：2つ目の線により除外される感じ
交差：重なっているところが残る
中マド：重なっているところが消える。あまり使わない
除算：1枚目は重なりが除外、2枚目はもうひとつのカーブの重なりが除外、重なりのレイヤーが追加。あまり使わない
カーブを結合：パスを維持したまま１枚のレイヤーになる
追加と除外がよく使いそうです。やってみた方が早いです。
図形の結合とカーブの結合の違いは、理解しておく必要がありそうです。
Affinity Designerの結合2パターン
— 個人開発作家 neru (@neruplan) February 6, 2024
カーブの結合は、線と線をつなぐ。
欠けたドーナツ型を閉じたい場合は、カーブの結合を選べない。ポイントを重ねてドーナツにした上で
右クリック > ジオメトリ > 追加
こっちは図形の結合という感じですかね。#デザイナーと繋がりたい #AffinityDesigner
複数のカーブを繋ぐ
- ノードツールで2つのカーブを選ぶ
- 画面上にある[ カーブを結合 ]のアイコン
- 囲みたい場合は、画面上の[ カーブを閉じる ]アイコン
そしたら塗りつぶしもできます。
パスの続きを描く
このやり方はちょっと気付きにくいです。
まず、パスツールを選び、続きを描きたいパスの終点をクリックして動かしてみます。すると、そこが開始点になります。その上で次の点を描きます。
単純にクリックするだけだと、選べていないことが多いです。別レイヤーになったら誤操作です。
終点のパスポイントを微妙に動かして、開始点になっていることを確認したのちに、次の点をうつとよいです。
パスの切断と閉じる
どちらもノードツールを選びます。選ばないと表示されません。
アクション > 画面上の[カーブの切断]
アクション > 画面上の[カーブを閉じる]
パスのノードを四角を丸にする
画面上の変換:スムーズのアイコン
ノード(パスのポイント)を削除
他のツールとちょっと違うかも。
ノードツール > ノードを選ぶ(ポイントが白から青になる) > deleteキー
図形をパスに変換
円 > 描く > 右クリック > カーブに変換
塗りつぶしなし
不透明度を左
左右対称(シンメトリーの反転)
次のコマンドで左右対称になります。
レイヤーを選ぶ
表示 > スタジオ > シンボル > 作成
あとはレイヤーを複製し、配置位置を調整してあげるだけ。
作成したレイヤーを右クリックから複製
レイヤ > 変換 > 左右反転
反対の位置に移動する
それ以降の描画が左右反転になります。
基本点を作って左右反転
太陽のようなアイコンを作る際に便利です。
- 画面上部の変形起点を有効にする(グループ化解除の右隣のアイコン)
- 基準点が表示されるためドラックアンドドロップで移動する
- オブジェクトをコピーして変形ツールのRに90、180、270などをいれる(1/4作ればコピペで完成です)
なお、グループ化した親の基準点を変えるのはかなり有効な技です。
点の数調整
個別調整はできますけど、修正は少ない方がいいですよね。
スピーディの方が点が少ないです。
あと、ブラシはスタビライザという機能で綺麗な線がひけます。
ブラシ(デザイナーペルソナとピクセルペルソナ)
デザイナーペルソナ：パスを選んだ状態で、ブラシのタブをクリックしてパスに沿ったブラシ
ピクセルペルソナ
塗りもカーブで描いていっていいのか、ちょっと疑問でしたが、
こちらの動画では普通に描いていますね
この頃からAffinity Designerを使いこなしていた人いるんですね。いい絵です。
こちらはピクセルレイヤー１枚で描いていっていますね。
つまり、どちらもありということ。
消しゴム
画面左上で[ピクセルモード]のアイコンを押してに切り替える。(デザイナーペルソナでは消しゴムアイコンがない。最初、ちょっと戸惑った)ツールの内容が変わる。消しごむアイコンを選び消す。
消しゴムも描いたブラシにより処理が違います。
カーブに消しゴムをあてるとマスクとして処理されます(カーブが複数重なっているとわかりにくいことも。。)。
ピクセルのレイヤーなら普通に消せます。
カーブの線の色をまとめて変える
1、レイヤー右クリック > グループ化
2、グループの大元の色を変える
ちなみに個人的に表記はRGB16進数スライダーの方がわかりやすい!
ズーム
ズームはクリスタと同じドラッグ&ドロップ
新規作成で自分のプリセットを追加
ファイル > 新規 > [ 自分のプリセット ]のタブを選択 > 幅と高さなどを設定する > + のアイコンを押す
うっかりと[ 作成 ]を押さないようにしてください。
名前は追加されたプリセットを右クリックすると[プリセット名の変更]で変更できます。
透過png
ファイル > ドキュメント設定 > カラーのタブ > 透明な背景
言語を変える
時々、英語にしたいときがあるかもしれません。
Affinity Designer > 環境設定 > 言語
ベベルとエンボス
使ってみましたけど、Photoshopの方がよいです…。。Photoshopの記事はこちら！
等角投影は3点透視などの透視図法にサポートされている?
表示 > スタジオ > 等角投影
という機能があります。
透視図法にサポートされているかは、ヘルプに記載されていました。
等角投影をはじめとする軸測グリッドは、本質的に平行投影です。つまり、グリッドラインが透視投影のように消失点に収束することは決してありません。Affinityでは透視投影がサポートされていません。
ぜひ、サポートしてほしいですね。
他に方法がないか探しました。パースペクティブで有名なLazy Nezumi Proの情報です。
Lazy Nezumi Pro update #143 (21.04.03) adds Windows Ink support to more apps, including Serif Affinity Photo and Designer.https://t.co/L7s6s6s0tG
— Lazy Nezumi Pro (@LazyNezumiPro) April 3, 2021
もっていますけど、Macにいれてしまったため、未検証です。
クリスタならMacもWinもパース対応していますよ。
長方形などのシェイプを数字の直打ち調整
表示 > スタジオ> 変形
で、入力ボックスがでます。
同じptなのにシェイプの境界線とカーブの境界線の太さが違う!?
この症状は一瞬でわかりました。
シェイプの形状の順序の設定がおかしいです。
画面上部の[境界線] > 順序の[境界線を全面に描画します]のアイコン
破線のイメージを調整
- [ペンツール]で線を引きます。
- 線を破線にする。
- その下にある破線の4つのパラメーターが肝です。1.1.0.0 が初期値。
1つ目(プログラム的にいうと1つ目の引数ですかね)が横幅の長さ。1だと正方形。2だと横2縦1の長方形です。2つ目はスペースですね。考え方は一緒です。3つ目と4つ目は使用していないので割愛しますが、もう少し凝った破線を作る場合使うようです。
点線・破線を正円にする
少し頭を使う必要がありました。
線端をラウンド線端にすると丸みがつきます。
ただ、仕様が曲者でこのラウンド線端は1マス分使うのです。長細い角丸になってしまいます。
そのため、線の長さ0にします。
長さ、間隔、長さ、間隔という順番です。同じパターンで繰り返したい場合、１番目と２番目を指定するため、回答をかくとこうです。
0.2.0.0
全体のイメージをグレースケールで確認する
モノクロでイメージを確認したいときってあると思います。
- アートボートもしくは全体をまとめるグループを作成します。
- トップ(もしくはアートボート)に調整レイヤー > Hsl…をひも付けます。
- Hslの彩度のシフト -100%にします。
チェックを外すためで元に戻ります。
角丸の三角形の描き方
三角形のツールを使うとできません。ポリゴンツールで辺の数を3にして赤いポイントをいじります。少しいまいちですが、それっぽくなります。
角丸の四角形の重ね方
Photoshopの場合、マスク処理をすぐに考えますけど、
Affinity Designerの場合、レイヤーごとに個別に角丸処理する方がよさそうです。
カーブをマスクで抜く(ベクター線をマスクで消す)
一部、ベクター線を消す方法です。
- レイヤーメニューから先にマスクを作る
- ピクセルペルソナに移動
- 消しゴムツールで消す
消しすぎた場合はペイントブラシツールで描けばいいです。
ベクターのレイヤーマスクの作り方
１、図形で円を描く
２、円をドラックアンドドロップして、円を入れ子にしてあげるとマスクが適用される
グラデーションマスクの作り方
- レイヤーメニューから先にマスクを作る。
- マスクを選択する。
- ドラックして始点と終点を決める
- 画面上部のグラデーションを開いてグラデーションを調整する
あまり直感的ではないかもしれません。クリスタやフォトショを使いたくなりました。
イラストの作業はクリスタに戻しました。便利ですよ。クリスタの記事はこちら！
線、塗りのグラデーション
グラデーションをかける方法はいくつかあるようですが、下記が個人的にわかりやすいです。
オブジェクトを選択 > 境界線 or 塗りつぶし > [ グラデーション ]のタブ > グラデーションを設定
グラデーションの方向はツールパネルからいけます。
グラデーションツール
を選びます。
線と塗りの反転は
表示 > スタジオ > スウォッチ
パネルからいけます。他にもあるかももしれません。
文字は右クリックでカーブに変換する必要があるようです。
文字のグラデーション
文字のグラデーションはレイヤー効果を使うとよいでしょう。
レイヤーパネルのレイヤーエフェクト > グラデーションオーバーレイ
グラデーションの角度を変更
デザインペルソナの塗りつぶしツールで行うようです。
数値入力はできない？ようです。ただし、Shiftキーをおすと、45度の角度が維持されます。
オブジェクト選択 > 塗りつぶしツール選択 > グラデーションの○がでるためドラック&ドロップでいじる。
拡大すると操作が容易です。
グラデーション・パターンをパレットに保存
複雑なグラデーションは作るのが大変なので、一度作成したものは保存しておきたいでしょう。
スウォッチ > 画面右上のメニュー > アプリケーションパレットの追加 > セレクトボックスの[ アプリケーションパレット ]右隣にあるアイコン(マウスオーバーすると、「現在の塗りつぶしをパレットに追加します」とでます。とでます。)
- アプリケーションパレット： アプリ上での共有されます。
- ドキュメントパレット： 現在のドキュメントのみで利用できます
2つあるけど汎用性を考えるとアプリケーションパレットの方が便利な気がします。
2回目からはパレットを選択して、追加のアイコンをクリックするだけです。マウスオーバーすると、「現在の塗りつぶしをパレットに追加します」とでます。
名前は次の方法で変更します。
スウォッチ > 画面右上のメニュー > パレット名を変更
削除はパレットで右クリックして削除。
グラデーションの中心座標をずらす/ずれる/表示がおかしい
グラデーションツールを選択すると原因がわかります。ずれている場合が多いかも…。
ピクセルレイヤーのグラデーション
このUIはちょっとあれなんですけど、ピクセルレイヤーのグラデーションをかける際に、デザインペルソナに戻らなければいけないようです。
選択範囲を決める > デザインペルソナのグラデーション > ドラックでグラデーションをひく
グラデーションツールを使用すると、すべてのレイヤーにグラデーションカラーを適用および調整することができます。これには、ピクセルレイヤー、塗りつぶしレイヤー、調整レイヤー、ライブフィルタレイヤー、レイヤーマスク、およびベクターコンテンツとテキストコンテンツが含まれます。
https://affinity.help/photo/ja.lproj/index.html?page=pages/Tools/tools_gradient.html?title=%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%84%E3%83%BC%E3%83%AB
ピクセルレイヤーの色を変える
直感でテストしたところこの方法でできました。
ピクセルペルソナ > [ 塗りつぶし選択ツール ]で選択
ピクセルペルソナ > 塗りつぶしツール
ピクセルレイヤーの結合
下記でいけましたが、二度手間なので少しまどろっこしいですね。
- 右クリック > グループ化
- 右クリック > ラスタライズ
個別オブジェクトの座標を元に、複数の長方形のサイズを一括で変更する
この方法は知っているか知っていないかで作業効率が大きく変わります。
画面上部の [オブジェクトを別々に変換]をチェックする
だけです。10インチ程度のタブレットではメニューが隠れてsまう場合があるため注意しましょう。[グループ化]のボタンの隣にあります。
普通、複数選択するとそのトータルの座標が軸になりますが、このチェックをいれると個々の中心座標になります。
ただし、バグなのか最初の1個だけがそうならないことがあるため注意しましょう。1個なのですぐなおせます。
ツールを2列にする、移動する
デフォルト状態は一体になっているようです。モバイルタブレットではZoomツールなどがウィンドウ外に切れて表示されない場合があります。これでは困ります。
表示 > [ ツールをドッキング ]のチェックを外す
拡大縮小しても線の太さは変わらない
拡大縮小しても線の太さは変わらないようです。個人的にはこの方がやりやすいですね。結構、拡縮するので微妙に統一感がなくなるのが嫌だからです。設定で変えられるみたいです。
レイヤーとグループの違い、子レイヤーの単体選択はどっちが優れている?
わりとよくあるパターンとしてテキストがたくさん入ったグループと、オブジェクトがたくさんはいったグループがあるとします。個人的にWindowsとMacでは入っているフォントが違うため、テキストはなるべく１箇所にまとめておきたいです。
テキスト単体とシェイプ単体をセットで選択して中央合わせなどしたい場合があります。グループの場合、親のグループを選択してしまいます。。そのオブジェクト単体を選択する場合、Controlキーを押せばいいのですけど、複数選択すると、Control + Shiftキーとなり大変です。1回ならいいんけど、大量に選択すると指が疲れます。。
それに対してレイヤーの中に子レイヤーが入っている場合、異なるレイヤーの子レイヤーの組み合わせでも普通に選択できます。複数選択の場合はShiftキーのみでいけます。
いちいちデータを作り直さないといけないのか、というとそんなことはありません。グループをレイヤーに昇格させると、選択が容易になります。どうやらAffinity Designerではレイヤー君が上位という位置付けのようです。グループを選択して次の方法でいけます。
レイヤー > グループをレイヤーに昇格
グループの利点はもしかしたらデータ的に軽いなどあるかもしれませんが、あまり調べていないのでよくわかっていません。必要ならレイヤーに昇格するとよいかもしれません。圧倒的に選択が楽になります。
あ、その後、グループのメリットがいくつかわかりました。グループはテキストの場合、フォルダごと一括ラスタライズが可能です。レイヤーはなぜかできないのですよね。またレイヤーにレイヤー効果をつけてもうまく反映されません。まとめてレイヤー効果をつけたい場合、グループにつける必要があります。
レイヤーからグループに戻す場合はまた複数選択してグループ化してあげることです。これでまとめてラスタライズできます。レイヤーからグループに変換するコマンドは見当たらず、今のところこの方法しか思いつきません。
回転のリセット
回転したけど、今の状態を0にしたい場合があります。そんなときに便利です。
画面上部の[ 選択ボックスの切り替え ]というアイコンをおすだけです。
左揃えの左にあります。
(追記)…Affinity Designer v2からアイコンが消えました…。
メニューは残っていました。
表示 > 選択ボックスの切り替え
(ただ、このコマンド一瞬ゼロになるけどレイヤーを選び直すとまた角度はいっているなあ。バグ？少し困っている。)
ハンドルをダブルクリックする方法もありますけど、角度が0度に戻るだけなので[ 選択ボックスの切り替え ]とは違います。こちらはAf2でもできます。
Affinity Designerでオブジェクトボックスのハンドルをダウブルクリックすると回転がリセットされるの知ってました？ pic.twitter.com/eQD2Ymsi4A
— Rriver (@rriver) April 20, 2020
境界線の不透明度を数値入力する方法
境界線の不透明度が数値入力できません。
ただ、よくみたら別タブからできました。
表示 > スタジオ > カラー > 不透明度(選ぶことも数字でうつこともできます)
できたら境界線の方からも指定できるようにしてほしいですけど…。
Affinity Designerのバグ
アートボードの直下の１番上のレイヤー
(追記)最新版で修正されたようです。
レイヤーで、アートボードの直下の１番上のレイヤーに移動すると、なぜか１番したに飛ぶ。。
2番目に移動して１番上にあるものを下に移動するという操作が必要。。。
座標がおかしい
長く利用していると座標がおかしくなることがありました。再起動でなおりました(アップデートしたからそちらかもしれません)
コメント