The tutorial I bring to you today is to teach you how to use PHOTOSHOP to create a watercolor-style navigation bar (menu bar) like the Web Designer Wall website. First, I will teach you how to use PHOTOSHOP to create a navigation bar. The required image files, and then in the second part of the tutorial I will teach you how to use CSS to make this navigation bar. OK, without further ado, let’s get started:
Look at the renderings first
1. Notebook paper picture
First we need to find a picture material of notebook paper with perforations. Eddie recommends a website for finding this kind of material: stock.xchng. Of course, deviantart is also a good choice. In this tutorial, you will first use the picture I gave you.
2. Watercolor effect
First open our material picture in photoshop, hold down Ctrl and click the paper layer to load the selection, then create a new group and click the small button below the layers panel to create a layer mask. Doing this means that when we use the brush later, the color will only appear within the masked area.
Create a new layer, choose a very light pink (or other light color you like), select the Brush Tool (B), adjust the brush size to 100px in the upper panel, and the opacity to 10%. Then paint some pink randomly on top of the paper. !
Repeat this step until the effect is almost the same
3. Add some details
Find some material pictures of coffee stains, place them on top of the paper layer, and set the blending mode to “Overlay” in the Layers panel.
Next we can also use some ready-made brushes to add some stain and water stain effects. Suitable brushes can be downloaded from splatter and watercolor here.
Next, add some sketch materials to enrich the details. You can find materials from the website I provided, or download them directly from the vector illustration here.
Make a triangular selection in the upper right corner of the paper, then select gray and select the Gradient Tool to draw a gradient in the selection. This makes the paper in the upper right corner look like it has been folded.
4. Handwritten font
If you don’t have a suitable handwriting font, I also recommend you to go to Dafont and Urban Fonts to find it. (Both sites are free and have a lot of resources.) Next, add the text you want. As shown in the picture
5. An RSS icon soaked in water
First we find an RSS icon. Select the eraser tool, then select one of the brushes you used above, adjust the opacity to 10% and gently rub around the edges of the icon. Then you can also choose gray and add some gray to the icon to make the RSS feel a little dirty.
6. Pencil style border
Pencil-style borders can be easily drawn in Adobe Illustrator. First draw a shape or path, then open the brush panel. Select the charcoal brush and adjust the size to 0.25pt.
��7.End
This is the final result, what about yours?
If you want to spend more time on details, you can also add some paper scraps, transparent tape, small stickers, etc.
I saw that the effect of this is very good, so I also translated it into Chinese for friends who need it. Please forgive me if the meaning is wrong.
Although it is not that simple to achieve the same effect as the original author (except for the experts here), I believe there are still many points that can be learned in this tutorial. Hope everyone can benefit from it.
The tutorial I bring to you today is to teach you how to use PHOTOSHOP to create a watercolor-style navigation bar (menu bar) like the Web Designer Wall website. First, I will teach you how to use PHOTOSHOP to create a navigation bar. The required image files, and then in the second part of the tutorial I will teach you how to use CSS to make this navigation bar. OK, without further ado, let’s get started:
Look at the renderings first
1. Notebook paper picture
First we need to find a picture material of notebook paper with perforations. Eddie recommends a website for finding this kind of material: stock.xchng. Of course, deviantart is also a good choice. In this tutorial, you will first use the picture I gave you.
2. Watercolor effect
First open our material picture in photoshop, hold down Ctrl and click the paper layer to load the selection, then create a new group and click the small button below the layers panel to create a layer mask. Doing this means that when we use the brush later, the color will only appear within the masked area.
Create a new layer, choose a very light pink (or other light color you like), select the Brush Tool (B), adjust the brush size to 100px in the upper panel, and the opacity to 10%. Then paint some pink randomly on top of the paper. !
Repeat this step until the effect is almost the same
3. Add some details
Find some material pictures of coffee stains, place them on top of the paper layer, and set the blending mode to “Overlay” in the Layers panel.
Next we can also use some ready-made brushes to add some stain and water stain effects. Suitable brushes can be downloaded from splatter and watercolor here.
Next, add some sketch materials to enrich the details. You can find materials from the website I provided, or download them directly from the vector illustration here.
Make a triangular selection in the upper right corner of the paper, then select gray and select the Gradient Tool to draw a gradient in the selection. This makes the paper in the upper right corner look like it has been folded.
4. Handwritten font
If you don’t have a suitable handwriting font, I also recommend you to go to Dafont and Urban Fonts to find it. (Both sites are free and have a lot of resources.) Next, add the text you want. As shown in the picture
5. An RSS icon soaked in water
First we find an RSS icon. Select the eraser tool, then select one of the brushes you used above, adjust the opacity to 10% and gently rub around the edges of the icon. Then you��You can choose gray, add some gray to the icon to make RSS feel a little dirty.
6. Pencil style border
Pencil-style borders can be easily drawn in Adobe Illustrator. First draw a shape or path, then open the brush panel. Select the charcoal brush and adjust the size to 0.25pt.
7. End
This is the final result, what about yours?
If you want to spend more time on details, you can also add some paper scraps, transparent tape, small stickers, etc.
I saw that the effect of this is very good, so I also translated it into Chinese for friends who need it. Please forgive me if the meaning is wrong.
Although it is not that simple to achieve the same effect as the original author (except for the experts here), I believe there are still many points that can be learned in this tutorial. Hope everyone can benefit from it.
微信扫一扫打赏
支付宝扫一扫打赏
