• home
  • forum
  • my
  • kt
  • download
  • Making your own portfolio web page

    Author: 2008-06-04 15:10:01 From:

    Need personal web page? In this tutorial we will learn to create nice personal portfolio web page.

    Start working by creating a new file (File>New), having 770x750 px and 72 dpi. We shall use on this new made file the Rectangle Tool (U) to represent the background of the site抯 page to be.

    Making your own portfolio web page in Photoshop CS3

    Set the next parameters for this layer by making a mouse click on the layer we work with on the layers?panel: Blending Options>Gradient Overlay

    Making your own portfolio web page in Photoshop CS3

    Gradient抯 parameters:

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Choose again the Rectangle Tool (U) to represent that place reserved for the author抯 portrait and the lateral menu. Firstly we have to represent the common primary layer and then press Alt button to divide the zones, applying the same tool, used before.

    Making your own portfolio web page in Photoshop CS3

    The layer抯 parameters: Blending Options>Inner Glow

    Making your own portfolio web page in Photoshop CS3

    Take now the site抯 author抯 photo and insert it on the picture. Don抰 forget to apply Free Transform option to place the photo the same way indicated next image:

    Making your own portfolio web page in Photoshop CS3

    Press Alt button and make a mouse click between the photo抯 layers and the prepared zone (on the layers?panel) for the photo to get in the frame抯 limits. Create also the lateral menu.

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Next make a click on the bottom part of the layers?panel on Create new fill or adjustment layer> Photo Filter

    Making your own portfolio web page in Photoshop CS3 


    Making your own portfolio web page in Photoshop CS3

    Download out of Internet a set of ready to use brushes for Adobe Photoshop, named Bush Pack v1.
    Create after that a new layer (Create new layer) and use on it the brushes out of the above mentioned set. Place the brushes?layer lower than the author抯 photo (on the layers?panel). The brushes?color is white and the Opacity on the layer is of 10%.

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    On the next layer (Create new layer) we抣l apply again the brushes out of the downloaded set. The brushes have the white color (Opacity of 20%). This layer should be placed also lower than the layer containing the site抯 author抯 photo.

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Download out of Internet another set of ready to use brushes for Adobe Photoshop, named this time Vector_brushes.
    Create a new layer where we should use the brushes out of the mentioned set, Vector_brushes. The brushes have the white color too. The brushes may be turned over with Free Transform selection. This layer should be placed also lower than the layer containing the author抯 photo (on the layers?panel).

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    On the next new layer we have to apply a standard brush of white color.

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3
    Create one more new layer (Create new layer), applying on it again the Vector_brushes. The brushes have white color (Fill 20%). This layer should be situated lower than the layer with the author抯 photo (on the layers?panel).

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Next step includes writing the title of the site, keeping the demands from the table below:

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    The parameters for the personal named layer: Blending Options>Outer Glow

    Making your own portfolio web page in Photoshop CS3

    Blending Options>Gradient Overlay

    Making your own portfolio web page in Photoshop CS3

    Gradient抯 parameters:

    Making your own portfolio web page in Photoshop CS3

    The parameters for the page named layer: Blending Options>Outer Glow

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3 
    Next choose the Rectangle Tool (U) to draw the button that will form the site抯 menu:

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    The layer抯 parameters: Blending Options>Gradient Overlay

    Making your own portfolio web page in Photoshop CS3

    Gradient抯 parameters:

    Making your own portfolio web page in Photoshop CS3

    Blending Options>Stroke

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Make a copy of the earlier made layer containing the menu抯 button and choose after that the Free Transform option to place the copy - layer exactly the way demonstrated below:

    Making your own portfolio web page in Photoshop CS3

    The parameters for the changed button: Blending Options>Inner Glow

    Making your own portfolio web page in Photoshop CS3

    Blending Options>Gradient Overlay

    Making your own portfolio web page in Photoshop CS3

    Gradient抯 parameters:

    Making your own portfolio web page in Photoshop CS3 
    Blending Options>Stroke

    Making your own portfolio web page in Photoshop CS3

    Gradient抯 parameters:

    Making your own portfolio web page in Photoshop CS3

    Make three copies of the changed button and select again Free Transform option to situate the copies the same way indicated next image:

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Using the Rectangle Tool (U), it抯 possible to draw above the button a white line, to get the same image from below:

    Making your own portfolio web page in Photoshop CS3

    Insert the titles for the site抯 menu抯 buttons, keeping the demands from the next tables:

    Making your own portfolio web page in Photoshop CS3

    home page

    Making your own portfolio web page in Photoshop CS3

    the titles for the rest of the menu抯 buttons:

    Making your own portfolio web page in Photoshop CS3

    The parameters for the home page named layer: Blending Options>Stroke

    Making your own portfolio web page in Photoshop CS3

    The parameters for the rest of the titles reserved for the menu抯 buttons: Blending Options>Stroke

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Create a new layer and try to represent on it a pointer situated on the left side of the menu抯 buttons?titles. In this case we must use the Pencil Tool (B) of white color (brush 1 px). The pointer near the home page title should be represented on a separate layer. The rest of them should be represented on a single one, near the rest of the buttons?titles:

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    We shall set the same parameters for the pointers as we did in case with the buttons?titles:

    Making your own portfolio web page in Photoshop CS3

    Next step includes choosing the Rectangle Tool (U) and representing the zone for the auxiliary buttons, having the color #36322D

    Making your own portfolio web page in Photoshop CS3

    Create a new layer on which we shall apply the earlier used instrument ?the Pencil Tool (B) (brush 1 px) for representing the icons of the auxiliary buttons. Their color is #998D7B

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Make a copy of the earlier made layer containing the photo of the site抯 author and choose Free Transform option to place the layer the same way demonstrated on the picture, changing the parameters for the copy ?layer. The color in this case is #2A251F

    Making your own portfolio web page in Photoshop CS3

    The layer抯 parameters: Blending Options>Inner Glow

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3
    Choosing the Rectangle Tool (U), try to create the layers reserved for introducing the titles of the sections and the lateral menus:

    Making your own portfolio web page in Photoshop CS3

    Insert the titles for the sections and for the lateral menus. The titles consist of two words, each of them situated on a separate layer:

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    We should set the same parameters for the first words of the titles: Blending Options>Gradient Overlay

    Making your own portfolio web page in Photoshop CS3

    Gradient抯 parameters:

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    It抯 time to write a welcome slogan for our personal page. The words welcome to should be written on a separate layer and the next words ?my page ?on another one:

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    For the last layers we shall apply the same parameters we have applied for the site抯 name:

    Making your own portfolio web page in Photoshop CS3

    Take now the Rectangle Tool (U) to represent the layers that will contain the photos of the site抯 author.

    Making your own portfolio web page in Photoshop CS3

    Set the same parameters for the new layers: Blending Options>Stroke

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Insert the corresponding photos. Each photo should be situated upper than the layer itself reserved for it (on the layers?panel). Press Alt button to make a mouse click between the photos?layers and the layer reserved for the photo for the last one to be applied in the layer抯 limits:

    Making your own portfolio web page in Photoshop CS3

    Make a copy of the filter抯 layer, applied five times for the photo of the author. Place the filter抯 copy ?layers above each photo (on the layers?panel). Press Alt button when making a mouse click between the filter抯 layers and the photo抯 layers for the filters to be applied in the limits of the photo抯 layers.

    Making your own portfolio web page in Photoshop CS3

    Create a new layer and use on it the Pencil Tool (B) (brush 1 px) to represent a kind of pattern like the next one, colored with #363331

    Making your own portfolio web page in Photoshop CS3

    Edit>Define Pattern
    Choose next step the Line Tool (U) to draw the scrolling, colored with #38322C

    Making your own portfolio web page in Photoshop CS3

    The layer抯 parameters: Blending Options>Stroke

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Select now the Rectangle Tool (U) to represent the mobile element of the scrolling, colored with #67584A

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Introduce now the rest of the text:

    Making your own portfolio web page in Photoshop CS3
    inscriptions on the section useful links

    Making your own portfolio web page in Photoshop CS3

    the links

    Making your own portfolio web page in Photoshop CS3

    data

    Making your own portfolio web page in Photoshop CS3

    the text of white color

    Making your own portfolio web page in Photoshop CS3

    the rest of the text

    Making your own portfolio web page in Photoshop CS3

    The inscriptions in the section useful links have the same parameters, shown below: Blending Options>Stroke

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    Create again a new layer (Create new layer) and insert the pointers near the links, choosing the same tool we抳e applied for drawing the same elements of the menu抯 buttons. The color in this case is white.

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3

    It抯 time to write the site抯 copyright, keeping the same demands introduced in the next table:

    Making your own portfolio web page in Photoshop CS3 

    Making your own portfolio web page in Photoshop CS3 

     

    The personal web site is finished!

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      Abstracts (88)
      Effects (463)
      Animation (135)
      Photo Effects (682)
      Automation (15)
      Photo Retouch (268)
      Basics (339)
      Photography (298)
      Brushes (44)
      Scripting (5)
      Buttons (177)
      Text Effects (676)
      Color (71)
      Textures and Patterns (167)
      Digital Art (141)
      Web Graphics (672)
      Drawing (731)
      Web Layouts (175)

    New

    Hot