LANG SELRCT

コードを書く場所についてはこちら

2019年1月6日日曜日

Google Drawingsでアイコンを作ってみる


ここではAndroidのホーム画面に表示するアイコンを192px ✕ 192pxで作っていきます

  • Drawingsで新規ファイルを作る
  • サイズを設定する
  • 図形を描く
  • Googleドライブにpngとして保存する
  • 画像のURLを取得する

ということを順番にやっていきます


Drawingsで新規ファイルを作る


1. 新規でDrawingsのファイルを開きます
https://docs.google.com/drawings/create



サイズを設定する


2. 画像サイズを設定するために
ファイル > ページ設定 を選択します



3. ページ設定画面で「カスタム」を選択します



4. 「ピクセル」を選択します



5. 192 ✕ 192に設定して「OK」をクリックします



図形を描く


6. 挿入 > 図形 から好きな図形を選択します
この例では 吹き出し > 角丸四角形吹き出し を選択しています



7. 左上からマウスを押しながら右下に移動して
適当な大きさの吹き出しを作ります



8. 塗りつぶしの色のアイコンをクリックして好きな色を選択します



9. 枠線の色のアイコンをクリックして好きな色を選択します



10. 枠線の太さのアイコンをクリックして好きな太さを選択します



11. 図形をダブルクリックしてテキストを入力します



12. 文字サイズを任意で変更します



13. テキストの色のアイコンをクリックして好きな色を選択します



14. フォントアイコンから好きな文字を選択します



15. これでアイコンは完成



16. ファイル名を任意の名前に変更します







Googleドライブにpngとして保存する


17. ダウンロードするために
ファイル > 形式を指定してダウンロード > PNG 画像(.png)
を選択します



18. 保存場所を決めて「保存」をクリックします



19. ダウンロード完了後
ブラウザでGoogleドライブを開いて「新規」をクリックします



20. 「ファイルのアップロード」を選択します



21. 先程ダウンロードしたファイルを選択して「開く」をクリックします



22. Googleドライブにアップロードされます



画像のURLを取得する


23. 右上にカーソルを移動して︙から「共有」を選択します


24. 共有設定画面の右下の「詳細設定」をクリックします



25. 共有リンクが表示されます

https://drive.google.com/file/d/ここがこのファイルのID/view?usp=sharing


26. これをファビコンとして使うには
HtmlServiceでファビコンを設定したい で .setFaviconUrl('https://drive.google.com/uc?id=ID&.png') にIDを設定します