2月
27

Photoshop Elementsで角丸画像を作ってみた!

2月 27, 2012in iPhone

ファビコンとは!!

Favicon – Wikipedia
Favicon(ファビコン)はウェブサイトやウェブページに関連付けられたアイコンのことである。Favorite icon(フェイバリット・アイコン)という英語の語句を縮約したものである。 …

私のブログにもファビコンをWordPressプラグインを使って、タブバーに表示しています。
私が現在使用しているプラグインは、「All In One Favicon」です。
ファビコン用のフリーのオンラインツールもあるので、ファビコンが簡単に作れます。
まだという方はやってみませんか〜
http://www.favicon.jp/favicon_create

設定してあげると、
タブにこんな豆粒みたいに表示されるこれ!w
可愛い〜www
WPtouch Options ‹ iPhoneとマヨテキメモ — WordPress

ここで、ちょっと困った問題ががありましてん(^_^;)
サイトにはファビコンが表示されるのに、
GoogleRSSにファビコンが表示されている人といない人がいるのに気が付きました。
( ´∀`)Σ⊂(゚Д゚ ) なんでやねん!
私のは表示されていないので、只今見直し中(;´д`)トホホ…
まっこれは、置いといてと…

今回はWordPressプラグイン「wptouch」用に画像の角を丸くしてみました。
ちょっと目にはなんら変わりがないかもw

画像を角丸にする方法

  • 「Photoshop Elements」での編集
  • 写真の加工と編集ソフト | Adobe Photoshop Elements 10

    まず、ここでは始めに正方形にした画像を用意しています。
    Adobe Photoshop Elements 8

    画像を選択して
    背景をレイヤーに変更します。
    スクリーンショット 2012-02-27 9.26.27

    レイヤー0になっているか確認してOK!
    新規レイヤー

    選択範囲からすべてを選択すると、
    スクリーンショット 2012-02-27 9.40.42

    点線で選択範囲が表示されます。
    スクリーンショット 2012-02-27 9.36.29

    次に再び、選択範囲から選択範囲を変更を選びます。
    スクリーンショット 2012-02-27 9.37.53

    滑らかにを選びます。
    スクリーンショット 2012-02-27 9.38.13

    任意のサイズを選びます。
    私は適当に10pixelを選びましたw
    選択範囲を滑らかに

    点線が角丸になっています。
    スクリーンショット 2012-02-27 9.39.56

    選択範囲から選択範囲を反転を選ぶと、切り取る部分が選択されますので、
    編集からカットを選ぶと、角が切り取られて、透明になります。
    スクリーンショット 2012-02-27 9.41.16
    Adobe Photoshop Elements 8

    これで、一応完成ですが、
    私の場合は、iPhone画面に合わせて、黒背景を作りたかったので。
    作業は続きます(^_^;)

    新規レイヤーの作成
    スクリーンショット 2012-02-27 9.24.50

    レイヤー画面でドラッグして順番を変えます。
    Adobe Photoshop Elements 8

    レイヤー1をアクティブにして、黒背景に塗りつぶします。
    スクリーンショット 2012-02-27 10.00.46

    おおー!できました\(^o^)/
    スクリーンショット 2012-02-27 10.01.50

    「wptouch」の設定から下の方にいって見ると、こんな画面が。
    自分で作った画像を3枚アップロードしています。
    WPtouch Options ‹ iPhoneとマヨテキメモ — WordPress

    自分で作った画像をiPhone用に設定できるのです!
    今までだと、このような「メモ」の味気ないアイコン
    デフォルトだとこれみたいですね。
    IMG_0739

    次に作ったのがこれです。
    でもこれだと角が角張ってるしー(^_^;)
    IMG_0740

    角丸にしたのが、これです!
    あー、でもやっぱりよくわかんないという結果にw
    IMG_0761

  • ウェブで簡単に角丸画像ができます。
  • RoundPic – rounded corners for avatars and images [web 2.0 style]

    ファイルをアップロードするか、URLを入れます。
    RoundPic - rounded corners for avatars and images [web 2.0 style]

    角のどこを丸くするか選べます。
    角丸の度合いも調整できます。
    リサイズもできます。
    背景の色も、透過のPNGも選べます。
    出来上がったものをダウンロードします。
    すごく簡単に出来上がります!
    私はこれを、サイドバーのProfile画面に使っています♪
    ファビコン用透過1

    あーーー、なんだかまとまりのない本日のブログ更新でしたー。
    では、では!!!ヽ(´ー`)ノ

    【こちらの関連記事もご覧ください】


    記事をお読み頂き、ありがとうございます!

    記事の内容を気に入って頂けましたか?
    もし気に入って頂けましたら、
    ソーシャルボタンで共有頂ければ、とても嬉しいです♪


    follow us in feedly RSS

    Leave a Reply

    • (will not be published)

    XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    This blog is kept spam free by WP-SpamFree.