画像からWEB素材をまとめて一気に切り出すやり方をPhotopeaのスライスツールでやってみた。
画像からWEB素材をまとめて一気に切り出すやり方をPhotopeaのスライスツールでやってみた。
WEB制作でデザインデータをHTML化する時に画像を切り出すことがあると思いますが、スライスツールを使えば結構早いのでおすすめです。
今回はオンライン写真編集ソフトPhotopea(フォトピー)のスライスツールを使って一枚の画像データから複数枚のPNG画像(素材)を書き出していきたいと思います。
今の時代はCSSとSVGを使えばほとんど画像素材なしでアイコンやイラストを描画出来てしまうのですが、SEOやWEB標準、コードの美しさやらを気にせずサクッと形にしたいときはこの方法が楽です。
さて、それではPhotopeaにアクセスしてやっていきましょう。
![Photopeaで写真を開く](https://pirikarasansyo.com/wp-content/uploads/2020/08/0a37e55cd92562fccd20216c370ab035.jpg)
「ファイル」から「開く」で切り出す画像を読み込みます。
初期設定で英語表示になってる方は「more」から「language」→「日本語」で日本語設定に変更出来ます。
![Photopeaに画像を開く](https://pirikarasansyo.com/wp-content/uploads/2020/09/5d7085962ae2f4423591481da95e0f93.jpg)
画像を開くとこんな感じ。
この画像の作り方はPhotopeaを使って超シンプルなWEBサイトのデザイン作ってみた。で書いてます。
![Photopeaのスライスツールを使う](https://pirikarasansyo.com/wp-content/uploads/2020/09/b729ed491d37f146aa513e586082048d.jpg)
画像の切り出し(書き出し)にはスライスツールを使っていきます。
スライスツールはドラッグ&ドロップで選択範囲を指定することが出来ます。選択範囲は矩形(四角形)になります。
![Photopeaの定規からガイドを表示させて素材を型取り](https://pirikarasansyo.com/wp-content/uploads/2020/09/1ae33f614da230242880bc3ba7976869.jpg)
スライスツールはガイドと合わせて使うことで綺麗に範囲選択が出来ます。
ガイドの出し方はメニューの「表示」から「定規」にチェックを入れます。画面上に定規が出てくると思います。あとは「移動ツール(v)」等をアクティブにした状態で定規をクリックしてドラッグするとガイドが出てきます。
ガイドの表示・非表示はcommand(Ctrl)+;で切り替えることができます。
![Photopeaのスライスツールで画像から切り出し](https://pirikarasansyo.com/wp-content/uploads/2020/09/f9d0ae64a7c2a4d93ce466a682e48d08.jpg)
こんな感じでスライスツールで囲んで行きます。切り取りたい場所を全部囲みます。
![Photopeaのスライスツールで切り出していく](https://pirikarasansyo.com/wp-content/uploads/2020/09/ba4a51b354301db38bcafc150d493d05.jpg)
どうでもいいところはほったらかしでOKです。
![Photopeaで背景を非表示にする](https://pirikarasansyo.com/wp-content/uploads/2020/09/b14243b10a91fa38eb6df8e10aff22f8.jpg)
背景が今、白になっているのですが、このまま保存してしまうと白背景の画像が書き出されてしまうので、背景を非表示(目のアイコンをクリック)にして透過(透明)にします。
![Photopeaで背景を非表示にして透過させる](https://pirikarasansyo.com/wp-content/uploads/2020/09/bbdd6cb071d668936e04671e554b1866.jpg)
こんな感じ。
![Photopeaで別名で保存からPNGで保存](https://pirikarasansyo.com/wp-content/uploads/2020/09/d63baef12c90628ad4e7371ef921fc94.jpg)
保存します。「ファイル」から「別名で保存」→「PNG」を選びます。
![PhotopeaでPNGで保存](https://pirikarasansyo.com/wp-content/uploads/2020/09/8606cacd2d3f265c5d4dc70ea5b60f6c.jpg)
こんな感じの画面が出てくるので「保存」をクリックします。
![ZIPファイルを展開し切り出した素材を表示させる](https://pirikarasansyo.com/wp-content/uploads/2020/09/c7e33067b26f16f9f3f7a7fa1f6b6706.jpg)
保存をクリックするとzipファイルがダウンロードされます。これを展開すると、こんな感じで先ほどスライスした画像が一気に手に入ります。
スライスしてないところもおまけでついてくるのですが、いらなければ削除しましょう。
![JPGで保存すると背景が表示される](https://pirikarasansyo.com/wp-content/uploads/2020/09/a08cec93ace5e80af48e223e38f5cd0f.jpg)
ちなみに背景を非表示にしてもJPGで保存してしまうと透過しないです。CSSで背景色を変えたりするのでWEBでは透過が扱いやすいと思います。