↑↑↑自作のロゴ完成図↑↑↑
Processing pythonを使って図形が書けるようになったので、一つ作品を作ろうと思い自分のロゴ作成をしてみました
↓↓↓ロゴ作成に必要な内容は以下の記事になります↓↓↓
【超初心者向け】Processingでプログラミング言語Pythonを使った線の描き方ついて
【超初心者向け】Processingでプログラミング言語Pythonを使った図形の描き方について
【超初心者向け】Processingでプログラミング言語Pythonを使っって図形や線に色をつけてみよう
とりあえず、自分のイメージをそのまま出していきたいので自分の好きな色を背景に名前をはっきりとつくりたいです
イメージはユニクロのロゴをイメージして作っていきます。
現在は他のものを使用しておりますが、以前は実際に使用していたロゴです。
プログラミングのコードを使用してかけるので、よかったら参考にしてみてください
注意点
この記事はProcessingのPython設定で作成しております
Java設定だとエラーが出るので注意してください
設定方法がわからない方は、以下の記事を参考にしてみてください
背景や文字のレイアウトのイメージ作成
こんな感じ
作成コード
|
1 2 3 4 5 6 7 8 |
size(230, 230) background(0, 0, 255) fill(255) rect(20, 20, 140, 140) fill(255, 255, 0) rect(70, 70, 140, 140) |
では、ここから初めてロゴづくりを始めていきます。
設計図
イメージが作成ができたので
どんな感じで文字にしていくか
設計図を方眼用紙を使って作成
ポイント
- Processing pythonでやるので数値化
- 比率で出しているのでサイズ感が変わっても見た目は変わりにくい
- 初めからコードを書くよりイメージがしやすい
- 全体像が見えてきた
Processingを使用してイメージをグラフィックにしていきます
文字入力でもできますが
楽しくないので
あえて四角を使ってやります。
カタカナの（タ）作成
まず、四角を組み合わせてみる
周りの黒枠が少し邪魔かな…
作成コード
|
1 2 3 4 5 6 7 8 9 |
size(230, 230) background(0, 0, 255) fill(255) rect(20, 20, 40, 80) rect(60, 30, 40, 10) rect(60, 70, 40, 10) rect(100, 20, 40,120) |
黒枠を消す
コードにnoStroke()入れるだけ
黒枠線が消えて文字っぽく見えました
黒枠線はない方がいい
作成コード
|
1 2 3 4 5 6 7 8 9 |
size(230, 230) background(0, 0, 255) fill(255) noStroke() rect(20, 20, 40, 80) rect(60, 30, 40, 10) rect(60, 70, 40, 10) rect(100, 20, 40,120) |
『タ』から『ダ』にしていきます。
『タ』に濁点をつけていきます。
濁点を2つ足したてみた
次は枠がなくてわかりにくい
濁点には黒い枠をつける
コードにstroke()をつける
濁点には枠がある方がはっきりするからわかりやすい
1文字目完成
作成コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
size(230, 230) background(0, 0, 255) fill(255) noStroke() rect(20, 20, 40, 80) rect(60, 30, 40, 10) rect(60, 70, 40, 10) rect(100, 20, 40,120) stroke(0) rect(110, 10, 20, 40) rect(130, 10, 20, 40) |
注意点
stroke()のカッコ内には数値が必要
０→黒 255→白
noStroke()の場合は周知なしでも大丈夫
１文字目が出来たらあとはコピペと位置座標の編集
一文字目ができるまでが大変でした
あとは、文字の位置座標の調整で何とかできました。
完成
完成
とりあえずできたことが一番うれしい
作成コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
size(230, 230) background(0, 0, 255) fill(255) noStroke() rect(20, 20, 40, 80) rect(60, 30, 40, 10) rect(60, 70, 40, 10) rect(100, 20, 40,120) stroke(0) rect(110, 10, 20, 40) rect(130, 10, 20, 40) fill(255, 255, 0) noStroke() rect(90, 100, 40, 80) rect(130, 110, 40, 10) rect(130, 150, 40, 10) rect(170, 100, 40,120) stroke(0) rect(180, 90, 20, 40) rect(200, 90, 20, 40) |
ただ一つ問題が
それはめっちゃちっさいこと
大体1/3のサイス間が実際のサイズ感です
パソコンで見た時はすごくわかりやすいけど、スマホで見た時は分かりにくかったので…
最後にサイズの変更
変数を使用してロゴのサイズ感を変更していきます
設計図を作成した時に比率で数値を出しているので
各数値がある部分に変数ｘを付け加える
するとｘの数値を変えるだけで倍率が変化
作成コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<span class="marker-red">x = 1 #230の倍率を入力 </span> size(2100, 1600) fill(0, 0, 255) rect(0, 0, 230 * x, 230 * x) fill(255) noStroke() rect(20 * x, 20 * x, 40 * x, 80 * x) rect(60 * x, 30 * x, 40 * x, 10 * x) rect(60 * x, 70 * x, 40 * x, 10 * x) rect(100 * x, 20 * x, 40 * x,120 * x) stroke(0) rect(110 * x, 10 * x, 20 * x, 40 * x) rect(130 * x, 10 * x, 20 * x, 40 * x) fill(255, 255, 0) noStroke() rect(90 * x, 100 * x, 40 * x, 80 * x) rect(130 * x, 110 * x, 40 * x, 10 * x) rect(130 * x, 150 * x, 40 * x, 10 * x) rect(170 * x, 100 * x, 40 * x,120 * x) stroke(0) rect(180 * x, 90 * x, 20 * x, 40 * x) rect(200 * x, 90 * x, 20 * x, 40 * x) |
倍率変更
×１倍
×２倍
×３倍
×４倍
×５倍
まとめ
今回は初めてのロゴづくりでした。
自分でイメージしたものを形にできるってやっぱり嬉しいですね！！
みなさんも、インプットだけではなくアウトプットも必要になってくるので、自分がイメージしたものを作っていきましょう
Pythonを学びたい方はこちらの記事を参考にしてみてください
プログラミング学習を進めているけれど、まだ副収入につなげられていない…そんなあなたへ！今こそ、学んだスキルを活かして副業に挑戦する絶好のチャンスです。プログラミングだけでなく、自分のスキルや商品をネットで販売する『ネットショップ』を開設してみませんか？
ネットショップを持つことで、自分の知識やスキルをより多くの人に届け、副収入を得ることが可能です。学んできたプログラミングを活かして、ショップのカスタマイズや運営も自由自在に行えますし、もし商品作成が難しい場合でも、デジタル商品やサービス提供など、いろんな選択肢があります。
このステップで一歩踏み出せば、今学んでいることが副収入に直結し、自分の時間をより有効に使うことができるはずです！一緒にネットショップを開設し、副業の第一歩を踏み出しましょう！
プログラミングを学びたいけど、どこから始めたらいいのか分からない、自分に合っているか不安…そんな悩みを持っている方におすすめしたいのが、 無料相談 サービスです！
この無料相談では、あなたの現状や目標に合わせて、最適な学習プランを一緒に考えてくれます。どんなスキルが必要なのか、どうやって学習を進めると効果的かを具体的にアドバイスしてもらえるので、無駄なく効率的にスタートを切ることができます。
さらに、プログラミング学習には同じ目標を持つ 仲間 がいること、そして頼りになる メンター の存在がとても大きな支えになります。独学ではどうしてもつまずきやすい部分も、メンターがあなたの成長に合わせて親身にサポートしてくれるので、安心して学びを進められます。
まずは 無料相談 で、あなたに合ったプランを見つけて、スキルアップへの第一歩を踏み出してみませんか？今なら、迷っている方でも気軽に相談できるチャンスです！
完成コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
x = 3 #230の倍率を入力 size(690, 690) background(0, 0, 255) fill(255) noStroke() rect(20 * x, 20 * x, 40 * x, 80 * x) rect(60 * x, 30 * x, 40 * x, 10 * x) rect(60 * x, 70 * x, 40 * x, 10 * x) rect(100 * x, 20 * x, 40 * x,120 * x) stroke(0) rect(110 * x, 10 * x, 20 * x, 40 * x) rect(130 * x, 10 * x, 20 * x, 40 * x) fill(255, 255, 0) noStroke() rect(90 * x, 100 * x, 40 * x, 80 * x) rect(130 * x, 110 * x, 40 * x, 10 * x) rect(130 * x, 150 * x, 40 * x, 10 * x) rect(170 * x, 100 * x, 40 * x,120 * x) stroke(0) rect(180 * x, 90 * x, 20 * x, 40 * x) rect(200 * x, 90 * x, 20 * x, 40 * x) |