What will be in this tutorial
In this tutorial you will be learning the following:
- Uses of Photoshop for Roblox
- Tools in photoshop and its uses
- Filter Settings
- Blending options
- Making round boxes for ui’s
Uses of Photoshop for Roblox
Photoshop can be used for a variety things in roblox. For example:
- GFX (Graphic Design)
- UI Design
- Clothing Design
Basic Tools in Photoshop
You will be learning about basic tools and what it does in Photoshop!
- Move Tool
- The move tool can be used to move pictures around in your document or move pictures to other documents.
- Blur Tool
- This tool can be used for blurring out specific places in your image. It acts like a brush so you can adjust the radius and strength of the blur.
- Brush Tool
- This tool allows you to draw and lets you adjust things on your image. You can adjust the radius and strength of the blur for this. You can also get different types of brushes. Photoshop already has preset brushes but you can download add on brushes that are not offered by Photoshop.
- Eyedropper Tool
- Do you like a colour you see but don’t know what it is? Well this tool allows you to find that colour. You simply click the eyedropper tool and click on the colour you want and Photoshop will get that colour for you in no time!
- Crop Tool
- This tool is used to resize or focus on a specific image. If you found a image but don’t like stuff in the surroundings. You can crop it to just focus on the image you want.
- The eraser allows you to rub out things you don’t want in an image or if you were using the brush tool it also rubs that out. It is advised you use a new layer when drawing because if you make a mistake you can rub out just the brush and not the image.
- The paintbucket allows you to fill in a empty background with any colour you want.
- Shape Tool
- The shape tool is used to make shapes. For example: Rectangle,Squares etc.
- Text Tool
- The text tool always you to create a text layer and insert letters and numbers.
- Zoom Tool
- When a image is quite small you can use the zoom tool to zoom in on the image and you can even make pixel by pixel adjustment with the brush tool ( Depending on the radius of your brush Set to 1px if you do.) To zoom out you would have to right click and click Fit to screen or Zoom out.
Filter settings can be used to help improve your image. Either by fixing up lighting or adding in a cool lens flare. In this page you will learn the basics of filter settings.
Here I have a bland image (feel free to download):
It’s quite dark right? Let’s see how we can improve this!
You can play around with all these settings. However, I’ll be teaching you how to use the Lens Blur!
- Make sure you click Filter, Hover over Blur then click Lens Blur.
- After Clicking a small UI should pop up looking like this:
The radius will make the image blurrier because the blur is getting larger in size.
The rotiation will rotate the blur of the image.
The shape changes the type of blur. I usually use square because it looks nice!
Here is what it looks like now!
Ok so now my image looks like this:
But I feel as if something’s missing, it looks a bit too dark. How about we fix the lighting of this!
You can play with the settings but I will be showing you how to improve lighting quality on this image!
- Click filter settings, Hover over render and click Lighting Effects
- A UI should open up like this:
Let’s change the type of lighting from Spot to infinite.
The circle in the middle is the intensity of the lighting, this will change how intense or strong the lighting is (in roblox it would be bloom).
The brightness will make the lighting brighter as you go up!
The colour will change the type of sunlight. This can improve the lighting a lot!
Here are my settings (feel free to play around):
Now it looks brighter and something I like!
Hmmm, Feels as if something’s missing. That’s right! A lens flare should do the job!
- Click on filter settings, then hover over render then click Lens flare
- A ui should open up:
The brightness will increase the radius of the lens flare!
To move it around simply click on the lens flare in the box and move it to the position you want it to go!
Feel free to mess around with the settings but I will be using the one I like it!
Here are my settings:
Here’s the finished product!
For this you can use the same image we editted from before.
Lets start by using the text tool!
At the top you can change the font which will change the style of the text and the size of the font!
Lets open up blending options to improve this! For this you want to right click on your text layer and click Blending Option at the top!:
A UI Like this should then open up!
Bevel - Bevel will extrude your text and make it look quite hard.
Stroke - Adds a Outline around the text
Inner Shadow - Add a shadow going inside making the text look indented
Inner Glow - Make the text have a glow on the Inside
Colour overlay - Allow you to add a colour over your original colour on your text
Outer Glow - Adds a glow around the text on the outside
Drop shadow - Adds a shadow dropping from the text.
Here is what I did to the text:
I used Drop Shadow and Colour Overlay:
Now it looks like this:
Wow we transformed that bland image to this, cool right?
Wow you have come so far! Now we will learn how to make Round UI’s. It really is quite simple!
Let’s start by making a rectangle.
Then we want to go to the properties setting and you’ll see something like this
Now the link in the middle in the middle connects all these corners together. We want to make this UI round so lets input the number 25 px.
Now our UI Is round
Lets then right click on the layer and click blending options and a drop shadow!
Now you want to adjust the dropshadow to make it come under the UI!
Wow looking fantastic. Now you have created a round boxed UI. Not that hard
Now you have learnt the basics of Photoshop and I hope you can use these skills in the future! I really do hope you have learnt something from this tutorial!
If you have any questions about the tutorial or problems you are having feel free to DM Me! Hope you have an awesome day!