HOW TO DESIGN ICON FAVICON HOMEPAGE BLOG WEBSITE WITH PHOTOSHOP

By | December 8, 2021


how-to-make-icon-favicon-homepage-blog-website-with-photoshop

HOW TO MAKE A WEBSITE BLOG FAVICON ICON WITH PHOTOSHOP how-to-make-icon-favicon-homepage-blog-website-with-photoshop

When you visit a website or blog, you often see a web layout design that always displays a website blog homepage favicon icon depicted with home writing and a house image design as the website blog blog website’s favicon icon logo. The Favicon Logo Icon design has a small size usually at the far left

This time the creativedesign studio admin will give a design trick on how to make a blog website favicon homepage icon with photoshop. Admin in the tutorial on making this homepage favicon icon uses adobe photoshop CS3, how to make a logo homepage icon is very easy and simple, my friend can use other versions of photoshop such as adobe photoshop CS4, CS5, CS6, CS7

Here is a photoshop tutorial: how to make a favicon homepage blog website icon with photoshop

Open a new file with a size of 217 × 470 px and 300 dpi.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop



Start creating a box with the rectangle tool with a black box color with the parameters from the next image.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop



how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Using the rectangle tool with rounded edges not sharp, make a square box with the size as shown in the following image

how-to-make-icon-favicon-homepage-blog-website-with-photoshop



Radius-15px
Fill 0% on the layer.
Blending Options-Gradient Overlay

how-to-make-icon-favicon-homepage-blog-website-with-photoshop


Gradient parameters.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop



Using the same rectangle tool we will create another box with black color as the size shown below.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop



Radius-25px
Fill 0% on the layer.
Blending Options-Stroke

how-to-make-icon-favicon-homepage-blog-website-with-photoshop

This gradient is a parameter.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop



Use the gradient tool and draw a circle using the ellipse tool like the one from the bottom.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Fill 0% on the layer.
Blending Options-Gradient Overlay

how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Gradient parameters.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Using the same ellipse tool we will create another circle with the parameters from the next image.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Fill 0% on the layer.
Blending Options-Stroke

how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Gradient parameters.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop

select the pen tool / path tool to create a semicircle with the size of the next step.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Fill 0% on the layer.
Blending Options-Gradient Overlay

how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Gradient parameters.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Select the line tool on the Photoshop tool bar, and start drawing the silhouette of the house with a white contour color as shown in the next step.

how-to-make-icon-favicon-homepage-blog-website-with-photoshop
how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Merge the second layer containing the silhouette of the house with each different icon that we have created earlier, namely the box icon with a black background and the circle icon with a green base color.

The final result is like the following picture


how-to-make-icon-favicon-homepage-blog-website-with-photoshop

Thus

Photoshop tutorial: how to make a website blog website favicon icon with photoshop

Good luck!!

Category: