入門アイコン自作してみたいな、なんて思ってもPhotoshopなどのソフトって高価なんですよね。画像編集ソフトを持っていなくても、ブラウザ上でAndroid用アイコンって作れちゃうんです。これは実際に、Photoshop等のソフトを使わずに、フリーツールで作成したアイコンを自分のAndroidに設定してみたキャプチャです。壁紙は、こちらのサイトからDLさせて頂いたものです。-無料スマホ壁紙(待受)-ではこのようなアイコンを一緒につくってみましょうー!作成に入る前にPNG形式でAndroidアイコンは.pngという拡張子の画像がおすすめです。.jpgや.gifでも設定は出来ると思うのですが、背景を透明にしたり、綺麗なグラデーションで保存できたりしてアイコンとして一番最適な形式だと思います。お使いのPCが拡張子が表示されない設定ならば、出しておいたほうが分かりやすいです。端末によって適正サイズが異なるAndroidは画面解像度が本当にいろいろです。自分の端末に合っていないものでも、縮小拡大して表示してくれるのでこだわらなければどうでも良いのですが、自分の端末に合った大きさで作成するとドットがとても綺麗に表示されます。144×144pxざっくりこんな感じに分けられるみたい(でも他にもあるそうです)。A)はxhdpiで、現在(2013年11月)ユーザーが一番多い解像度と思われます。前の端末ならhdpi、新しいフルHDの端末などはxxhdpiに分類されるらしいので、綺麗な仕上がりにこだわりたい方はメーカーのHPなどでご自分の端末の解像度を調べてみてください。以前書いた記事で、各解像度を見分けるためのサンプルアイコンがDLできます。Androidへのアイコンの設定方法なども合わせてご参照ください。Androidのホーム画面をカスタマイズした過程をまとめてみましたでは、ここからは私が使っているサイズの96×96pxで説明していきます。他の大きさの場合はそこを読み換えてください。onlineこちらのツール。フリーなのにPhotoshopにかなり近いことまで出来ます。(PCからアクセスしてください。)アイコン素材ウェブでも紙でもOK!汎用性に優れた1400種類のシンプルなアイコン素材(コリス限定)今回の記事では、こちらのアイコンを使用させて頂きました。バリエーション豊富ですごく使いやすいものばかりで、非常におすすめです。作成の例フォーマットを作っておく丸とか、角丸とかそういう形で統一したい場合は、まずここから。onlineを開いて、新しい画像を作成します。名前はなんでもいいです。作りたい画像の大きさを指定して、「透明」にチェック。左にある縦長のバーの「描画ツール」を選択。上部に設定が現れるので、丸か角丸か(四角でも良いです)選びます。ボーダーは0にしておきます。ドラッグして離すと円が出来ます。一般的なソフトだとShiftを押しながらだと正円になるのですが、そういった機能はない様子...!しょうがないので、図の2点のように狙うと正円っぽく...なる...!どなたか正円の描き方ご存知でしたら教えてください!((└(:3」┌)┘))後で効果を入れたりする可能性もあるので、ちょっと余白が残るくらいの大きさにしておくと良いかもしれません。四つ角のひとつを持って、内側へすこーしだけドラッグ(shiftを押しながらだと縦横比固定されます)して、Enterで確定。すると一回り小さな丸になります。丸の大きさはお好みで調節してください。Pixels」で、小さいほうの丸の選択範囲が作成されます。ここで、小さい丸を非表示にして大きい丸のレイヤーをアクティブにしておきます。「編集」→「カット」(もしくはCtr+X)すると、大きな丸から小さな丸の範囲が切り取られ、丸の枠が出来ます。(さっきの縮小した大きさによって枠の太さが変わります)「ファイル」→「保存」を選択して、PNG形式を選択して自分のPCに保存しておきます。フォーマットとアイコンを合わせる今度は、画像を開きます。例として、先ほどのリンクからDLしたアイコンの中から先の細いものを選択します。例としてこちらの電話の画像を使わせて頂きます。このままでは大きいので「画像」→「画像サイズ」で自分の作成したいサイズにします。縦横比は固定しておいたほうが綺麗です。ウィンドウが大きいままなので、気になる方は右下部分をドラッグすると小さくなります。「レイヤー」→「画像をレイヤーとして開く」から、さっきつくったフォーマットを選択すると、新しいレイヤーとして読み込まれます。大きさを微調整しましょう。「レイヤー」→「表示部を結合」で、丸と中身のレイヤーをひとつにしておきます。壁紙の色を想定する壁紙によって見え方が変わってくるので、似たような色の背景レイヤーを作ってシミュレーションをします。2個め以降など、色が決まっている場合はこの工程は不要です。レイヤーウィンドウ右下の図の赤丸部分を押すと新規レイヤーが作成されます。レイヤー名をダブルクリックで名前も変えられます。レイヤーは、ドラッグすることで順番を入れ替えられます。ツールバー下の赤丸部分をダブルクリックすると色を選べるので、好きな色にします。ここでは、濃い目の青っぽい壁紙を使うことを想定して、近そうな色にしておきます。背景レイヤーをアクティブにしたまま、バケツツールを選択して画像上でクリック。指定色で塗りつぶされます。Pixels」で選択範囲を作成。今度はアイコン部分を塗る色を指定して、新規レイヤーを作成してそちらに塗りつぶしを行います。同じレイヤーに塗ってしまうと、黒い部分が微妙に残ってしまって綺麗になりません。黒のレイヤーは非表示にしてしまいましょう。「編集」→「全ての選択を取り消す」(もしくはCtr+D)で選択範囲を解除。こんな感じになりました。ここで色が気に入らない場合は「調整」→「色調と彩度」から変えることができます。彩度がゼロのもの(白、黒、グレー)は明るさしか変えられませんので、ご注意を。背景は不要なので非表示にしてから、PNG形式で保存します。これで、できあがりです!クラウドやSDカード経由などでスマホに移して、アイコンとして設定してやれば使えます。細いラインのアイコン壁紙がグラデーションものだったりする場合、アイコンはシンプルなほうが映えるということもありますが、シンプルな壁紙ならこんなのもいいかも。「レイヤー」→「レイヤースタイル」から「アウターグロー」にチェックを入れてみます。してお洒落な感じになりますね。光の大きさや色も変えられます。太いラインのアイコン例えば、今までの手順を参考にこんな色合いのアイコンを作ったとして。ドロップシャドウと内側シャドウをこんな設定にすると、ちょっと浮き上がった感じになります。逆にしてみると、へこんだ感じにも。各パラメーターはお好みでどうぞ。素材を使ってボタン風にフリーテクスチャ素材館こちらのサイトから素材を使わせて頂いて、ちょっと違った感じのものも作ってみます。使いたい画像を開いて、切り抜きツールで、このへん使いたいなーっていうところをドラッグ。できるだけ正方形っぽく選択します。サイズ」から任意の大きさにサイズ変更。さっきの切り抜きがフリーハンドなので、ここでは縦横比固定のチェックを外しておいたほうが良いと思います。元画像が大きいと、切り抜いた後も表示が小さいままなこともあるので、ナビゲーターを100%にすると実際の大きさになります。この時点では、レイヤーがロックされているので鍵のマークをダブルクリックすると、ロック解除できます。一度素材レイヤーを非表示にして、新規レイヤーに角丸を作ります。前述で正円をつくったときのように、格子部分をうまく狙うと真四角っぽくなります。階調を反転する」で、選択範囲を反転。レイヤーの非表示を入れ替えて、素材レイヤーをアクティブに。「編集」→「カット」(もしくはCtr+X)先ほど紹介したように、ちょっと浮き上がって見えるようにシャドウをつけて、これをフォーマットとして保存。今までの流れを参考に、任意の画像を素材の上に重ねて好きな色で塗りつぶし。これに「フィルター」→「拡散」をかけてみます。こんなことも出来ますということで。カナリエフリー素材は探せばたくさんあると思います。初心者向け、Illustratorで簡単な図形やイラストを描くチュートリアルIllustratorで斜線(斜めライン)パターンを作ってアウトライン化するマウスカーソルを自作したら意外と楽しかったので、作り方など他カテゴリの月間人気記事ExcelVBAでカレンダーコントロールを自作するExcelで1行・1列おきの合計を求めるSUM関数の書き方これからExcelのマクロを勉強したいという方に!簡単な練習問題作りました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。週間人気記事ExcelVBAでカレンダーコントロールを自作するExcelで1行・1列おきの合計を求めるSUM関数の書き方これからExcelのマクロを勉強したいという方に!簡単な練習問題作りました。-2019/09/27運営者*you非IT系の会社で社内業務アプリ開発したりWeb担してたり。ExcelとかAccessの本を書いてます。