Adobe Photoshop Tutorial (Beginners Guide)

title


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
  • Camera Raw Filter

Uses of Photoshop for Roblox

Photoshop can be used for a variety things in roblox. For example:

  • GFX (Graphic Design)
  • UI Design
  • Clothing Design
  • Textures
  • Blueprints

And more…


Basic Tools in Photoshop

You will be learning about basic tools and what it does in Photoshop!

Move - Move Tool

  • The move tool can be used to move pictures around in your document or move pictures to other documents.

blur%20tool - 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%20tool - 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.

colour%20swatch - 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 - 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.

eraser - Eraser

  • 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.

paintbucket- Paintbucket

  • The paintbucket allows you to fill in a empty background with any colour you want.

shape%20creator - Shape Tool

  • The shape tool is used to make shapes. For example: Rectangle,Squares etc.

text- Text Tool

  • The text tool always you to create a text layer and insert letters and numbers.

zoom - 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

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!

Blur Settings:

You can play around with all these settings. However, I’ll be teaching you how to use the Lens Blur!

  1. Make sure you click Filter, Hover over Blur then click Lens Blur.
  2. 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!

Lighting Settings

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!
LIGHTING

You can play with the settings but I will be showing you how to improve lighting quality on this image!

  1. Click filter settings, Hover over render and click Lighting Effects
  2. 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!

Lens Flare

Hmmm, Feels as if something’s missing. That’s right! A lens flare should do the job!
LENSFLARE

  1. Click on filter settings, then hover over render then click Lens flare
  2. 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!

Before:

After:


Blending Options

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? :slight_smile:


Round Ui’s

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 properties

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 :open_mouth:

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 :slight_smile:


Camera Raw Filter

The camera raw filter essentially converts your RAW Image into pixels.
Now lets get a picture. I will be using this:

Then we can open up the camera raw filter with Shift+Ctrl+A or you can open it by going into filters and selecting camera raw filter.

Essentially you play around with all the settings until you got what you like:

I will be explaining some of the things in this menu

Temperature - Makes your image seem warmer or colder. (Yellow:Blue)

Tint - Adds a shade full of different colours or merged colours.

Exposure - Is essentially the tolerance of light in an area.

Highlights - Makes darkened areas like shadows more bright.

Shadows - Allows your shadows to be darker or lighter.

Whites - Makes white brighter or darker.

Blacks - Makes blacks brighter or darker.

Clarity - I believe its what makes your image more transparent

Vibrance - Increases the intensity of colours

Saturation - Based on the hue of your colours, the saturation adjusts/changes to it.

Tips n’ Tricks

Alright homies, updating this as this post has 100 likes! Thank you. Below I’m going to add in a cool trick you can apply to your ROBLOX images.

Dual Lighting Effect:

Ok, here I have a picture of a car. Ye bad render I know :frowning: but can we make it have a dual lighting effects. Yes we can!

First, make sure you have the Layers window open then click the little circle thing and click gradient

https://gyazo.com/269b8a46eab013e542aa573c1cc96692

You should meet this window

Then click on gradient it should open up a colour palette. I have chosen red to be my lighting effect! Angle it how you wish with the angle option.

To change the effect go back to the layer tab. Click on the drop down box where it says normal and you can play around with the lighting

https://gyazo.com/b7b9b37bfa54acea149006899dc2f94d

After that, you want to copy and paste repeat the steps and angle it so it is opposite your current gradient.

Before:

After:

Adding a tricks n tip every week! Follow the thread if you wish :slight_smile: Do Note more will be added later on


Summary

Now you have learned the basics of Photoshop and I hope you can use these skills in the future! I really do hope you have learned something from this tutorial!
If you have any questions about the tutorial or problems you are having please do feel free to DM Me or reply to the thread! Hope you have an awesome day!
-EggYolked

100 Likes

This is a nice tutorial for beginners. I even learned new stuff i did not know you could do with photoshop.

8 Likes

If there is one Photoshop tool I highly suggest it would be the Camera Raw Filter.
It is an more advanced tool but one of the strongest tools in Photoshop.
Here is an little example of how the Camera Raw Filter tool adds more depth clarity and color to your example image.

15 Likes

I don’t really like it because all it does is sharpens the image in my opinion. However, I can see why people may like it.

6 Likes

I really suggest you trying out the tool yourself!
You might not like the adjustments I made but I am sure you will fall in love with that tool as I did.
Next time you have Photoshop up just take a random picture open up the Camera Raw Filter and go to the presets and see how they affect the picture. It has around 30 settings you can change so finding something that works for the job you are working on is a breeze. And being able to make your own presets it allows for an incredible easy workflow.
Presets%20tab

5 Likes

Maybe i’ll use it more in the future :slight_smile:

4 Likes

Thanks a lot. You really helped me getting started on Photoshop. Finally i dont have to spend robux on hiring others when i can do it myself. Thanks :slight_smile:

2 Likes

No problem :slight_smile:
If you have any issues feel free to message me!

2 Likes

Thank you.

2 Likes

No problem. I’ll be adding more stuff to help you learn more about photoshop.

2 Likes

I’d love to see some stuff about designing an effective ad in Photoshop/Illustrator if you can do that!

1 Like

I can try! However, I’m not the best with Blender GFX. But i’ll make sure I do try.

2 Likes

I just downloaded photoshop, bought it and this helps me a lot!

1 Like

Those lighting adjustments look really good! Tried it on a picture and damn that difference

1 Like

Awesome, I’ll be adding on more stuff, like cropping etc.

Added in a Camera Raw Filter tutorial! Do tell me what else you would like!

That is quite helpful, even though i’ve been using photoshop for years, there’s still some things that i never notice that it existed…

1 Like

Hey guys! Thank you for 100 likes on this thread. I am adding in more cool stuff to this thread and making a full-on guide. I want to make it easier for you guys to use photoshop. Please tell me things you want to learn in photoshop. I have updated the thread and added in a tricks n tip subsection. Thank you!!!