↑↑↑自作のロゴ完成図↑↑↑
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) |
倍率変更
×１倍
×２倍
×３倍
×４倍
×５倍
まとめ
今回は初めてのロゴづくりでした。
自分でイメージしたものを形にできるってやっぱり嬉しいですね！！
みなさんも、インプットだけではなくアウトプットも必要になってくるので、自分がイメージしたものを作っていきましょう
本気でプログラマーを目指している方へは、プログラミングのスクールをオススメしております。
中でも TechAcademy テックアカデミーをオススメしており、 TechAcademy テックアカデミーの実績として、
多くの会員がエンジニアとして巣立ってきました。数年前より、学生エンジニアという存在が物凄く注目されるようになっており、
メガベンチャーもこぞって、サマーインターンを実施、プログラミングを叩ける人材を青田刈りしています。
この職種は、学歴、学部、全く関係なく、プログラミング開発経験やその熱量がモノをいいます。
私より上の世代では、「エンジニアは3K」「ただの職人」「うつ病になりやすい」「35歳限界説」など
良いイメージを持っていないかと思います。
逆に若手のエンジニアは恵まれた環境に安心してキャリアを崩すといったこともあります。
そのあたりについて、いろいろと聞いてきましたので、
近くに若いエンジニアがいらっしゃるのであれば、助言するときに参考になるかと思います。
以下のリンクから【自宅で現役エンジニアから学べる TechAcademy テックアカデミー】に無料相談が出来るので以下のリンクから無料相談をしてみてください
完成コード
|
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) |