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 horizontal gradient image
  More Photoshop Creative Suite, Photography ... 

  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: 4      Rate this article   36 
 27 Jun 2011

Designing horizontal gradient image

 







Step 1: create an image
Select "file/new" and set the width you have chosen for the new image and about 5 pixels for the height and set the background as transparent. For an 800 resolution page make the image 760 pixels wide to allow for the scroll bars on the browser and for a 1024 resolution make the image 984 pixels wide.

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:

Designing gradient images for buttons, sub headers, etc.

New Year 2012 elements – for graphic designers

Applying vertical gradient background image to a web page

Designing vertical gradient background image

Photoshop: How to Design Feathered Edges on an Image

Applying horizontal gradient background image to a web page

Gradient background – Photoshop tutorials on softfern.com

 
    
 Rate this article from 1 to 5 

     
             
              
        Add comment
Your name:
Your comment:
                      
 Tags: SoftFern Tutorials, SoftFern free Tutorials and Article, SoftFern Photoshop Suite Tutorials, Gradient editor, Gradient, marquee, Designing horizontal gradient
   More Photoshop Creative Suite, Photography ...
 


  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