Our services: SOFTWARE DEVELOPMENT,  WEB DEVELOPMENT, DATABASE DESIGN and ADMINISTRATION, ENHANCEMENT of EXISTING SOFTWARE, ENHANCEMENT of EXISTING WEB SITES, ENHANCEMENT of EXISTING DATABASE, GRAPHIC DESIGN – LOGOS, BANNERS, ICONS…, PHOTOGRAPHY: SHOOTING PHOTOS, IMPROVING AND RETOUCHING, VIDEO PRODUCTION: RECORDING VIDEOS, CREATE MOVIES, PUBLISHING, SEO – SEARCH ENGINES OPTIMISATION, SOCIAL NETWORKS – POSTS ON TWITTER, GOOGLE+, FACEBOOK, LINKEDIN.

           Search  Search  

Designing vertical gradient background image
  More Misc tutorials ... 

  SoftFern.com on Twitter   SoftFern.com on YouTube   SoftFern.com on flickr   SoftFern.com on Pinterest
SoftFern.com on Facebook   SoftFern.com on Google+   SoftFern.com on Tumblr   SoftFern.com on LinkedIn



Our services: SOFTWARE DEVELOPMENT,  WEB DEVELOPMENT, DATABASE DESIGN and ADMINISTRATION, ENHANCEMENT of EXISTING SOFTWARE, ENHANCEMENT of EXISTING WEB SITES, ENHANCEMENT of EXISTING DATABASE, GRAPHIC DESIGN – LOGOS, BANNERS, ICONS…, PHOTOGRAPHY: SHOOTING PHOTOS, IMPROVING AND RETOUCHING, VIDEO PRODUCTION: RECORDING VIDEOS, CREATE MOVIES, PUBLISHING, SEO – SEARCH ENGINES OPTIMISATION, SOCIAL NETWORKS – POSTS ON TWITTER, GOOGLE+, FACEBOOK, LINKEDIN.


Free wallpapers of the hottest girls of the 2014 Winter Olympics

Complete guide for Euro 2012’, about 300 hundred pages filled with comprehensive information about Euro 2012


Euro 12 - teams, managers, players, fixtures, referees, the brand new ‘Tango 12’ Adidas ball and much, much more. Few hundreds amazing photos.


E-books, free e-books, Euro 2012 e-books


Auckland events in photos at bonanz.com


1 500 photos of fun-run 'Ports of Auckland Round the Bays 2012' at bonanz.com


Ocean swim - more than 1 500 photos of State King of the Bays

 

SoftFern.com Forums BonaNZ.com forums

SoftFern.com Forums - articles, news, links 

 

BonaNZ.com Forums - articles, news, links 


Photos of State King of the Bays event at bonanz.com


‘Complete guide for Euro 2012’: Given profile all 368 footballers with their photos.
 
 


‘Complete guide for Euro 2012’: Read about star players of each squad. Find out who is the key player of each team. What Pele expects of Euro 2012?



‘Complete guide for Euro 2012’: Compare annual salary of coaches participating in the Euro-2012 - and how it happened that the team of the most paid coach finished the last in their group?




‘Complete guide for Euro 2012’: Euro 2012 footballers: who are the most expensive players? Who are the Rising stars at Euro 2012?



E-books, free e-books, Euro 2012 e-books
 
  
 Popularity 
 Rating: 2.9      Rate this article   40 
 27 Jun 2011

Designing vertical gradient background image

 







First of all, why you would bother with creating gradient images for web pages? Well it’s quite important to create and use subtle and eye-catchy color combinations and transitions to achieve modern and stylish effect for your web site.

Step 1: create an image
Select "file/new" and set the width and height for new image. In the most cases width set to 1 px. Height may vary depending on how you going to apply the background image to a web page. E.g. web page where this tutorial loaded, has background gradient image with 1 px wide and 596 px height.

Step 2: set colours
Now you need to decide on the colours. Depending of the font colour of your web page. Ensure that your text is visible on the both sides – the darkest shade and on the lightest part of the background.


Step 3: select the image
Select the image with the rectangular marquee tool

Step 4: activate gradient tool
Click on the gradient tool .

Step 5: open ‘Gradient editor’
click on the gradient tool to open ‘Gradient editor’. The colours loaded into ‘Gradient editor’ are determined by the colours you have selected for background and foreground.

Step 6: work with ‘Gradient editor’
Choose different colours for background and foreground and watch how the gradient changed. Remember about visibility of the text on web page on a dark background and on a light one.
Gradient options window has various options for setting the gradient. You can test various settings to get the desired result.
 

Step 7: fill the image
Place the pointer/cursor inside the image in left corner and drag to the right and the fill should now be applied to your image. If it doesn't work make sure the options window is still active and do it again.
 

Step 8: save the image
Now save your image. Please note: Sometimes, if you view the background on different computers or browsers you will see the different colours separated. This is called banding. A .gif image is limited to 256 colours. So for .gif images it is recommended to select dithering, which will prevent banding. If you choose to save the image as a .jpg, select millions of colours instead of thousands. If your background is still banded try adding a tiny bit of noise to the image.




Step 1: create an image




Step 3: select the image




Step 4: activate gradient tool




Step 5: open ‘Gradient editor’




Step 6: work with ‘Gradient editor’ Choose different colours for background and foreground and watch how the gradient changed. Remember about visibility of the text on web page on a dark background and on a light one.




Step 7: fill the image




Step 7: fill the image




Step 8: save the image




Step 8: save the image


Other SoftFern tutorials, related to Gradients in Photoshop


  
  More similar links:

New Year 2012 elements – for graphic designers

Applying gradient background image to a table cell

Photoshop: How to Design Feathered Edges on an Image

Designing horizontal gradient image

Designing gradient images for buttons, sub headers, etc.

Designing vertical gradient background image

Animated images – New Year 2012.

 
    
 Rate this article from 1 to 5 

      Comments
             
 

14.04.2012    Ali

spellbound_spiritMay 28, 2011This is what I do. I press CTRL + T (On a Mac it would be Apple + T). That is Free Transform. To make it smaller now, you drag your mouse to one of the ronrecs and you hold SHIFT. Now just adjust the picture to your likin

              
        Add comment
Your name:
Your comment:
                      
 Tags: SoftFern Tutorials, SoftFern free Tutorials and Article, SoftFern Photoshop Suite Tutorials, background, Photoshop, gradient images, Gradients
   More Misc tutorials ...
 


  Home page Weird We sell Programming Windows
  News Our Photos Photoshop and Photography SQL server Microsoft Office
  Tech News Our Portfolio iPad Misc Web sites development
  Videos Archive Androids Graphic design Software development
  Auckland and New Zealand About Us Tablet PCs CD/DVD presentation Play games online
  Football Contact us Round the Bays 2012 photos Ocean Swim 2012 photos Auckland Events
  Sport Our Portfolio Stock Images Stock Photos Links Exchange
  Hot Girls Our clients On Twitter Add link Site Map
  Our Twitters’ gadget Site Map Google+ Site Grid Poklonskaya.info
  Health and Beauty Site Grid Pinterest Natalia Poklonskaya.info Soft Fern forums
  Misc News Web pages Facebook Photos, images Hair & Beauty
  On YouTube CD/DVD presentaton Tumblr Daily Motion Flickr
  YouTube - 2 Graphics LinkedIn Live Journal Stumble Upon
  Vimeo - videos Tutorials - Videos Tutorials - Weird Most Popular on Internet Yahts, boats, Tall Ships

SoftFern (New Zealand LTD). 
Design and development by SoftFern 2003 - 2014 Graphics supplied by BonaNZ.com