ゼロから始めるAffinity3 Affinity初心者講座その2の続き
さて、それでは「その1」を作っている時に「あれ、これはどうするんだろう?」と疑問に思うであろうことを解説していきます。
皆さま、「その1」を作成している時に、疑問に思ったことをメモしましたでしょうか?
これから回数を重ねて、少しずつその疑問を解決していきたいと思います。
ファイルを開く/閉じる
「その1」で保存したファイルを開いてみましょう。
Windowsの操作に慣れていれば、だいたい分かると思います。
一番最初に表示されるwelcome画面の「最近使用したドキュメント」から選んでみたり、
右上にある、「フォルダマーク」をクリックしたり……

メニューの「ファイル」-「開く」をクリックしたり…
(ショートカットキーはCtrl+O OpenのOと覚えると楽です)

Windowsのエクスプローラーから、保存した.afファイルをダブルクリックしたり、右クリックで開いたり,Addinity3ソフトの上にドラッグ&ドロップしたり……

お好きなやり方で開いてください。
また、開いたファイルを閉じるときは、メニューの「ファイル」-「閉じる」

または、ウィンドウの右上にある×ボタンを押すと閉じることができます。
Ctrl+Sでファイルの保存/上書きを忘れないように!

ファイルの内容を変更すると、左上のファイル名に[
変更済み]と文字が表示されます。

変更されていると、閉じる前にその変更内容を保存するかどうか聞かれるので、保存を忘れないようにしましょう。

はい、で変更を保存してファイルを閉じる。
いいえ、で変更を破棄してファイルを閉じる。
キャンセル、で何もしないまま元の画面に戻る、です。
スタジオについて
さて、今まであえて説明していませんでしたが、画面左上の一番いい位置に陣取っているアイコンたち……気になりませんか?

こちら、Affinityの一番ウリの機能、「
スタジオ」というものになります。
Adobe(アドビ)製品では、
- ロゴや印刷物のデザイン=Illustrator(イラストレーター)
- 写真加工=Photoshop(フォトショップ)
- 書籍や頁物作成=Indesign(インデザイン)
とソフトを使い分けますが、Affinity3ではそれらすべてを
1つのソフト内で作ることができます。なんて画期的。
3つのソフトの機能をひとつの画面に押し込むと、ツールの数とか半端なくなってしまうので、「スタジオ」という形で、よく使う機能を分けて、切り替えて、使っていきます。
スタジオ名をクリックすると、そのスタジオに切り替えることができます。
早速、「ベクター」スタジオをクリックして、切り替えてみましょう。
「
ベクター」はロゴ作成や、チラシなどのデザインに適した機能を集めてます。Illustratorに対抗。

「
ピクセル」は画像加工や、写真のレタッチに適した機能を集めています。Photoshopに対抗。

「
レイアウト」は書籍や、ページ物の作成に適した機能を集めています。Indesignに対抗。

その他、「CanvaAI」を使ったAI画像生成に適したスタジオや、Webページ制作のパーツ書き出しに適した「スライス」、色合い調整メニューを集めた「カラーグレーディング」など、様々なスタジオが用意されています。
もちろん、自分の使いやすい「スタジオ」を作ることも可能。
講座「その1」の手順に沿ってドキュメントを作ると、デフォルトで「ピクセル」が選択されていたと思います。
今回はそのまま「ピクセル」スタジオを使って、操作を解説していきたいと思います。
画面の拡大縮小をする
さて、「その2」で
「Ctrl+マウスホイール」で画面の拡大縮小ができるよ、と軽く触れました。
実際に、Ctrl+マウスホイールを使って画面を拡大してみましょう。
マウスの真ん中についている、くるくる回せるボタン(マウスホイール)を、Ctrlキーを押しながら思うがままに回してみて下さい。
逆方向に回せば、画面を縮小できます。
(環境設定で、Ctrlキーを押さずに、マウスホイールだけでも拡大縮小できるようになります)
画面を大きく表示すれば、細かい調整が可能になります。
「使ってるマウスにホイールがないよ!」という方は、左にあるツールの一番下らへんに「
ズームツール」があります。
それをクリックしてください。

マウスカーソルが虫眼鏡の形になります。

その状態で
クリックすると、
画面を拡大できます。
ALTキーを押しながらクリックすると、
縮小できます。
画面をクリックして、
右にドラッグするとスムーズに拡大することができます。
左にドラッグすると、同じように
縮小できます。
ALTキーを押しながら、見たい範囲をドラッグして囲うと、
その部分を拡大してみることができます。

囲った範囲を画面いっぱいに表示

ズームツールのショートカットキーは「
Z」なので、マウスホイールを使わない人は「Z」のショートカットキーを覚えておくといいです。
また、「
Ctrl+
+」(れのキー)と「
Ctrl+
-」(ほのキー)でも拡大縮小できます。
スペースキーを押した状態でCtrlキーを押すと、ズームツールを選択している状態と同じ操作ができます。
自分の使いやすい方法で、画面の拡大縮小をして下さい。
(=・ω・=)<ちなみに自分は、環境設定でマウスホイールのみで拡大縮小できるようにし、細かい調整はスペースキー+Ctrl+マウスドラッグ、でしてます。便利。
Ctrlキー先に押しちゃうとできないので、スペースキーを押してからCtrlキーを押してください。
画面の移動をする
さて、画面を拡大すると、「もうちょっと右を見たいのに~」と、もだもだすることが多いかと思います。
一応、カーソルがある位置(ドラッグで拡大するときはカーソルの開始位置)を基準に拡大縮小しますが、狙った場所をピンポイントで拡大するのは、最初は難しいかと思います。

そんなときは、ズームツールの上にある、手のひらの形をした「表示ツール」をクリックして下さい。

表示ツールをクリックすると、カーソルの形が手のひらに変わります。
マウスをクリックしてドラッグすると、画面を掴んで移動することができます。

ショートカットキーの「
H」でも手のひらツールにできるのですが、
スペースキーを押すと、
スペースキーを押している間だけ手のひらツールに切り替えることができます。超便利。
また、
マウスホイールの押し込みでも、画面を移動することができます。
Blender(ブレンダー/3DCGソフト)使いの人はホイール押し込みの方が使いやすいかと。
画面移動と拡大縮小はものすごく使うので、ショートカットキーなど、自分の使いやすくて速い方法を見つけておくと、後々楽になります。
表示をキレイにする
さぁ、画面を拡大縮小してみて。多くの方はこう思ったのではないでしょうか?
「なんか、拡大すると線がガビガビしてない?」

気になるかもしれませんが、表示倍率100%で表示したときに、線がガビガビしていなければ大丈夫です。
左上のファイル名の横が、「100.0%」になっているとき、どう見えるか確認してください。

メニューの「表示」-「ズーム」-「100%」で、100%の大きさで表示できます。
(※WEB用の表示。印刷用の原寸表示は「実寸」を選んでください)
Ctrl+1を押すと、一発で100%表示できるので、このショートカットキーを覚えておくと便利です。(ちょっと高度なので覚えなくてもいいです)
さらに言うと、
Ctrl+0を押すと、
「アートボード」全体を表示することができます。
「
アートボード」とは、ドキュメントを開いたときに表示される白い画面、キャンバスの事を言います。
ひとつのドキュメントに複数のアートボードを作ることができます。
「アートボード」という単語は、これからよく出てくるので頑張って覚えて下さい。
アート(絵/art)が描かれたボード(板/board)です。
雰囲気で何となく「これかな?」と察せられればOKです。
うろ覚えでも、意味が分かればいいんです。ガチガチに暗記するのではなく、雰囲気で乗り越えましょう。

Ctrl+0は慣れてきたらものすごく使うショートカットなので、余裕ができたときに思い出してください。
100%表示でガビガビしていないなら大丈夫なんですが、どうせなら拡大してもできるだけキレイに見たいですよね?
そんな時は、ツールバーにある「べクター表示モード」アイコンをクリックしてください。
デフォルトでは「ピクセル表示モード」になっていると思います。

ピクセル表示モードは、現在のピクセルサイズに合わせて、実際のWEB上で表示される見栄えを確認することができます。
講座その1では、1280px×720pxでアートボードを作成しました。
これは、小さな点を横に1280個並べた画像、ということです。
ピクセル表示モードで思いっきり拡大すると、四角いマス目が見えてきます。
この1個を、1px(ピクセル/画素)と呼びます。

画素数が低いときは、ベクターも画素数を低く表示して……と説明すると難しくなるので、とりあえず
「ベクター表示モード」にしておくと、線がキレイに見えるんだな、とだけ覚えておいてください。
講座が進んだときに、解像度とかDPIとかそこら辺の解説をする予定です(=・ω・=)
いまはとりあえず、「ベクター表示モード」にするだけでOKです。
ピクセルとかも、一旦忘れてOKです。
拡大すると、このくらい見栄えが違います。

環境設定からデフォルトの表示を「ベクター表示」に切り替えられるので、
気になった方は「
Affinity by Canva(Affinity3) で最初に設定しておくと楽なこと」を参考にして下さい。
境界線を太くする
さて、講座「その1」で境界線に色を付けた方は、大体の人がこう思ったのではないでしょうか?
「もっと線を太くしたい!!」
デフォルトの境界線はほっそいです。

線を太くするには「
コンテキストツールバー」を使うか、「
境界線パネル」を使います。
「その1」で軽く触れた、「コンテキストツールバー」を使って線を太くしてみましょう。
1.線を太くしたい図形を、移動ツールでクリックして選択する
ドラッグして選択してもOKです。
2.ツールバーの下にある「コンテキストツールバー」から、「境界線の幅」をクリックして、好きな太さにする

スライダーを動かしても、ボックスに数値を入力してもOKです。
これで線を好きな太さにできるようになりました。
なんか変えたいなーって時は、オブジェクトを選択して、コンテキストツールバーにある項目を確認すれば、大体のやりたいことができるようになっています。
コンテキストツールバーにない時は、右クリックで表示されるメニューにあったりします。

できる限り解説していきますが、解説が間に合わないときは参考にしてみて下さい(=・ω・=)
今日覚えたこと
-
ファイルを開く/閉じる…変更がある場合は、ファイル名のところに[変更あり]と表示される
-
スタジオ…それぞれの作業に適した機能が集められている。作業によって切り替えて使う。
-
ベクタースタジオ…ロゴやアイコン、チラシなどをデザインするのに便利な機能を集めた画面
- ピクセルスタジオ…画像加工や、写真のレタッチに適した機能を集めた画面
- レイアウトスタジオ…書籍や、ページ物の作成に適した機能を集めた画面
- 画面の拡大縮小…マウスホイール、またはズームツール、ショートカット
- 画面の移動…表示ツール、スペースキー、マウスホイール押し込み
-
アートボード…ドキュメントを開いたときに表示される白い画面、キャンバス
- ベクター表示…拡大したときに線がキレイに見える

だんだん難しくなってきましたが、とりあえず用語は暗記しないで、なんとなく「これのこと言ってるのかな?」と察せられるレベルでOKです。
使ってるうちにそのうち自然と覚えてくるので、とりあえずは触って、いろいろ試してみましょう(=・ω・=)
Affinity初心者講座その4 に続く