よくある質問

2011.03.29

Pixlrで画像にフレーム(線)を入れる

  1. サーバーブラウザから作成したい画像下の「Pixlr」ボタンをクリックして、Pixlrを立ち上げます。

  2. レイヤーパネル「新しいレイヤー」をクリックして、新規レイヤーを追加します。

  3. ツールパネルの「一列選択ツール」をクリックします。
    画像全体の横幅、高さにそれぞれ-8をした大きさをドラッグして、選択範囲を作成します。

    今回の場合、全体が「675×219」ですので、-8をした「667×211」で範囲を作成します。
    範囲はナビゲータパネルを確認しながら作成します。

    ※ナビゲータパネルが表示されてない場合、ツールバー「ビュー」→「ナビゲーター」をクリックして表示してください。

  4. ツールパネルの「ペイントバケツツール」をクリックして、作成した選択範囲内をクリックして塗りつぶします。

  5. レイヤーパネル「新しいレイヤー」をクリックして、新規レイヤーを追加します。

  6. ツールパネルの「一列選択ツール」をクリックして、画面全体を選択します。
    ※キーボードの「Ctrl」+「A」を押すと画像全体が選択されます。

  7. 先程は黒色で塗りつぶしたので、次は分かりやすいように違う色で塗りつぶします。
    ツールパネルの「塗りつぶしのカラー」をクリックしてカラーを変更します。

  8. ツールパネルの「ペイントバケツツール」をクリックして、選択範囲内をクリックすると塗りつぶします。

  9. 塗りつぶした2つのレイヤー(黒色と赤色のレイヤー)を入れ替えます。
    レイヤーパレットのレイヤーをドラッグすると入れ替わります。

    赤色のレイヤーの上に、黒色のレイヤーが表示されました。

  10. ツールパネルの「移動ツール」をクリックして、次にレイヤーパネルの一番上のレイヤー(黒色)をクリックして選択します。

    1
  11. キーボードの「↓」を4回、「→」を4回押して、真ん中にくるように移動させます。
    赤色レイヤーが上下左右4px表示されます。

  12. レイヤーパネルの一番上のレイヤー(黒色レイヤー)をキーボードの「Ctrl」を押したまま、クリックします。
    すると黒色レイヤーの選択範囲が作成されます。

  13. レイヤーパネルの一番上のレイヤー(黒色)のチェックマークを外し、非表示します。
    次に赤色のレイヤーをクリックして選択します。

  14. キーボードの「Delete」を押します。
    選択範囲が削除され、枠線になります。

  15. 次に枠線のカラーを変更します。
    枠線のレイヤー(赤色)をキーボードの「Ctrl」を押したまま、クリックします。
    枠線の選択範囲が作成されます。

  16. 塗りつぶしのカラーを黒色に変更します。
    ツールパネルの「ペイントバケツツール」を選択して、選択範囲をクリックして塗りつぶします。

  17. 黒色の枠線が入った画像が完成しました。

  18. 次に黒色の枠線の内側にさらに白色の枠線を作ってみます。

    ツールパネルの「一列選択ツール」をクリックします。
    次は画像全体の横幅、高さにそれぞれ-16をした大きさをドラッグして選択範囲を作成します。

    ナビゲータパネルを確認しながら、「609×203」の選択範囲を作成します。

  19. 新規レイヤーを作成して、ツールパネルの「ペイントバケツツール」で選択範囲を塗りつぶします。

  20. 黒色が真ん中になるように移動させます。

    ツールパネルの「移動ツール」を選択して、キーボードの↓を8回、→を8回押し、移動させます。

  21. 新規レイヤーを作成して、レイヤー全体を塗りつぶします。この時、分かりやすい色に変更して塗りつぶします。

  22. 20で作成したレイヤー(黒色の真ん中に配置されている)をキーボードの「Ctrl」を押しながらクリックして、選択範囲を作成します。
    続いて、21で作成したレイヤー(赤色)を選択して、キーボードの「Delete」を押して削除します。
    赤枠(線幅8px)ができました。

  23. レイヤーパネルの黒枠(線幅4px)のレイヤーと赤枠(線幅8px)のレイヤーを上下入れ替えます。

  24. 赤枠(線幅8px)をレイヤーを選択してます。
    キーボードの「Ctrl」を押しながら、赤枠のレイヤーをクリックして、選択範囲を作成します。
    カラーを白色に変更して、塗りつぶすと、白枠が内に入った画像が完成します。

  25. ツールバー「ファイル」→「保存」をクリックします。

  26. 「OK」をクリックします。サーバーブラウザに保存されます。

  27. 画像を変更して完成です。

お探しの回答は見つかりましたか?
回答が見つからない場合はメールにてお問い合わせください。

「CLOUD LINE」の魅力

HTML、CSS、FTP、WEBサーバー、画像編集ツールが全て必要無し

ホームページ作成なら誰でも簡単につくれる無料サービスのCLOUD LINE-CMS

ホームページ作成のCLOUD LINE-CMSは、誰でも簡単に無料でホームページを作成することができます。豊富なテンプレートの中からお好みのデザインをお選びいただけるのはもちろん、携帯用、スマートフォン用ホームページやブログなど、様々な用途でお使いいただけます。
メールフォームの作成、新着情報、全ての更新が、HTMLやCSSなどの専門知識が無くても可能です。ホームページ作成をお考えの際は、CLOUD LINEをご利用ください。

ページの先頭へ