逆引きマニュアル: macOS: 文字入りで背景が透明な画像を作成する手順

投稿日: 更新日:
macOS

やりたいこと

テスト用に、さくっと文字入りの画像を作成する手順です。

前提条件

  • Pixelmatorが導入されていること。
  • バナーのサイズ、フォーマット、ファイル名を決める(以下は例)
    • 幅: 300
    • 高さ: 30
    • フォーマット: PNG
    • ファイル名: filename.png

手順

Pixelmatorで画像を作成

  1. Pixelmatorを起動
  2. 新規書類を選択
  3. サイズを入力
    • 幅: 300
    • 高さ: 30
    • 解像度: 72ピクセル／インチ(変更なし)
  4. 背景レイヤーの不透明度を変更
    1. レイヤーパネルを選択
    2. 不透明度を100%→0%にする。
  5. レイヤーを追加
    1. レイヤーパネルを選択
    2. 左下の+をクリック
  6. 画像を拡大
    1. メニューから表示→ズームインを選択して、ちょうどいいサイズになるまで調整。
  7. 文字を追加
    1. ツールパネルを選択
    2. 左下にあるTマークをクリック
    3. メインパネルの、ちょうど真ん中をクリック
    4. 文字を編集
  8. ファイルを保存
  9. エクスポート
    1. メニューからファイル→書き出す
    2. PNGを選択して次へ
    3. filename.pngと入力

見た目の確認

以下のHTMLを作成して、画像と同じディレクトリに保存する。

<html>
<body style="background-color: red">
<div style="border: 1px solid">
<img src="filename.png" />
</div>
</body>
</html>

その後、ブラウザでHTMLを開く。

マニュアル