0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

アプリケーションのオリジナルロゴを簡単に作る方法(スマホで簡単)

Last updated at Posted at 2020-10-06

#個人アプリのロゴを簡単に作成しよう!(Rubyの記述あり)
##必要なもの

  • 「Pics art」
    20b59e6a2f37c51db0f66b2a3a0f7fff.png

  • 「背景透明化」
    0d3dfded9fc57049f6e37e3058a0d374.png
    (それぞれapp storeで無料で取得できます)

#好きなように書く!
Pics art
IMG_1429.jpg
#背景透明化する!
IMG_1430.jpg
⬇️
IMG_1431.jpg
#完了したらエアドロップでMacBookへ!
#ロゴ作成のポイントは背景透明化をしっかりすることです!

##MacBookに移動させた時点でファイル名を「logo.png」とかにしておくといいでしょう!
###ビューやらでやること

  • assetsの配下に「image」フォルダを作成し、logo.pngを入れ込む
  • ビューでimage/logo.pngを呼び出す記述をする
  • 以上(CSSやそのままビューでサイズを調整する事を推奨します)

#app/assets/stylesheets/image/logo.png
こんな感じ(logo.pngはあくまで例えです)
eabfbf345316a6022418c3ef0c05b033.png
#次にimageをビューに呼び込む記述

title
<div class="main-logo">
  <%= link_to image_tag("logo.png", class:"main-icon"), "" %>
</div>

#これだけです!
###class名はなんでも構いません!ご自由に!
#こんな感じでうまくできてます!
d544f6e1ab3bb430bf109362d561fe3c.png
#まとめ
画像の数が多すぎるとアクティブストレージやAWSを使わないとパンクしてしまうと思うのですが個人でアプリケーションを作成するくらいなら直接imageフォルダに格納した方が圧倒的に楽です。
以上本日の学びでした〜!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?