LoginSignup
0
0

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