Adobe Photoshop for Beginners Tutorial (Part one)

photoshop-for-beginners-tutorial

Photoshop is a graphic editor software developed and published by Adobe Systems. It has been used widely used because of its useful functions to either simple or complex graphic related creations. Learn Adobe Photoshop for beginners’ basic tips and tools description provided below.

 

Window

 

When you accidentally closed a panel in your workspace or if you forgot where it is and you can’t find it window menu is a great help. Click on the window menu on the top and you’ll find the options you were looking for.

 

Workspace

 

Workspace is a great way to set your Photoshop interface according to the kind of projects you are working.

 

For example, if you are working on Image color adjustments in Photoshop then you need histogram and adjustments panel so you would choose the Photography workspace set by Photoshop for you. Go to Windows- Workspace –Photography then a panel dedicated to Image adjustments appear.

 

You can also create your own workspace if you want a customize tools/panels to appear on your interface. First, Display your desired panels and when done just go to Window- Workspace- New Workspace. A window pops up to fill in the workspace name and hit save.

 

Rulers

 

Rulers are located on the top and the left side of your canvas. If you can’t find it just go to View-Rulers. There are two of it, the horizontal and vertical. Add a ruler guide to your canvas by clicking and dragging it to your canvas.

 

rulers-in- Adobe Photoshop for beginners

 

Actions

 

Do you have loads of work to be done and you took the same steps over again? Creating an action saves a lot of time.

 

Tools

 

Didn’t know the name or the shortcuts of the tools located on the left-hand side? Hover over the tool and information about it will tip up. You could also click on the tools that have caret which means that it has another option with the same kind of tool for you to choose. If it is not available in your workspace, you can find it be clicking on Window- Tools.

 

PSD File

 

JPEG is a compressed image format. Saving your work in this format is not the better idea if you want to resume editing. Save it as a PSD file format and you’re good to go.



Smart Object

 

Making a layer into a smart-object is a non-destructive technique. It acts as a pre-compose layer file. It preserves image or shape’s original quality when you resize an image to smaller and vice versa.

 

To make the layer into a smart-object, right-click on it and choose make layer into smart object.

 

See also:

Interface

 

Do not like the default dark gray interface color of your workspace? Change it by going to edit menu-preferences-interface and choose your desired color theme.

 

Grids

 

Grids are your friends. You might want to use grids so that you can position objects evenly or specifically on your canvas.

 

 

How to Edit Indexed GIF Image Layer Inside Photoshop

indexed gif photoshop

The indexed GIF image layer in Photoshop is because of the index color mode. Indexed layer prevents any changes within the image but what if we want to edit it?

 

If you want to edit an indexed gif image in Photoshop.

 

The first thing you will notice is an indexed layer of the image. Unfortunately, you cannot modify an image in a locked layer so we need a way to unlock it.

 

The usual double clicking or dragging the lock icon into the trash does not work.

 

gif indexed layer indexed gif image

 

To solve that.

 

Change your layer’s mode to RGB, CMYK or Lab Color. Click on your indexed layer and go Top menu then click on Image-Mode and choose whatever you prefer.

 

Read Also: Adobe Photoshop for Beginners Tutorial 

 

indexed gif image image mode

 

Now you can select the content of the gif image unlocked.

 

Save your image as GIF.

 

You need to go to file-save for web and select gif in the drop down option. It can be found below the preset field drop down.

 

How To Disable Text Selection With CSS User Select

css user select

By default, texts on any web page can be highlighted and copied. Disable the highlight function also disables someone to copy the texts in the document. Using CSS user select makes the texts unselectable.

 

If for some reasons, you do not want your texts inside the button or paragraph to highlighted. CSS user select style attribute might help you.

 

So how to disable text selection with CSS user select?

 

Learn how by watching this video or you can continue reading.

 

See more amazing CSS videos in youtube: Garnatti one

 

Target an element and add the following styles

 

-webkit-touch-callout: none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

It is self-explanatory that these styles disable the text selection.
Try to select the sentence demo below. The sentence was added with the CSS user select styles.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 

Notice that you cannot highlight the sentence above means the styles that added worked.

 

The-webkit-touch-callout attribute targets the ios safari browser, -webkit-user-select targets Chrome, Opera and Safari browsers, -khtml-user-select targets Konqueror, -moz-user-select targets Mozilla firefox and -ms-user-select:none targets internet explorer.

 

You can use this technique.

 

Prevent people from copying your content. Unfortunately, it is useless if people inspect your code from the browser. They can just copy the content within the source code.

 

Do not want somebody to copy your contents? The better way is to disable the right-click mouse function.

 

How To Link CSS To HTML | Step By Step

how to link css to html

There are three ways to link css to html: inline, internal and external stylesheets.
Here is the video you can watch to better see how the different stylesheets are implemented or continue reading for a detailed explanation.

 

See more amazing CSS videos in youtube: Garnatti one

 

1. Inline

Use inline style if you want to add a style uniquely to an element. Just add style attribute to the chosen element/tag and then add the style attribute and value.
Example:

<h1 style=”font-family:arial; color:red”>Hello World !</h1>

 

2. Internal

If you want your css to be within the same page as your webpage then internal css stylesheet is for you. Inside the head section add an opening and closing style tag. In the opening style element, add type attribute equals to ”text/css” .

 

<style type=”text/css”> </style>

 

Between your opening and closing style tags add desired styling attribute by targeting elements.
Example:

<style type=”text/css”> h1{
	font-family: ‘arial’;
	color: red;
} </style>

 

3. External

If you want your files to be organized then use external css stylesheet. Create a css file and save(the same level with the html file).

 

Name your css file whatever you want I name mine as style.css. Inside in your head section in html add a link tag to link our css file.
Example:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

We can now add styles inside our style.css file just like the internal css styles above but without the open and closing style tags.

How To Center A Div Inside A Div Easily

how-to-center-a-div-inside-a-div-tutorial

Why do we center a div inside a div element? Notice most of any website’s main content block always on the middle or a picture perfectly aligned on the middle.

 

There are a lot of ways to center a div inside a div. In this tutorial I am going to show you two different ways to center a div element inside another.


These two videos might help you.

See also:  Center Align Texts in Vertical Position
Continue reading below if you don’t want to watch the video.

 

Margin to center a div

Make the margin of the child div (the div inside the div) set to zero and auto.

 

.child-div{
  margin: 0 auto;
}

Notice the code above we have set the first value to zero. The zero value is the margin from the top and also from the bottom of the div. In the second value, we have not set a numeric value but an auto which makes the div go in the middle horizontally. It is the margin from left and right of the div.

 

Note: Make sure to set a width in your child and parent div for this to work. The parent div should have a greater width obviously.

 

Text Align to center a div

.parent-div{
  text-align: center;
}

Telling the parent div to make its child’s text elements to center also makes the child div to center horizontally. As a result the texts inside our child div are also centered. Therefore, the last thing we need to do is to keep the text aligned to the left.

 

The solution, we should target the child div and add a CSS style but this time text alignment to the left or wherever you prefer.

 

how to center a div inside a div

 

.child-div{
  text-align:left;
}

See more amazing CSS videos in youtube: Garnatti one

 

In conclusion, the two CSS styling techniques are both great methods to use to align a child div element in the middle. The margin attribute is better than the other since it will make your code lesser and simpler.