1 CREATING  A  BANNER  IN  PHOTOSHOP  

 This  tutorial  will  take  you  through  how  to  create  your  own  basic  banner  in  Photoshop.  We  will  go:    A.      Creating  a  background      1.      Launch  (Open)  Photoshop  CS5  –  The  interface  of  the  workspace  may  vary  slightly  depending  of  the  version  of  Photoshop  you  are  using.      2.      Click  on  File  in  the  Application  Bar  -­‐  New.  A  window  will  open.           Enter  the  dimensions  of  the  graphic  in  the  Width  and  Height  fields.  Make  sure  you  have  the  right  Resolution,  Color  Mode,  Color  Profile  and  Pixel  Aspect  Ratio  and  then  click  OK.                                                3.    An  OK  opens  as  workspace  similar  to  the  image  below.                                                  Notice  that  the  document  bar  indicates  an  image  size  of  66.7%,  if  you  want  to  see  the  full  size,  click  on  the  Zoom  Tool    and  click    on    the  Workspace  till  you  see  100%  in  the  document  bar.  

2 1.  Next  you  want  to  save  the  document  first  as  a  .psd  file  (Photoshop  document),  by  doing  the  

following:  a. Click  on  File  in  the  Application  Bar,    b. Choose  Save  As  and  save  it  in  the  root  folder  of  your  defined  site  in  Dreamweaver  as  

illustrated  in  this  image.      

 

 

 

 

 

 

 

 

 

 

 

 

 

 

File  format  is  Photoshop      Note:  The  .psd  file  format  is  editable  and  is  considered  the  raw  editable  file  of  your  banner  or  logo.    

 2. Next  you  want  to  pay  attention  to  your  layers  panel,  Being  able  to  working  with  panels  in  

Photoshop  is  key  to  creating  graphics  successfully.      A  look  to  the  left  of  our  Photoshop  Workspace  reveals  the  Layers  Panel.  If  the  Panel  is  not  available.  You  may  make  it  visible  by  showing  it  in  the  workspace.    

3. To  do  this,  click  on  the  Windows  Tool  in  the  Application  Bar  4. Choose  Layers  in  the  options  of  the  drop  down  menu.      

 

 

 

 

 

 

 

     

3 5. Usually  it  is  a  good  practice  to  Double  click  on    the  lock  of  the  background  layer  to  unlock  it.  By  

unlocking  it,  it  becomes  more  flexible  and  responsive  to  your  creative  ideas  or  options.      

                   

When  you  double  click  the  lock,  you  will  see  the  above  dialog  box.  Type  in  the  name  of  the  layer  and  click  OK.  

6. 5.      Double  click  on  the  color  selection  tool  and  select  a  color  that  will  become  the  background  of  your  banner    (if  you  do  not  want  the  white  background  color  or  whatever  the  default  color  is).  Click  OK.  The  Color  will  appear  here  after  you  click  OK.  See  picture  below.    

Color  selection  Tool   Gradient  and  Paint  Bucket  

   

 

Note:  Photoshop  displays  2  colors  at  a  time.  The  one  on  top  (green)  is  the  foreground  color  and  the  one  below  in  the  background  color.    A  click  on  the  color  selection  tool  opens  a  palette  similar  to  the  image  below.    

Note:  The  Paint  bucket  Tool  is  used  to  do  a  quick  color  fill.  The  Paint  Bucket  Tool  alternates  with  the  Gradient  Tool.  Click  and  hold  the  mouse  to  see  other  options.  This  works  the  same  with  all  the  other  tools  in  Photoshop.    

 

                 

4        1. You  can  either  fill  you  graphic  with  color  or  a  pattern  using  the  Fill  options  under  the  Edit  Tool  in  the  

Application  bar.  Click  on  Edit  in  the  application  bar  and  choose  Fill  option.  A  Dialog  box  pops  up.  With  Content  and  Blending  Options  as  indicated  in  the  image  below.  

                       2.  Click  on  the  Use  field  in  under  the  Content  option  and  choose  what  you  want  to  fill  the  Layer  with.  

a. The  options  available  under  Use  are;  Foreground  and  Background  colors,  Colors  and  Patterns.  There  are  other  options  but  these  are  probably  the  ones  you  will  need  to  use.  Choose  a  Color  or  pattern  for  your  design.  Depending  on  what  you  chose  you  will  either  have  a  color  or  a  pattern  fill  as  shown  in  the  image  below.    

     A  pattern  fill     A  color  fill    

     

         Make  sure  you  continue  to  save  your  work.  Use  the  save  option  available  under  the  File  Tool  on  the  Application  Bar.        

5

   3. Add  text  to  your  banner.    Click  on  the  text  tool  in  the  Photoshop  Toolbar.    

   

a. Notice  the  text  tool  options  that  appear  at  the  top  similar  to  the  image  below.  

 

       

b. Change  font  format  by  changing  the  Font  style,  size,  color  in  the  Text  Options.  By  default,  the  font  color  is  the  foreground  color  in  your  color  pallet.  So  make  sure  you  change  it  using  the  font  options  at  the  top.        

4. Type  in  your  text,  when  done,  you  may  have  to  commit  the  changes  by  clicking  on  the  check  sign  in  the  Text  Tool.  

 

   

   You  can  use  the  move  tool  to  move  the  text  to  the  desired  position.  You  can  always  change  the  font  style  and  size  by  selecting  the  text  layer  and  changing  the  options  in  the  Text  Tool  options.          

6

 The  completed  logo  may  look  like  this  with  text  well  positioned  based  on  your  creative  preference.        

       Save  your  work  by  clicking  on  File  on  the  Application  Bar:    

1. Choose  Save  for  Web  and  devices    2. And  save  it  in  the  desired  file  extension  in  the  images  folder,  or  the  root  

folder  of  your  site.    3. In  Photoshop  your  options  are  to  use  .jpg,  .gif,  or  .png  (24)  or  .png(8)  file  

extensions.    i.  JPG  and  PNG  (24)  are  for  Polychrome  (many  colors)  images  and  

graphics,  and  GIF  and  PNG  (8)  are  for  Monochrome  (few  colors)  images  or  graphics.