IllustratorCCの画像アセットの書き出しで、余白やピクセルずれを無くす方法

2019/03/12 サイト制作 投稿者:前原

IllustratorCCからアセットの書き出しという機能が追加され、
画像書き出しの際にはアセット書き出しを使っていますが、
クリッピングマスクがかかっているアセットは余白が出来てしまいます。

今まではそこからFireworksなど他の画像処理ソフトで余白を削除していましたが、
IllustratorCCのCCライブラリという機能を使って
余白を無くした状態で書き出し出来ることを知りました。

余白を作らないアセット書き出し方法

まず書き出したいオブジェクトを選択してCCライブラリに追加します。

CCライブラリからオブジェクトをアートボードに配置します。
(項目選択後ドラッグしてアートボード上をクリック)

それを改めてアセット書き出しに追加して書き出します。
すると余白が無くなっています。

しかし、まだわずかな隙間が残っていることがあります。

それはピクセルずれが原因です。
画像は1ピクセルごとに書き出すのですが、
0.1ピクセルでも半端なサイズだと、このような隙間が出来てしまいます。

ピクセルずれの隙間の解消方法

メニューの[表示]→[ピクセルプレビュー]と、
メニューの[表示]→[ピクセルにスナップ]をオンにします。

レイヤーに鍵がかかっていたら外して該当オブジェクトを選択後、
メニューの[オブジェクト]→[ピクセルグリッドに最適化]をクリック。
※アウトライン化されたテキストなど細かいパスは形が崩れることがありますので、長方形など単純な形のオブジェクトのみに使用してください。

それから改めてCCライブラリを使ってアセット書き出ししてみると…

隙間が無くなりました!

まとめ

画像書き出しがとても楽になりました。
これでFireworksが手放せそうです。

Windows 7 の延長サポート終了まで

days
2
6
7
hours
1
8
minutes
3
7
seconds
0
6

Office 2010 の延長サポート終了まで

days
5
4
0
hours
1
8
minutes
3
7
seconds
0
6

カレンダー

1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
    123
45678910
11121314151617
18192021222324
25262728   
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)