Adobe illustrator入門

#Adobeを安く購入
デジハリだと40000円弱で購入できる
[参考リンク](https://reach-rh.com/digi-holly-adobe-cc/)

お試しだけしたい人はadobe公式サイトから一週間だけ試用できます。

#おすすめの初期設定を完了させる
ツールバーなどの
・[Illustrator導入時にしておくべきおすすめの初期設定
](https://designerbrg.com/illustrator_config/)

####・ 詳細ツールバーの導入
ウィンドウ > ツール > 詳細ツールをクリック
初期設定だと左側の一行しかないが、右側のより詳細なモノが追加される。
![スクリーンショット 2021-02-09 15.26.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/567cb293-3cda-670d-61fe-4117c14495a1.png)

さらに細かく設定したい方は以下リンクを参照
・[参考リンク|Illustrator のツールバーをカスタマイズしたい（CC 2019 新機能）
](https://www.too.com/support/faq/adobe/23513.html)

####・ コントロールメニューバーの表示
ウィンドウ→コントロールで表示できる
![スクリーンショット 2021-02-09 15.24.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/a90cd0b6-a24c-e78d-a45f-04edd0b43d41.png)
引いた線が何pxか〜とか。角丸の数値とかをpxで調節できる


####環境設定で定規表示をONに(me)


#イラレのショートカットを全て試しながら、どんな事ができるのかを調査
Qiitaを見てる人はすでに知っていると思いますが、PCを使って何かをするならショートカットをなるべく早く覚えた方が作業が効率化できます。。
ショートカットを制するものは人生を制す。って元楽天のトップ営業マンが言ってました。
ショートカットを試す事で、イラレでどんな事ができるのか。どんな用語があるのかも一緒に覚える事ができます。
何かわからない単語が出てきたらすぐにぐぐる事。

個人的によく使うものチートシート

| ショートカット | できる事 |
|:-:|:-:|
|  V |  選択ツール |
|  P |  ペンツール・アンカーポイントの設定 |
|  M | 長方形ツール  |
| Q  | 投げ縄ツール  |
| H  | 手のひら　ツール  |
|  オブジェクトを最背面・最前面 | command + shift + [  |
| レイヤー追加  |  option + command + L |
| オブジェクトのロック、 アンロック  |  command + 2 command + option + 2 |
|  環境設定の表示 |  command + K |
| 拡大、縮小  |  command + + 、 command + - |
| ピクセルプレビュー  | command + option + Y  |
| 定規表示 |  command + R |
|  テキストパレットの表示 | cmd + T  |
|  文字感覚を広げる/縮める | option + ←/→  |
|  別ツール選択時のドラッグコピー | cmd + option +　ドラッグ  |
| 文字を大きく/小さくする  |  cmd + shift + </> |
| 画像を配置  |  cmd + shift + P |
| 線幅調整ツール(ベジェ曲線など)  | shift + W(その後option +  ドラッグで片方だけ幅を広く) |
| ライブペイントツール  |  K |
|  クリッピングマスクを適用 | cmd+7  |
|  ガイドを非表示 | cmd+:  |

[ピクセルプレビューとは？= IllustratorをWeb向けに利用するときには、ピクセルプレビューをオンにして使います](https://www.dtp-transit.jp/adobe/illustrator/post_1518.html)

・もっと知りたい方はこちら[これで作業効率が劇的に上がる！Illustratorのショートカットキー早見表](https://helpx.adobe.com/jp/illustrator/how-to/use-shortcut-keys-for-efficiency-illustrator.html)
・[こちらもわかりやすいです](https://ai-communication.jp/wp-content/uploads/2017/07/be2197530961e720e9b1cea32dcfa53d.pdf)

###よく使うショートカットはカスタムしておくと吉
編集／キーボードショートカットを選択 > 「メニューコマンド」を選択 > オブジェクト／画像の切り抜きをクリック > 新しいショートカットを入力 > 保存したキーセットの名前を入力 > OK
で完了。



#Webデザインに役立つQiita
・[iPhone/iPad/Apple Watch解像度(画面サイズ)早見表](https://qiita.com/tomohisaota/items/f8857d01f328e34fb551)

・[ナビバーの理想的な大きさ](https://bityl.co/5a2f)


#イラレでよく使うアクションのやり方まとめ
###レイヤーを丸ごと別ファイルにコピペする
コピペしたいレイヤーの右ポチにチェック > レイヤーパネル右上のハンバーガー上で右クリック > コピー元のレイヤーにペースト」のチェック > 別ファイルに移動してcmd+V

・参照: [Adobe Illustrator でオブジェクトをレイヤーごと別ファイルにペーストする方法](https://hirashimatakumi.com/blog/3810.html)

###アートボードの大きさを後から変更する方法
Shift + O で大きさを変更できるあれが出てくるので変更するのみ。

参考：[イラストレーターでアートボードのサイズを変更する方法](https://uxmilk.jp/9335)

###画像の切り抜き
1) 配置で画像をアートボードへ。
2) 透明パネルを表示(メニューバーのウィンドウ > 透明 > 不透明度を20%に)
3) オブジェクトをロック(ショートカット ctrl+2)※ロック解除はctrl+alt(option)+2


###[太字がないフォントを太くする](https://ruby-pc.com/illustrator001/)
1 文字を入力
2 選択ツールに切り替え、文字の上でクリック > ctrl + shift + O(ゼロじゃないオーだよ)
3 メニューバーの「オブジェクト」をクリック。「パス」をクリック。「パスのオフセット」をクリック

###二つのオブジェクトを重ねて、別の形を作りたい。
1) オブジェクト2つを選択
2) ウィンドウ > パスファインダー > 出てきたパスファインダーウィンドウの形状モードで好きな形に。

###斜線を使って文字に影をつける方法
[斜線を使って文字に影をつける方法](https://bityl.co/5adq)

###パス上文字ツールの使い方
[イラレのパス上文字ツールで反転させてパスの内側に文字を沿わせる方法を解説](https://bityl.co/5aeH)

###オブジェクトの色を変えたい
#####1 画像をベクター化する
png画像を配置 > オブジェクトを選択 > メニューバーのオブジェクト > 画像トレース > 作成して拡張

##### 2 色を塗る
このままだとグループ化されているので、一つ一つ解除していってもいいのですが、
ツールバーのシェイプ形成ツールの中orショートカット「ctrl+k」で「ライブペイントツール」で色をつけていく

参考: [【Illustrator】イラストレーターで画像の色を変える方法【チュートリアル】](https://bityl.co/5aeW)

備考: [教えてgoo](https://oshiete.goo.ne.jp/qa/8603274.html)で上記のやり方で上手くできなかったみたいな質問がされてた。結局はちゃんと選択したらできたみたいだけど...。
photoshopなら色の置き換えでできるらしい&pngはそもそもphotoshopの専門領域らしいから、photoshop使えるならそっちの方がいいかも

###ガイドを消去する
表示 > ガイド > ガイドのロックを外すを選択(option + cmd + ;) > 消したいガイド線をクリック > deleteキー

###長方形の一角だけ丸く/編集したい
こいうやつ↓
![スクリーンショット 2021-02-14 14.06.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/b9ef02be-2187-c68f-2386-00a2df286301.png)

M(長方形ツール)でいい感じの長方形を書く > A(ダイレクト選択ツール)で編集したい角だけ囲む > 好きなように編集

参考: [【Illustrator】イラレで四角・長方形オブジェクトを一部角丸（丸く）する方法は？](https://xn--l8jvb4dympg8e.com/web/illustrator_maru)

###パスの一部だけ消したい時はパス消しゴムツール
長方形ツールの下にあるshaperツールを右クリック > パス消しゴムツールを選択 > 消したいところを消す
参考: [Illustratorでパスの一部を削除する
](https://dtptransit.design/illustrator/how-to-remove-part-of-a-stroke-in-illustrator.html)

#バナー制作を学ぶ
・[イラストレーター_illustrator_バナー_作り方_講座](https://www.youtube.com/watch?v=bkTMn-0Bq2E)

ボーダーの作り方、クリッピングマスクの使い方、アピアランスによるテキスト作成などを学べる

・[バナー制作（デザイン）時の10のポイント ／ デザイン→スライス→納品行程まで一挙公開！
](https://www.youtube.com/watch?v=gTEJ-32cexs)

プロのデザイナーがどんなステップで納品まで完了させるのかを具体的に学べる。
※GDN(Google Display Network)を想定してやる場合
バナー制作のサイズ、納品の形式、スライスの使い方など。
1) アートボードの大きさはA4で出力できるよう、w 2100 px H2970 pxに設定。
2) サイズやバナーの容量制限などの規約をクライアントに確認する
3) cmd + Kで単位を一般からオプションまで全てpxに統一
4) バナーサイズのオブジェクトの座標軸は全て整数値に設定。
多分オブジェクト作った時にプロパティに出てくるXとYのこと。小数点がつかないようにする
![スクリーンショット 2021-02-13 14.31.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/56dbcc7d-5c44-740c-9fbf-0d623dfb196a.png)

5) cmd + option + スライスしたいオブジェクトの枠上をクリック > メニューバーのオブジェクト > スライス > 選択範囲から作成 >  メニューバーのファイル > 書き出し > web用に保存 > 書き出しの部分を選択したスライスに > shiftを押しながらスライスして書き出したいオブジェクトを全てクリック > (書き出しの拡張子はjpgかpngかクライアントの要望の物を選択 + 容量制限もクライアントに確認しておく + スライスのオブジェクトが複数ある場合は、オブジェクトをダブルクリックでそれぞれに名前をつけておくとあとで楽ちん) 書き出し

後から容量を確認したい場合はfinderからファイルを選択してcmd+Iで表示できる