PSD Tutorial: How To Design A Professional But Ornamental Div Box
Div boxes (also known as division tags) are the most dominant part of modern web design, and the easiest thing to customize if you want to add a little more visuality to your CSS Stylesheets. Google now ranks slow loading websites lower than fast loading websites, so rather than adding unnecessary images to your designs, try customising the natural parts of your CSS layouts. You'll need to download a fleuron flower brush for your ornamental texture. Combining this with layer styles will create an elegant text box, but with a creative twist and minimal coding expertise.
If you don't have Adobe Photoshop, or you would like to upgrade to the new CS5.5 Version, take a look at the Adobe Special Offers from the online Adobe Store. If you're new to Photoshop, we have some beginner tutorials and basic tips coming very soon for some of the lesser established designers.
If you don't have Adobe Photoshop, or you would like to upgrade to the new CS5.5 Version, take a look at the Adobe Special Offers from the online Adobe Store. If you're new to Photoshop, we have some beginner tutorials and basic tips coming very soon for some of the lesser established designers.
Download Photoshop (PSD) File
Download Photoshop Flower Fleuron Brush
Photoshop Tutorial Step 1: Setting Up Your Canvas And Div/Text Box
1.1. Fill (G) your background. You won't need the layer later on, but it's nice to see roughly what your div/text box will look like.
1.2. With the Rectangular Marquee Tool (M), draw your text box, Create A New Layer. (CTRL + Shift + N), then fill your text box.
1.2. With the Rectangular Marquee Tool (M), draw your text box, Create A New Layer. (CTRL + Shift + N), then fill your text box.
Photoshop Tutorial Step 2: Adding The Basic Layer Styles To Your Div/Text Box
2.1. Add Layer » Layer Style with the following settings...
2.2. Add an Inside White 1px Stroke.
2.3. Add a Parchment (Artist Surfaces) Pattern Overlay with 10% opacity. Experiment with different patterns if you wish.
2.4. Add an Inner Shadow with 75% Opacity, 0px Distance, 0% Choke, and 250px Size.
2.5. Add a Drop Shadow with 20% Opacity, 0px Distance, 100% Spread, and 1px Size.
2.6. Remember, the numbers might need to changed slightly if you're making a different sized div/text box.
2.7. Duplicate the layer and remove the Drop Shadow and Stroke Layer Styles on it.
2.8. With the Eraser Tool (E), and an ornamental brush, cut out a section of your div/text box.
2.2. Add an Inside White 1px Stroke.
2.3. Add a Parchment (Artist Surfaces) Pattern Overlay with 10% opacity. Experiment with different patterns if you wish.
2.4. Add an Inner Shadow with 75% Opacity, 0px Distance, 0% Choke, and 250px Size.
2.5. Add a Drop Shadow with 20% Opacity, 0px Distance, 100% Spread, and 1px Size.
2.6. Remember, the numbers might need to changed slightly if you're making a different sized div/text box.
2.7. Duplicate the layer and remove the Drop Shadow and Stroke Layer Styles on it.
2.8. With the Eraser Tool (E), and an ornamental brush, cut out a section of your div/text box.
Photoshop Tutorial Step 3: Experimenting With This Tutorial
3.1. Remember that this tutorial is extremely variable.
3.2. In my final example, I have applied the same effects to the background. Better, don't you think? A layout is beginning to form here.
3.3. Please respond with your examples in the comment box, we'd love to see what you guys have come up with too.
3.2. In my final example, I have applied the same effects to the background. Better, don't you think? A layout is beginning to form here.
3.3. Please respond with your examples in the comment box, we'd love to see what you guys have come up with too.
