ゆるゆる自適

JKとして歩む日々

真夜中からillustratorでNeumorphismっぽいUIを作ってみる

15:00まで眠っていた私の脳はまだ働きたがっている。脳は働きたいかもしれないが、私は寝たいのだ。はて... ...どうしたものか、と思いながら意味もなくパソコンを眺め、効率よく頭を疲れさせる方法を考えていた。そんなとき、Adobeが「XDとillustratorをアップデートします」と通知をよこしてきた。... ...これだ、illustratorで何か作れば脳が疲れるに決まっている。

ありがとうAdobe、私は今からillustratorを使って頭を疲れさせるぞ。
私は早速illustratorを起動し、適当にブツを生成することにした。

ステップ-1. お題を決める

UIを考えるにあたってお題を決める。今回はTwitterのホーム画面をNeumorphismっぽく作ってみるというお題にした。

ステップ0. 下書き

とりあえず紙に殴り書きする。
ほぼ公式Twitterと同じ配置にすることにして、各要素はシャドウで区切るような感じのイメージで固めることにした。

ステップ1. 色とアートボードのサイズを決める

アートボードのサイズはiPhone X(1125px * 2436px相当)にして、色は以下のものを使用していく。

f:id:dk010riri:20200621052658p:plain
カラーパレット

ステップ3. それっぽく作る

Dribbbleさんで"Neumorphism"と検索し、素晴らしい作品を眺めながらそれっぽく作り始める。これは余談だが、Dribbbleを漁ると基本的に3時間は過ぎる。

シャドウはアピランスをフル活用して再現した。全体の雰囲気をみながら後々修正していく。

f:id:dk010riri:20200621003417p:plain
それらしき四角形(のちにナビゲーションになるもの)

フリーのアイコンを探すのが面倒だったので、アイコンなどもすべて作ることにした。

ステップ4. 朝を迎える

現在4:59、窓をあけてしまったら朝である。
私は窓をあけずに夜を続ける。知らない、今はまだ夜なのだ。

ステップ5. 予想以上にダサくなってしまったので完成ということにする

私の技術不足でダサいUIへと変貌を遂げたTwitterのホーム画面をどうぞ。

f:id:dk010riri:20200621052944p:plain
ダサくなってしまったUI

最後に

この記事はICT委員会 コロナに負けないぞブログリレーの6月21日分の記事でございました。

昨日はコーヤ先輩だったみたいですね。ちなみに私もドクターペッパーが好きで、実質水だと思いながら飲んでいます。一人暮らしになってから一時期は週1回飲むくらいのペースだったのですが、ある日を境に学生時代のときのように毎日水のようにがぶ飲みする生活に戻ってしまいました。そのせいで今現在ドクターペッパーが枯渇しているので生命の危機を感じています。
roadagain.hatenablog.com

話を戻しましょう。脳を疲れさせて寝るためにillustratorで色々作っていたわけですが、現在5:31ですね。世間一般的には朝というのでしょうが、私はまだ日の光を浴びていないので夜ということにして寝たいと思います。今日はよく眠れそうですね。

ではみなさん、おやすみなさい。