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

3440 ワード
Rails CSS Ruby 画像 HTML Ruby テキストリンク

個人アプリのロゴを簡単に作成しよう！(Rubyの記述あり)

必要なもの

  • 「Pics art」

  • 「背景透明化」

    （それぞれapp storeで無料で取得できます）

好きなように書く！

Pics art

背景透明化する！


⬇️

完了したらエアドロップでMacBookへ！

ロゴ作成のポイントは背景透明化をしっかりすることです！

MacBookに移動させた時点でファイル名を「logo.png」とかにしておくといいでしょう！

ビューやらでやること

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

app/assets/stylesheets/image/logo.png

こんな感じ（logo.pngはあくまで例えです）

次にimageをビューに呼び込む記述

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

これだけです！

class名はなんでも構いません！ご自由に！

こんな感じでうまくできてます！

まとめ

画像の数が多すぎるとアクティブストレージやAWSを使わないとパンクしてしまうと思うのですが個人でアプリケーションを作成するくらいなら直接imageフォルダに格納した方が圧倒的に楽です。
以上本日の学びでした〜！