ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Be Your Own Webdesigner! Create an Awesome Website Header with Adobe Photoshop Elements!

Updated on July 15, 2013

Having trouble making your own website header? Want a more polished look to it without the use of a web designer? Well you can achieve the look you want by using Adobe Photoshop. Tools from this program can do just about anything you want it to do. If you would like to achieve the look that can be found on Vacay Tips, here are a few tips to get you started.

First, start with a blank file (new page). Make sure you select your measurement in inches if that’s what you would like to work in. If you want the main background color to be something other than white select the color of choice and with the Paint Bucket Tool apply your color. Also, at the bottom left corner it will indicate the size of viewing. To increase or decrease this, highlight the number and by scrolling your mouse up or down you can adjust the size. Or if you prefer you can manually type in a number. This is helpful if you want to get a realistic view of sizing of the image.

Creating Main Shape

Your design may start with a base object that you want to build upon. You create this by:

  • Go to the Custom Shape Tool button.
  • Go to Shape at the top left and select a shape.

*Create shape how small or large you want it by holding down and spreading the object.

Creating a Texture for Object

You may want your object to have a certain textured look to it. This is created by:

  • With the Move Tool select the shape you just created.
  • Off to the right side is the Effects panel. Here you can select the pattern you want to add to your shape or text.
  • To apply textures either grab desired texture, drag it and drop it over shape or double click desired textured and it will automatically apply itself.

*All this is to be done while the shape you’re working with is selected.

Select a Background Image for Main Object

Perhaps you want your main object to be of an image and not just a shape. This can be used as a background for other images or shapes. This can be done by:

  • Find the image you want to use. In this instance I’m using suitcases.
  • Crop the image using the Cookie Cutter Tool
  • Select shape you want to use. (The dark portion of a shape represents where your image will be seen).
  • Drag cookie cutter shape until you achieve desired effect.
  • Apply a bordering color, shadow or any other effects, if desired.

*If you have the use of a scanner, you can scan that image in and work with it just the same; applying color, texture or shadow as well.

Taking an Image Out of a Picture

There are times when you see an image and only want a particular object out of the whole thing. There are two tools you can use for this:

  • Quick Selection Tool- Once selected, click and drag over an object to select the object you want to cut out. With this tool you can highlight a larger portion of the object you are cutting out.
  • Magic Wand Tool- Works the same except this tool selects at a more piece by piece method.

- Once your object is selected, under the Edit menu, copy and paste it to a new file if you would like to make changes to it such as resizing it, adding a texture or adding color to it.

*By adjusting the size of your image select the Move Tool and a border line should appear around the object. Grab border by the corners and drag inward. This will shrink image without messing up size ratios.

When done with last step, now you have to get your object in with the rest of what you started before.

  • Use the Layer menu off to the bottom right.
  • Right click layer and select Duplicate Layers (name layer if you’d like). This will give you a copy of the image over the image you just duplicated from. Select the Move Tool, click object to highlight image and move it to make sure it duplicated.
  • To apply the image in with the rest of your work that you had previously done, click it, drag it and drop it over the document you want it with.
  • Place it where you want it.

*For both tools, to add in or take out what you do or do not want to include use the + or – of either tool to do so.

Layering Objects

So far we have only been working with one object. If you choose to use another object in your image you can achieve a layered look that’s quite simple to do.

  • Right click on object. Next you will see selections for Bring to Front, Bring Forward, Send to Back or Send Backward. These are your controlling selections
  • Selecting Bring to Back or Front moves your selected object behind or in front of everything in front or behind it.
  • Selecting Send Backward or Forward moves the selected object behind or in front of other objects one by one until you get it in the desired position.

*If an object you want to get to is hidden behind other objects and you want to move it to the front continuously select Send Backward until the object you are looking for appears from behind them.

Adding a 3-D Appearance

To have an added effect of a 3-dimensional look it’s really quite simple.

  • Right click on the object and select Edit Layer Style. This will give you some selections to play with.

Selections for 3-D Effect

Lighting Angle- Positions where you want your lighting source to appear.

Drop Shadow- This is just how it sounds. It adds a shadow to your object.

  • Size- As this number increases the amount of shadow is more widespread around your image. The less this number is, the more concentrated or darker the shadow is. The more this number is, the more faded and thinned out it is.
  • Distance- This is how far from your object it is. This gives the effect of how far the sun is from an object.
  • Opacity- How light or dark your shadow is.

Glow- This gives the object an inner or outer glow.

  • Inner Glow- Gives the shape an inner glow that goes from the middle of your shape and outward. You can control how light or dark.
  • Outer Glow- This affects the outer edges of the shape if another color or shape is behind it. You can select how light or how dark it will be. You can also control how far or close to your object the glow is.

Bevel- This gives your shape a risen/puffed up look.

Stroke- Controls how thick or thin the bordering color is.

*You can control the color of each of these except for the Bevel effect.

Text

To apply the name of your website there’s lots of fonts and ways for your name to look for you to choose from.

  • Select the Horizontal Type Tool
  • The arrow now becomes a cursor. Place the cursor where you want to apply text.
  • Drag and create a outlined box.
  • Begin typing in what you want.
  • At top of page a menu is seen that you can use to change the way your text looks. Warping Text is always fun!

*If you need to change the font do so while under the Horizontal Type Tool button. Highlight text and then adjust it to the desired effect.

Editing Stage

Now you have your image the way you want it but you may see some things you want to change. Off to the bottom right you can use the Layers panel to individually select each object that you want to change. You can edit them just like normal changing color, texture, size or whatever you desire.

Saving Image As A JPG. File

When saving your work select Save and under Format pull down the menu and select from the options JPEG. This basically merges your layers to form a picture.

Things to Remember:

  • Don’t merge layers until you’re sure. If you choose to merge images you will no longer be able to individually select layers and change them. Merging is for turning all layers into one image.
  • Use of undo or redo only goes back so far.
  • The Move Tool is used to select items. It is not only used for moving things.
  • Play around and have fun!

With a certain amount of patience you too can create a header for your website that you can be proud of. Everything we used in this lesson is what was used to achieve the header for the website Vacay Tips. If the theme you are using allows you to use a jpg. file as your header then this is a very simple way for you to apply a well designed header to your website and get the look you want.

Comments

    0 of 8192 characters used
    Post Comment

    • Greensleeves Hubs profile image

      Greensleeves Hubs 

      20 months ago from Essex, UK

      This is an interesting and very well laid out article NiaG, and the instructions appear easy to follow. I hope to begin designing a website of my own in the near future - there are obviously many templates and web design services available today, but I will certainly look into the possibility of designing my own headers with Photoshop. Particularly, something I've never really got to grips with is the layering tool. I shall try to use your instructions to learn how to use this, whether for website header design, or just for more creativity in imaging. Alun

    • NiaG profile imageAUTHOR

      NiaG 

      4 years ago from Louisville, KY

      You're welcome, hope it helps.

    • denden mangubat profile image

      denden mangubat 

      4 years ago from liloan, cebu, philippines

      thanks for this i don't read some texts here so i'll just bookmarked this

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)