Greetings Developers!,
I don’t usually tend on making tutorials for UI ( nor tutorials in the first place ) as I sometimes screw stuff up and it ends up becoming very unorganized to work with.
But today I decided to post something new that I’ve never done before. I am known as a very weird person when it comes to stuff like UI, so I don’t usually use your typical UI/UIX software like Photoshop/Photopea/Illustrator/Figma etc…
I use Powerpoint and WPS Office (This dude bruh 
did he really just say that oh my god)
So to all the 10 people that use WPS Office, hope you learn something new ( I’ll try my best to explain everything )
Let’s start of by opening WPS Office
To anyone curious, here is the link:
Please read before continuing:
This tutorial in specific won’t show how to import the UI to Studio, I will make a separate one when I have the time to post!, Please don’t kill me, ( you can save it though )
Upon opening the application, this will pop up, click on Blank.
Since we are not doing a presentation at the moment click on Layout and then proceed by clicking Blank.
In order to start your epic UI, click on Insert-Shapes
There’s loads of shapes that you can use, but since this is a step by a step tutorial, you can do whatever you want with them!
Insert a Rounded Rectangle and Hold Ctrl whilst sizing the shape!
This is so the UI is perfectly sized!
"But what if I want my UI funky?"
Well, very simple!
By using the Edit Shape button, you can either change your shape or you can shape/strench it as you want!
Examples:
Shape:
https://gyazo.com/a64f8d7ad3966f95c88a7ea7f537fbd1
https://gyazo.com/dfddf97f64de9e78c8eb29c59b04d59b
Stretch:
https://gyazo.com/1d27efe9ec99e3088c353820a8b0b13e
Another cool feature that it has is the following:
https://gyazo.com/f9a9acd6b4ccac5adaf5fe2b63065fed
You can rotate a shape via the size buttons!
Continuing on with the tutorial:
If you want to add UI Strokes like in RobloxStudio
you can use the Weight function!
Let’s add an Outline on our UI! ( very simple to do so )
- Click on your UI and press the Shape Outline button
- Click on the Weight button
- Here you can find a variety of Outline Weights ( basically how big/small you want the outline to be )
- ( Optional ) Click on 3pt ( 3 points )
- Click back on the Shape Outline button and find a color of your choice to use for a outline color! ( for the record I am picking black as it’s the main one that I use as of right now )
This is how it should look like!
“I want my UI to be a different color”
Very easy to do so!
By using the Shape Fill button you can change the color of any shape within a couple of seconds ( crazy right? )
You can use regular colors, or even gradients, with just one click!
Wow! now it’s a darker color!
Commencing forth, If you want to make something like this:
Or maybe something like… hmm this:
Or you know you may be feeling a little bit extra and you may like something like this:
Then lets go step by step starting with…
The basic Shadow UI thing ( basically the first image )
What you will need:
Left: Our UI that we have created
Right: A black version of our UI
From now on you’ve probably learnt how to recolor/add outlines to your UI
Step 1: Center your UI
Step 2: Take the black version and… huh?
Why is it not in the back of the UI?
Well, in order to fix that, right click the black square and press on Send to Back
Doing that will make our one UI go behind our other UI, basically creating a “shadow”
You can resize it, recolor it etc…
And there you go!
Our first UI is done…
Going on to the more “interesting one” we introduce more shapes into this!
Step 1:
( optional ) you can keep our current version that we’ve created
Insert this arrow looking shape ( someone tell me what shape this is )
Center it and add an outline to it.
This small 10 second clip shows the next step: ( so there is a diversity in the post ) ( please update me if the video works, I will fix it asap )
( READ: INCASE THE VIDEO DOESNT WORK, I WILL HAVE IT IN THE TUTORIAL JUST IN CASE )
After you’ve centered the shape, go ahead and press on Edit Shape
Then press on Edit Points
It should look like this: A red line with black dots
Moving/Stretching one of these dots will change the look of the shape, so what we want to do is just slightly move the middle right dot just about as much as the left side looks.
Here is how it should look
Double click on the shape and type in market (or anything that you want really)
Preview:
Now in order to add an exit button, go over to shapes and find these 2 shapes
You can use which ever one you want, ill show both of them!
Preview:
Red version 1, Outlined ( weight 3 )
Red version 2, Outlined ( weight 3 )
And there goes the 2nd UI!
Now onto the final one, very simple! All we have to do is add another middle text in the inner Frame and add the selection boxes. To do so do the following:
- Insert a Text Box
- Insert 3 Rounded Rectangles
Step by step:
-
How do we Insert this Text Box thing???
Glad to answer this question!
i) Go to insert
ii) Add a Text Box
Should be looking like this line:
Let’s go step by step how to do this:
When adding text, it will look like this: Bland and boring, so here is how to make it better…
( BRO YOU FORGOT TO TELL US HOW TO ADD FONTSSSSS ) ( Oops… )
Before we continue, let’s learn how to add fonts.
I highly recommend using Google Fonts, it has mostly every font you can think of
Link:
Search Fredoka One
Upon clicking on it, you will be given the option to “download family” ( meaning that you will be able to download every version of fredoka one )
Click on it
A zip file should appear, notifying you that you have downloaded the font.
Clicking this file will direct you to the download area.
Click on Install, and the font will be put in the WPS Office Font selection
( You may need to save your UI in order for them to show up )
( You also may need to save them as Presentations, which you can later turn into PNGs but that is for another tutorial )
Now onto the tutorial again:
How to add the font to the text:
Select your text
Right Click
There are alot of useful features here but the ones you’ll be using most when making UI in WPS Office are the ones not crossed
This let’s you know what font you’re using and how big/small the text is
- Make your text bold 2) Curve the text 3) Underline it 4) Mark it
This let’s you change the text’s position
So now that you know the features…
Center you text in the middle
Increase it’s size to 24
And lastly, change it’s color to white, add an outline color of black, and change it’s weight to 1
1st part of the last UI is now complete, let’s go on to the final step which is to add 3 Rectangles
At this point you should know how to do this, so let’s go ahead and finish this, shall we?
Go to insert, add a rounded rectangle, change it’s color to a dark blue, add an outline of black with a weight of 1.5 ( repeat this 3 times or just CTRL+D to duplicate )
And there we go!!! You can now say that you have created User Interface in a non-UI related software!
Proud of you.
Now before I leave you all to do this tutorial for yourselves, I want to address some controversy that may or may not occur:
This tutorial is not for everyone, you don’t have to try this, it is purely made for fun and fun only.
I am waiting for messages like " This is so useless ", which yes I will agree on it is KIND of pointless in doing these many steps, but to me I find it useful, it’s something new and unique that I haven’t seen done on the Developer Forums, so why don’t you give it a try eh?
Either way, this took me approximately 2 and a half months to finish. Not the UI, the tutorial ( dumbo ).
Hope you guys enjoy it, largest ever Tutorial.
Best of luck and Keep Creating!
.