Jump to content

Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Toggle shoutbox Shoutbox Open the Shoutbox in a popup

@  yordan : (21 April 2014 - 09:11 PM) Hey, Ritesh, Did You Hear Me?
@  yordan : (14 April 2014 - 05:28 PM) By The Way, This Could Be An Interesting Subject For A Topic, What About Posting This Question? Let's See If Other People Have The Same Feeling Concerning Bootlists!
@  yordan : (13 April 2014 - 09:36 AM) Boot Order : Cd, [Usb,] Hard Drive :D
@  yordan : (11 April 2014 - 07:23 PM) I Simply Let The Bios Do That
@  Ritesh : (11 April 2014 - 10:23 AM) Is It Possible To Launch Fedora Live Cd Or Installation Disk From Hard Drive On Windows Platform Using Grub Mbr File.
@  Ritesh : (11 April 2014 - 10:21 AM) No U Are Not.. Btw.. I Have Question For You.
@  yordan : (10 April 2014 - 08:02 AM) You Are Partially Right.
I Was Not.
Nevertheless, I Am Again :)
@  Ritesh : (09 April 2014 - 07:33 PM) :P
@  Ritesh : (09 April 2014 - 07:33 PM) I Think U R Not..
@  yordan : (09 April 2014 - 09:28 AM) I'm The Master Of The Shoutbox!
@  yordan : (05 April 2014 - 10:32 PM) He-He
@  Ritesh : (04 April 2014 - 06:59 PM) Ha Ha Ha ....
@  yordan : (04 April 2014 - 11:15 AM) Welcome Back, Starscream!
@  yordan : (03 April 2014 - 02:31 PM) And I Hope That He Will Come Back Soon :)
@  yordan : (01 April 2014 - 02:53 PM) Nice, Ritesh Came, I'm Not Home Alone Today.
@  Ritesh : (01 April 2014 - 08:51 AM) Oh!!! Poor Dear Yordan..
@  yordan : (31 March 2014 - 10:02 AM) I'm A Poor Lonesome Cow-Boy
@  yordan : (27 March 2014 - 02:22 PM) He Is Unpatient Due To His Patients!
@  Ritesh : (27 March 2014 - 10:46 AM) :(
@  Ritesh : (27 March 2014 - 10:46 AM) He Is Busy With His Patients.

- - - - -

Photoshop 7.0 Wdc: Feature Area Photoshop 7.0 Web Design Component: Feature Area

3 replies to this topic

#1 Mr. Matt

Mr. Matt

    Newbie [ Level 2 ]

  • Members
  • 13 posts
  • Gender:Male
  • Location:Arizona

Posted 24 March 2008 - 03:38 PM

Web design is a highly competitive profession when you have thousands, if not, millions of other professional web designs to rank up with. This small tutorial will attempt to draw out the simplicity of designing web components for a specific page. We will be creating a simple feature area box that conveys a clean, but professional impression. It is assumed that Adobe Photoshop 7.0 is the image manipulation software being used and that the user understands the basic functions and menu navigation of this application.

[Creating The Container]
Start out by creating a new 500px by 250px document using 72 pixels/inch in RGB Color mode whose Contents are set to White. If you wish, give it a title. This will start you off with a blank document using a white background. From here, use the Rounded Rectangle Tool (U) with a Radius of anywhere from 5 to 7 and draw a rectangle on your blank document. The default foreground and background colors ought to be white and black respectively; for now, you will want the color of your rounded corner rectangle to be solid white. Once you've drawn the rectangle, right-click on the rectangle's layer in the Layers panel and Rasterize the layer. Rename this Layer to Container Double-click the layer (or right-click and select Blending Options).

[Applying Container Styles]
Apply a Stroke to the selected Layer that is 1px in size and set the color to #EEEEEE or #CCCCCC (depending on how much you wish to keep the border visible). Click OK to apply the Stroke. Back over in the Layer panel, press and hold CTL on your keyboard while clicking on the layer's preview icon to make a selection using the Layer's shape. You should see dotted lines on your document indicating that the selected Layer has now been made an active selection. Under the Select menu, expand the Modify sub-menu and select Contract. Contract by 2px and hit OK to apply the new active selection 2px smaller than the original selection.

Over in Tools, click the Gradient Tool (G), set the gradient type to Linear Gradient, the Foreground color to what you specified earlier as the Stroke color (your current border) and set the Background color to White. Fill the currently active selection with a vertical gradient starting from the top to about 30% down the selection. Pressing and holding the shift key while applying while help guide your linear gradient. Do not deselect the currently active selection just yet as the following steps can be done while the Container layer (-2px contracted size) is still selected.

Create a New Layer on top of the Container layer, setting its Blending mode to Multiply. Specify a Radial Gradient using the same Foreground and Background settings. Create a Radial Gradient in the bottom right-hand corner of the currently active selection on the New Layer. Once this is done, you can press CTL + D to deselect the active Container selection. Rename this New Layer to Corner. If you set the Stroke Layer to #CCCCCC or a darker shade of gray, you may find that the border on Container is a little darker than you need. You can go back into its Blending Options and specify #EEEEEE as the new Stroke color on the Container layer to balance the contrast better.

Create a New Layer under the Container Layer and use the Brush tool of about 3 - 4px with the Foreground set to a shade of dark gray (or black) from #000000 to #555555. Zoom into the bottom right-hand corner of the Container Layer and carefully brush a shadow underneath the bottom right-hand corner. This will help to create a "peel" effect. Zoom back out to the document's Actual Size to see the overall effect.

Here you've created a nice-looking container on top of which you can add text, images or other feature related content. This will be added as a subsequent post as Part 2 as we explain how to keep your feature area looking clean and professional.

Posted Image

Edited by Mr. Matt, 24 March 2008 - 06:36 PM.

#2 Mr. Matt

Mr. Matt

    Newbie [ Level 2 ]

  • Members
  • 13 posts
  • Gender:Male
  • Location:Arizona

Posted 24 March 2008 - 06:31 PM

A Better Container Corner Shadow (Part 1a)

The Brush Tool method for creating a shadow underlying the Container Layer might take a few tries. The method I'm about to illustrate here is a bit more uniform and will replace the "peel" effect layer completely (hence, we'll need to start out by deleting that layer and creating a New Layer in its place underneath the Container Layer).

CTL+Click the Container Layer to make an active selection with it. Click on the Rectangular Marquee Tool (M) and tap the down and right arrow keys both four (4) times. This will nudge the active selection 4px down and 4px right. On the new "peel" effect layer that was previously the shadow we created using the Brush Tool, create a Radial Gradient using the same gradient settings as before. Or you may use Black and set the layer's transparency to 50%.

Rename this layer to Corner Shadow for future reference if we need to make changes to it.

Posted Image

Edited by Mr. Matt, 24 March 2008 - 06:50 PM.

#3 Mr. Matt

Mr. Matt

    Newbie [ Level 2 ]

  • Members
  • 13 posts
  • Gender:Male
  • Location:Arizona

Posted 24 March 2008 - 09:04 PM

Adding Content (Part 2)

Using the same Photoshop document, you can preserve the style of this new feature area by applying some Blending Options to a small rectangular image. I've used a cropped image measuring 75px width by 75px height in size. Apply an Inner Glow using a Normal Blend Mode. Set the Inner Glow's opacity to 100% and the color to solid white (#FFFFFF). Set the Technique element to Precise and leave the Source as Edge. The size should match the number of pixels contracted used in the original Container selection (in this example, 2px). Applying this Inner Glow will create for us an inner white border about 2px thick.

We also want to apply a Stroke of 1px positioned on the Outside using a slightly darker shade of gray than what we used for the Container's Stroke border (e.g. #CCCCCC). Hit OK to apply changes made to the image.

Add some text and formatting. You could also divide the feature area with two horizontal lines one on top of the other using the same color scheme of grays to match the Container's border. You can also create bullets to match your styles or color scheme by using the Elliptical Marquee Tool (M) and filling a small bullet with the same color as one of your header titles. Apply to each bullet (or a single one to duplicate) a solid White Inner Shadow with a Normal Blend Mode at 100% opacity. You can fine tune the bullet's style by adjusting the Distance and Size values (I've used 2px for each, leaving the Choke set to 25%).

Experiment with different fonts, colors and of course Layer styles to enhance the overall appearance of your new feature area. Drop this little widget on an HTML page and you're set to go!

Posted Image

Edited by Mr. Matt, 24 March 2008 - 09:22 PM.

#4 skedad


    Premium Member

  • [HOSTED]
  • 318 posts
  • Gender:Male
  • Location:North Carolina, United States
  • Interests:I enjoy spending time with my family and friends. I plan to upgrade my current webpage and have a lot of fun in the process!<br /><br />My astahost provided site is more personal and family oriented than it being a business site... Maybe I will have a professional sometime down the line...<br /><br />- skedad -
  • myCENTs:39.31

Posted 24 March 2008 - 09:35 PM

They all seem to be very good ideas. I basically do my containers and image backings on the fly. I will always be updating my sites and reconstructing til I die! But I do think that the idea is good, and it is a good start to creating background templates. I use a lot of fade gradient feel backings, and I try to keep it simple... well, at least at the start.

Reply to this topic


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users