Template Party

ロゴの文字を入力する

  1. 左側パネルの「A」アイコンをクリックし、logo_top.png上でクリックします。
    あなたのサイト名を入力し、文字サイズや位置を調整して下さい。
    (※画像内の再生ボタンを押すと動画が再生されます。約45秒。)

    文字サイズはスライダーでなく、直接数値入力もできます。
    文字の移動は、文字上をドラッグ(クリックした状態のまま動かす)で移動できます。
    「フォント」のリストから他のフォントを指定する事もできます。色々試してみて下さい。

  2. 土台が大きすぎるのでトリミング(切り抜き)します。
    左上から右下に向かってドラッグ(クリックした状態でそのまま動かす)したら、選択内でダブルクリックして下さい。
    これでトリミング完了です。

    トリミングではなく、土台を広げたい場合。

    画像メニューから「キャンバスサイズ」を選択し、

    出てきたウィンドウに幅と高さを入力します。
    「アンカー」というのはサイズ変更の基準点の事で、クリックで変更できます。左上基準だと、右側・下側に向かってキャンバスが拡大されます。中央基準だと上下左右に向かって拡大されます。

    トリミングサイズを指定したい場合。

    1. 以下の幅2000px、高さ700pxの横長画像を、幅500px、高さ500pxの正方形にリサイズしてみます。
    2. トリミングのアイコンを選択状態のまま、出力サイズのプルダウンから「出力サイズ」を選択。
    3. 幅と高さ欄にトリミングしたいサイズを入力。
    4. 選択範囲をドラッグし、位置が決まったら選択範囲内でダブルクリックしてトリミング完了。
      一度範囲を決めた後でも、四隅のマークを移動して大きさを変えたり、選択範囲内をドラッグする事で位置を微調整したりする事が可能です。

      ちょっと失敗したなぁ…やり直したいなぁ…という場合は「Ctrl(macは⌘) + Z」で1つ前の工程に戻る事ができます。

  3. テンプレートのロゴは白色なので変更します。
    「A」アイコンをクリックし、入力してある文字上(どこでもOK)をクリック。
    文字ツールが出てきますので、色を選択して下さい。
    (※画像内の再生ボタンを押すと動画が再生されます。約26秒。)

    今回は単純に「白色」への変更だったのでスライダーの移動だけでしたが、以下の赤枠内のポイントを直接移動して他の色にしたり、右側の「HSL」や「RGB」や「#」で指定する事もできます。

    他、上部タブから「RGB」や「WEB」など選んでもOKです。

  4. 一旦、PIXLR EDITORの形式(.pxd)で保存します。
    この形式は他の画像ソフトでは開く事はできませんが、文字情報や画像の制作工程などがそのままの形式で残せる(後で編集ができるという事)ので、バックアップ用に保存する事をおすすめします。
    (※画像内の再生ボタンを押すと動画が再生されます。約37秒。)
  5. 保存したらbaseフォルダに入っているか確認しましょう。
    以下のようにpxd形式のファイルがあればOKです。
    これでいつでもこのファイルを読み込む事で今入力した文字情報の変更ができるようになりました。
  6. 次はテンプレート用として保存します。
    保存先は「base」フォルダではなく「images」フォルダに上書きするようにして下さい。
    上書きする事でテンプレートのサンプルロゴとそのまま置きかわります。
    (※画像内の再生ボタンを押すと動画が再生されます。約35秒。)
  7. テンプレートのindex.htmlを開いてみましょう。今作ったロゴと置き換わっていれば成功です。
  8. 最後に、残りのロゴ(logo.png)も作りましょう。

<< 「初心者向け講座」メニュー一覧に戻る