Hi there. This is “sita” who always slept 3 hours a night on the day before high school exams, because I was so absorbed in creating the home screen only before exams…
In this article, I will introduce my splatoon 3 design home screen, the rough way to make it, and its appeals.
Sorry, I have not translated it but I wrote about how to make Android home screen in Japanese. So, if you have interest, please read it with Google translation.
Introduction of my home screen
Previous works
As you see, I have only changed background wallpaper and little change the app positions. However, only changing wallpaper is even exciting.
By the way, my phone is Sony Xperia XZ2 compact which has vertically long screen. This is why the screenshots are vertically long.
Hidden features of my home screen
My home screen has only 1 page. This means that the home screen cannot be scrolled. You think “What? does he have very small number of apps?”, don’t you?
No. My home screen has a drawer and many gesture features.
The hidden features are following ones;
- Long tap “Line” to launch “Twitter”
- Long tap “Skype” to launch “Discord”
- Long tap “Storage” to launch “Z-achiever(File decompression software)”
- Long tap “Camera” to launch “Silent Camera”
- Long tap “Music” to launch “Apple music”
- Swipe down on “Setting” to check the network logs
- Swipe up on “Setting” to run the “Greenify” command
- Long tap Memo space to launch “Trello”
- Double tap on free space to Call
- Swipe up on free space bring calendar and task list widgets.
- Swipe left on free space to open drawer. Swipe left again to display all apps．
Do you think it looks confusing? But I’m a creator of this home screen. It is very convenient for me.
Is it similar to your idea from “Splatoon design home screen”? Some of you must be surprised about how free customizing the Android home screen. This is one of the reasons why I always choose Android phone.
The rough way to make the home screen
Most decorations are on wallpaper
As you see above images, the most decorations are drawn on the wallpaper. Only icons and widgets are displayed by launcher app.
The app I’m using is Lightning Launcher
I have been using “Lightning Launcher” (Launcher is home screen app which launches your apps). When I got crazy about making home screen, it is a very innovative launcher app. But now, I think there are other apps which can edit same freely as “Lightning Launcher”. The normal launchers align icons neatly, in contrast, you can freely edit position, angle and size of icons in Lightning Launcher.
The way to edit home screen is like using PowerPoint.
The icon pack is “Whicons”
I’m using icon pack “Whicons” in icons of Setting, Play store, Chrome on my home screen. Icon pack is one kind of apps you can download from Play store. You can change the app icons entirely when icon pack is read by a compatible launcher.
I wanted to use simple and white icons. As a result, I chose “Whicons.”
The wallpaper is made using “Affinity Designer” (PC)
The Wallpaper is of course made by myself. If you want to make good quality wallpaper, I recommend you to use PC design software. But, PowerPoint and Excel are also ok.
The design software I personally recommend is Affinity designer. Simply put, this software is a cheap Illustrator. Of course you can use Illustrator, but if you feel it too expensive to use, Affinity designer is for you. It’s really cheap because it’s a outright purchase format, not a subscription format.
Any software is ok if you can make wallpaper, but it is better to make the image in vector format. If you can make a vector image, you can output it beautifully even when your smart phone and the resolution of your screen is changed. It’s a great treasure time to look at your proud home screen with no-noise dot-by-dot wallpaper.
The images on this article have noises, however, the real home screen I’m looking on my phone has no-noise, perfectly beautiful and very very very…muhaha…hehehe…
Please read the below article if you want to know a little more about how to make home screen. Sorry, I have not translated it in English yet, but please read with Google translation if you want.
Reproduction of the official artworks
Ink splashes
Ink splashes are the most characteristic design of Splatoon. Of course, depending on your concept, it is not definitely necessary. However, it is easy for those who are not familiar with to understand your design is Splatoon inspired.
In contrast, only Splatoon manias can notice if you include Splatoon like design other than include ink splashes.
About the way to draw the splash pattern, I put the vertexes like the below figure. A pro designer would put more vertexes and adjust more meticulously, but I’m not the pro and bad at meticulous adjustment. So, I tried to reduce vertexes and made the curves natural as possible.
In addition, consideration about law of nature makes your design more fresh. For example, the ink is spread intensely from center if you spilt ink from a high place, isn’t it? So, the direction of ink extension should be almost from center position. But on the contrast, personally, it looks not natural that the direction is completely from center.
Furthermore, gravity should work ink in both real world and a game Splatoon 2. This means making below part of ink pattern thicker seems nice. エモい(E-MO-I)! (Recently, Japanese twitter users, geeks, nards and so on often tell impressive things “E-MO-I” which means “It is emotional!”)
It becomes a little professional story, but considering the function of the curve makes your design more natural if you are a good scientist, engineer, mathematician or so on. I just trusted my instinct when draw the splash pattern because I’m bad at math. However, if you are one kind of researcher, it is better to draw your figures with considering functions of the curves.
I have told the long story and looks arrogant, but actually I have not been studying about design. What I want to say is that my comment is just for your reference…
Diagonal stripe pattern
The diagonal stripe pattern of two gray colors is often used in official Splatoon designs, for example, the game icon on Swtich home, SplatNet 2, and so on.
I wanted to pick the color from official artworks. However, the color combination was hard to see on my phone, so I made the color at that time.
Squid arrow mark
Squid like arrow mark is used not only as normal arrow mark, but also on background. I used this design too.
Reproduction of Splatsville style (Splatoon 3 style)
From here, I will talk about my designs referring to Splatoon 3. Basically, the designs are from official Splatoon 3 trailer. Splatsville style is so so so very cool and kill me.
A lot of Stickers and Seals
What I fell in love first with is a background of stickers pasted messily. I thought firstly making the background.
Honestly, I think there are few types of stickers on my background from Splatoon 3. I want to trace more official Splatoon 3 stickers!
By the way, I think “It looks like a street wall in a poor public security town.” at first. However, if you look closely at it, there are stickers on suitcase, air tickets, brochures, and so on. Is Splatsville a famous tourist spot, or is the next hero on a wandering journey? I can’t wait more information!
Expression of weathering
Another characteristic design of Splatoon 3 is worn out textbox.
When I draw the expression of weathering, I imagined a black worn out cardboard. The damages of textboxes are like scratch mark from border.
In order to make damaged part gray, two almost same shapes are stacked and the black shape is drawn as more scratched.
Main Colors of Splatoon 3
I used the main colors of Splatoon 3 with using color picker. Designers focus on also making colors. Color is one of the very important factors that the artwork impresses viewers. This is why I took the main colors from official artworks.
What I wanted to but I can’t due to time
Changing the fonts to Splatoon font
A lecture about UI design of Splatoon was held in Japan. In the lecture, a Splatoon designer said “A font is very important to express the world.” I’m convinced by this, so I want to change all fonts to Splatoon font in fact.
However, I don’t know how to change font of the clock widget. In addition, there are no official published font, and I need to make the font by myself or trace the each letter. I can’t be bothered.
Sorry, the link is a Japanese site. Please read it with google translation. The content is about an official presentation of Splatoon UI design in CEDEC by Splatoon developers.
Adding Stickers and Seals traced from official artworks
There are many kinds of stickers and seals on Splatoon 3 artworks. The designer’s work must be hard…
In my opinion, the reason why my home screen is not so good is the design of them. However, I don’t have enough time to trace everything.
Adding ink dropping effect
In my first idea, I planned to put the black ink dropping effect when pushing the gear icon. However, making fluid animation looks tough, and animation effect has high battery consumption.
Finally
Is this article helpful…? I just wrote what I want to proud…
Anyway, let’s play Splatoon 3!! And let’s sink in the swamp of home screen creation!! Yeahhhhh!!!!
By the way, Japanese geeks “OTAKU” often express “addiction to something” as “沼にはまる(NUMA-NI-HAMARU)”.
“沼にはまる” means “sinking in the swamp”.
