Summary:

Portfolio Page Background - Make a Background in Photoshop that Looks Dignified and Professional for your Portfolio

    ● Download and install Fonts and Brushes in Photoshop.


Learn About:

Crop Tool Brushes in Photoshop Drop Shadow Effects

  •  This tutorial is part of the Fan-Tastic and Home Sweet Home Portfolio Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.

                            background cool

Step #1: Open Photoshop ~

Find an image you can use in your project and open it in Photoshop:

    ●   If you are working on the Fan-Tastic Project open an image of your celebrity, musician, or star ...


● If you are working on the "Home Sweet Home" Portfolio Project find a picture of yourself in professional dress clothes looking good ...




… (Remember: all these tutorials are intended to be applied to YOUR PROJECT)


Step #2: Feathering ~

Get the Lasso Tool or hit the keyboard shortcut letter (L) …

lasso

… and go to the Menu Bar and set the Feather to 25 or whatever (it may take a few trys to find the right setting.)

feather


Step #3: Lasso Tool ~

Drag the Lasso around your image.


Step #4: Delete ~

Then hit the keyboard shortcut: Cmd(⌘)+Shift+i or go to: Select > Inverse

… then hit Delete.


Step #5: Eraser Tool ~

You can't get everything this way, however.

Eventually, you will have to get the Eraser Tool by hitting the keyboard shortcut letter (e) …

… and then click the Brush Preset Picker on the menu bar.

Select a soft, fuzzy-edged brush …

… and clean up your picture.


Step #6: Do a Good Job! ~

Get the Zoom Tool by hitting the keyboard shortcut letter (z) …

… and gently refine the edges with the soft-edged eraser.


Eliminate the ragged edges.

bad

Do a good job here …

good job



Step #7: Open ANOTHER New Blank Document in Photoshop ~

Open a new document 1200 X 1000 pixels, the approximate size of the background for your website.

1024 x 768

When you get them both open in Photoshop, go to: Window > Arrange > 2-up Vertical

… and drag your image onto the new blank document using the Move Tool .


Use the keyboard shortcut: Cmd (⌘) +T to rotate, shrink or enlarge the picture and make it fit.


Step #8: Fill your Background with Color ~

Find a background color swatch you may have downloaded from this tutorial, double-click on the Foreground Color in Photoshop …

… and paste the HEX number for your background color.


OR - hit the keyboard shortcut letters: Alt (⌥) +Backspace to fill with the foreground color you chose.


Step #9: Levels ~

Hit the keyboard shortcut: Cmd(⌘)+L and adjust the sliders …

… until you get a deep, rich color contrast.


Step #10: Drop Shadow Layer Style ~

Click on the fx at the bottom of the Layers Palette …

layer style

… add Drop Shadow and adjust the angle of the shadow.


Step #11: Outer Glow ~

Then go to: Layer > Layer Style > Outer Glow


… increase the size of the glow also.

 

 

 

You don't have to use these settings exactly!

 

 

They are just guidelines.

 

 

Try everything and decide for yourself!

 


Step #12: New Layer ~

Make a new layer and lock the others …

… grab the new layer and drag it between the picture and the background.


Step #13: Brushes ~

Click the Brush Tool or hit the keybord shortcut letter (B) …

… click the Brush Preset Picker in the Menu Bar …

… click on the little image in the upper right and click on image

… and hit Append.

image


Or try http://www.brusheezy.com/brushes/1363-suddenly-spring-photoshop-brushes -

download and install the ones you want.



Step #14: Paint with the New Brush ~

Find a nice brush you like, set your colors, and paint behind your picture:


There are many brushes and many options! Use your imagination!


Step #15: More Brushes ~

Make another new layer, switch to a 3rd selection from your color scheme, select ANOTHER different brush pattern that looks interesting …

… only this time, try lowering the opacity of the brush a little …

… and paste it on the new layer with a different color.

brush

Keep Going! These are just suggestions! Ultimately it's up to you to take a risk and be creative on your own. Experiment! Try different things.


Step #16: Erase the Lines Slightly ~

Get the Eraser Tool or hit the keyboard shortcut letter (E) …

… select a soft-edged brush for the eraser …

soft brush

… lower the opacity of the eraser a little …

… and brush around the outside of the shapes to give them a slightly transparent look.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

The purpose of this is to create a more blended feel to the shape.


Step #17: Layer Effects ~

Click on the at the bottom of the Layers Palette …

… add some effects to the swrils.


Step #18: Keep Going!

Make More New Layers - find a different brush you like, set your color to to something that matches your work and paint again.

example 3

 

 

Remember to keep everything separated on it's own layer.

 

 

Layers allows you to apply effect to each object individually and rotate them.

 

Step #19: Web Pages ~

If you are saving a background for your webpage, go to: File > Save for Web … and save it as a .jpg

Lower the quality of the image until the size is below 100 kilobytes, on average.


Backgrounds for websites should be as small as possible. They must be downloaded every time your viewers open your pages so it's important to keep it as small as possible so they load quickly.


Step #20: Root Folder ~

Hit

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

and put the file in the root folder of your project …


Step #21: Open your body Tag in CSS~

ONLY IF YOU ARE CREATING A BACKGROUND FOR YOUR WEBSITE, save it specifically in the Root Folder of your project. Otherwise skip to the last step.

Open the CSS Styles panel (if necessary) by going to: Window > CSS Styles and Double-Click the body tag:

body tag

Select Background and attach the image …


Last Step: Save and Upload your Work ~

If you have a web server, save your pages, upload them and attach the link to your site …

upload-site-dw.png


Other Resources: http://css-tricks.com/perfect-full-page-background-image/ and http://www.alistapart.com/articles/supersize-that-background-please/