Photopeaの使い方

ここでは、Photoshopなどの画像編集・加工ソフトをお持ちでない方向けに、無料のオンラインサービス「Photopea」を使った、入稿用ファイルの作り方を紹介しています。

「Photopea」はオンライン上で、PhotoshopのPSDファイル、GimpのXCFファイル、JPEG, PNG, GIF, BMP, WebPなどの様々な画像ファイルを取り扱うことができる無料のWebサービスです。
チェコの学生、Ivan Kuckir氏によって開発されたサービスで、利用にあたり登録などは必要なく、ログインするだけで簡単に利用が出来ます。
こちらからどうぞ。

step1 テンプレートをダウンロードする

step2 Photopeaでテンプレートを開く

 
Photopeaの画面の「Open From Computer」からダウンロードした入稿テンプレートを開きます。
※Photopeaの画面にファイルをドラックアンドドロップでも開きます。
 

いよいよデザインしていきます。デザインする際不要なレイヤーを非表示にしていきましょう。

 

必ず説明書を確認後、説明レイヤーを非表示にします。

 

step3-1 デザインで利用したい写真をテンプレートに載せる

Ctrl+O(macの場合はCommand+O)で利用したい画像を開きましょう。
※上部メニューバーから「File」→「Open」でも可能です。

画像が開いたらCtrl+A(macの場合Command+A)で画像全体を選択します!
※上部メニューバーから「Select」→「All」でも可能です。

 

Ctrl+C(macの場合はCommand+C)で画像をコピーします!
※上部メニューバーから「Edit」→「Copy」でも可能です。

テンプレートの上でCtrl+V(macの場合はCommand+V)で画像を貼り付けてみましょう!
※上部メニューバーから「Edit」→「Paste」でも可能です。

 

step3-2 画像の大きさを調整する

まず上部メニューバーのすぐ下の・Auto-Select ・Transformation controls  ・Distances にそれぞれチェックを入れてください。

左のツールバーから「ムーブツール(move tool)」を選択します。
※矢印カーソルにプラスマークが付いているボタンです。

 

画像の端を選択すると、画像を拡大縮小できます。このときShiftを押しながらだと画像の縦横の比率が変わることなく拡大・縮小ができます。

画像の大きさが決まったら「決定チェックマーク」で決定します。

 

追加した画像はレイヤーの一番下に配置します。これで、画像の上に文章やケースの枠が表示されます。
一番下に画像レイヤーを移動すると「商品イメージ」のレイヤーが重なって見辛いことがありますので、その場合は「商品イメージ」のレイヤーを非表示にしましょう。

 

 

step4 文字を入れる

Tマークのタイプツール(Type tool)を選択し、画像の上などをクリックします。

好きな文字を打ち込んでみましょう!
文字を入れたらチェックマークで決定し、必ず保存(Ctrl+S)してくださいね。

大きさも画像同様「move tool」で行えます。

フォントはタイプツールで、変更したい文字をドラッグし、左上のフォント選択ボックスで下矢印を押すことで変更できます。
※Photopeaは現在日本語フォントを対応していません。その為、日本語を扱うことは出来ません。

 

step5 入稿データをPNG形式で保存する

⑴入稿データに不要なレイヤーを非表示にします
「説明書」「印刷目安レイヤー」「外枠」「商品イメージ」のレイヤーを非表示にし、デザインのみ表示させている状態にしてください。

⑵上部メニューバーから「File」→「Export as」→「PNG」を選択

これで入稿データ(PNG形式)が完成です!

商品一覧ページはこちらからどうぞ。

7

簡単お見積り・お問い合わせ

お見積りやお問い合わせ・ご相談は下記のフォームにご入力ください。
デザイン制作のご依頼はデザイン相談フォームをご利用ください。


お問い合わせと同時にお送りしたい画像などがございましたら上記よりアップしてください。