| Photoshop Tutorials » Web » Content Box |
- Click here to see the video version of this tutorial. - Open a new 300 x 300 document. - Change the background color to #959595 - Now take the Rounded Rectangle Tool and create a similar shape to the one below, fill the shape with #b7b7b7.
Title: Classic Website Content box Description: This tutorial will teach you how to make a classic Website Content box.This is a great tutorial for a web designers and website owners. Tutorial Project
In this tutorial you will learn how to create a content box similar to the ones used on this site, where the corners are rounded and the heading has a 3D effect. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.
Start with a large black canvas, in your layers window make a new layer set and name it Media Site Content Box. Choose your Rounded Rectangle tool with a 10 px radius and anti-aliased checked. In a new layer draw a 754 x 33 px, #9BDD9D colored rounded rectangle.
Highlight your 'Content Box' layer set on the layers window. then go to Layer > Merge layer set. This should turn your layer set into a layer, apply a Satin layer style to layer.
Start with a large black canvas, in your layers window make a new layer set. Name it Content Box. Choose your rounded rectangle tool and set the radius setting to 8 pixels. In a new layer draw a 239 x 48 pixels, #2A568F colored rounded rectangle. Use the fixed size setting under rounded rectangle options to make the exact rounded rectangle. Cut the bottom corners of your rounded rectangle.
This Photoshop tutorial will teach you how to create a fresh and unique content box design for you website easily, step by step.
In this tutorial you will learn how to create a sleek blue content box with navigational bar. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.
Now you have to add your content. This can be text, images, ads or whatever! I have added text, and this is what I came up with:
In this Photoshop tutorial you will see how to make a content box cartoon style, I'm not sure what really inspired me, but I started out making a simple cloud shape and ended with this result.
Now make a copy of the buttons layer and the glossy layer and place it at the other side of our content box.
With the line tool, drag and draw a straight line just beneath the top shape all the way across our content box, give it a dark gray color, so it looks like a shadow, in indent.
I made this small tutorial for a new content box as part of a bigger web project, and I want to share the tutorial with you so you can make one of your own.
In this adobe Photoshop tutorial you will see how to make a custom christmas content box, or shape, I just made this and was a bit inspired by the christmas spirits around my house right now, I think the result came out quite good.
In this Photoshop tutorial you will see how to make a drawing pin, (one of those you hang up paper on boards with), and how to easily appy it to a content box. If you don't know what I mean take a look at the tutorial.
Let's start out by creating a new file. I used a 400x200 pixels canvas set at 72dpi, and I filled my background with a white color. Now create a new layer set and name it 'Content Box'.
Google recently released a great new tool for webmasters. Google Ad Manager is a hosted ad management solution that can help you sell, schedule, deliver, and measure all of your directly-sold and network-based inventory. Learn more - Devember 31, 2008
I found this tutorial useful, but I think your numbers are off. Non of my shapes matched up when I used your exact numbers, and my main box color was way off as well.
[...] Alleba Blog wrote an interesting post today onHere's a quick excerpt In this photoshop tutorial you will create a green sleek content box perfect for gaming related websites. (more…) [...]
Select all layers in layer palette. Press Ctrl+G to group. Our christmas bells are done. Now we will create a content box and decorate it with the bells.
Using flash for a html editor you can add a scrollable frame inside the content box to allow you to place more text.
Thanks, really nice, learnt a lot. I was wondering how custom wp templates were designed. You gave me a lot of ideas. Photoshop is powerful, but I need to feed my imagination with well crafted tutorials, like yours. thanks again for sharing
In this lesson, you will see how to create simple fresh web 2.0 style content box. You can use this web content box for every web sites. You will also learn how to apply some icon on content box, how to use Rectangular Marquee tool, to create some selection and more. Step 1 Create a new Photoshop document and for background color set #F8F8F2. For this tutorial, I will use 300x271px dimension. For Foreground color set white and using the Rounded Rectangle Tool, create a selection for the content box. See the picture below. We will embelish a little our content box by adding: Outer glow Stroke Our content box now looks like this: Step 2 Now, it's time for content box header. Press and hold down Ctrl key and click on the content box layer to select it. Step 3 Using the Rectangular Marquee tool, drag it from the bottom to the top of content box, to delete the part of selection (subtrackt), to only remain the part of selection on the top, for heading. See the picture below. While the selection for heading is still active, choose Select - Modify - Contract. After that, create a new layer, select it and fill the selection for header with #86C620. See the picture below. Step 4 Add a mild gradient on our selection ( reduce its opacity) and a little shadow to down. See the picture below. Step 5 Now, we will add a icon and header. Step 6 Find some appropriate icon somewhere. Decrrease the icon and place it on the top and type a header. I have used Gill Sans font, size 25px. On the icon and text add a white stroke of 2px. See the picture below. Step 7 Now, it's time to add a gradient on our content box shape. So, select that layer and add the following gradient. Only one thing that you must to do, is to cut your content box and insert it into the your xhtml/css layout. Enjoy!
In this tutorial I will teach you how to make a stylish web 2.0 content box. Perfect for your website design. We will use some layer styles, marquee tools�etc
Let's start out by creating a new file. I used a 500x400 pixels canvas set at 72dpi, and I filled my background with a black color. Now create a new layer set and name it 'Metallic Content Box'. In a new layer draw a rectangle with 255�201 px dimensions and #4D4D4D color shade.
This photohop tutorial will teach you how to make a free website content box or an image icon such that you can be used a posting review button on the site.
Title: Create a framed content box for a website template Description: This photoshop tutorial website has free lesson or instructions to draw or design a rectangular content box for free website template.Adobe skills for beginners ? how to make a content box ? website graphics tutorial
Create a Website sale content box,latest photoshop features , Adobe photoshop cs2 tips, technique Easy photoshop, tutorials for beginners,Photoshop Web Template - Web Site Design Tutorial �
Right click on your layer and click blending options and add the settings below.
Step1: Setting up the workspace. Create a new image 800 x 600, and set the background color to white. Create a new layer, Layer New Layer... (Shift+Ctrl+N). Click on the Rounded Rectangle tool , using the dimension below
Start off with a New Document with the size of 200X250
Step 1: New Document
1. Begin with a new file, 300�250, with #666666 as your background color. Then create a new layer in the layers palette.
2. Now take the Rounded Rectangle Tool and create a similar shape to the one below, fill the shape with #444444. (Click for larger view)
2. Create a new layer, then go to Select>Modify>Contract and set the Contract By 2 pixels. Now set the foreground color to black and then go to Edit>Stroke and set the width to 1 px and Location Center. Then go back to layer 1 and right click on it, choose Blending Options and then apply this settings.
This is the main template:
1. Begin with a new file, 400�400. Then create a new layer in the layers palette and then take the Polygonal Lasso Tool and try to draw a shape similar to the one below.
2. Now take the Rounded Rectangle Tool and create a shape similar to the image below.
How to make a Website-scroll-content-box in photoshop.
Let's start.
Hello & welcome to the tutorial!
Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.
Double click the layer to open layer style window. Apply settings as shown.
