In this tutorial I will show you how to design a dark, simple but elegant, one page spaceship themed portfolio in photoshop. You decide whether it’s super-cool or not but I tend to think it’s rad.
Groovy, now don’t forget to download the .PSD file included at the bottom of the page!
Preview:
Let’s start off by creating a new document in Photoshop with the dimensions of 1100px by 820px.
Drag a guide and place it 138 pixels from the left and another 945 pixels from the right edge of your canvas, creating a centered layout which you will place your design elements.
Create the Background:
Using the Rectangle Tool (U), create a rectangle covering the whole document with the color of #181818. Add the “Extra Heavy Canvas” Pattern Overly in the layer properties menu.
Create the Header:
Make another rectangle at the very top of your canvas spanning the width of the document with a height of 25 pixels and a color of #4896CE. Copy the Layer style from the previous step and paste it into this layer.
Take the generic twitter bird from the internet, re-size it to approximately 29px by 17px, and place it on the top left of your header.
Using the Horizontal Type Tool (T), type a random twitter update. "Browsing the internets looking at design blogs." is what I wrote. Use the Character settings below.
565 pixels from the top of the canvas create another rectangle spanning the width with the same color, pasting the Pattern Overlay Layer Style on this also.
Your canvas should resemble the image below.
Create the Top Body Content:
Type your name in Helvetica, font size 35px, and place it on the right side of your design a few pixels left of your guide.
Next type your profession. Change the font size to 12px and horizontal scale to 112%. Move it down below your name and hugging the right guide you placed earlier.
Go ahead and use the Line Tool (U) with a color of #509ACF and create a 1 pixel line below your profession spanning the entire area between your guides. Create a highlight below your line by adding the Drop Shadow Layer Property shown below.
Duplicate the layer (Ctrl+J) and move it down 40 pixels.
Now we will make our tag-line in between the line shapes we just created.
With the same text settings used to create your profession, type something unique, witty, and showing confidence in yourself and your abilities. I chose to use "Hi, My name is Mark.I dream up designs in my sleep and code them into reality during the day." Use the Paragraph toolbar to Center the text.
Creating the Spaceship:
This is a rather simple spaceship made by using the Ellipse Tool. Create a circle, then Duplicate the shape a couple times (Ctrl+J). Using the Transform Tool (T) to re-size and stretch the ellipses to a few different sizes, then change their color and arrange the layers to create a spaceship looking object. Apply the Heavy Cavas Layer Property to these shapes also.
Create the Image Placeholders:
Take screen shots of your different pieces of your portfolio, crop and re-size them to 180px by 144px.
Apply the Stroke Layer Property creating a 7 pixel border with the color of #5BADE7 inside of the images.
Space the images out horizontally moving them so that they have equal space in between each other and about 25 pixels above the bottom blue footer background.
After you code and implement this design in XHTML and CSS, a great idea would be to use a lightbox plugin using jQuery or another JavaScript Library, making it truly a one page layout. This way the viewer and prospective employer won’t have to use the back button in their browser.
Select all of the shapes which comprise your spaceship, Move (V) and center it above your left image, and about 17 pixels below the bottom line you created for your tag-line.
Making the Spaceship Beam:
Create a New Layer.Now using the Lasso Tool (L) make a triangle selection coming out of your spaceship and covering the top of your image.
Take the Gradient Tool (G) (100% #FFFFFF on left, 0% #FFFFFF on right ) and drag from top to bottom creating a white to transparent gradient. Change the Opacity of the layer to 80%.
Duplicate your spaceship and gradient three times and move them so that there is one above each portfolio item picture.
Make the Skills Section:
Type "Skills" with a font size of 26px in Helvetica.
With the text set to Centered and Leading to 33px, list off your skills. Now change the font size of your text you’ve just created to 20 pixels. Arrange them so that they are center aligned, and centered below your portfolio images.
Under the center of the furthermost right image type "Download Resume", then change the paragraph alignment to left.
Create a line below Skills as we did before but with a color of #254b66 and a Drop shadow of #F6F6F6. Make smaller lines and place them below each skill you have listed.
Finish off the Footer:
Duplicate the first line you created above and place it about 22 pixels below the lines made for your skills.
Type "Copyright 2009" with a font size of 11 pixels. Make sure you get the copyright symbol in there too.
Make Faded Borders:
Lastly we are going to make the left and right borders faded so that the main content stands out.
Make a large rectangle on the left of your canvas 120 pixels wide and covering from top to bottom. Make sure the layer is on top of all of your layers with a color of #ffffff and an Opacity of 20%. Duplicate and align to the right side of your canvas.
Final Image:
Groovy, now don’t forget to download the .PSD file included at the bottom of the page!
Preview:
Let’s start off by creating a new document in Photoshop with the dimensions of 1100px by 820px.
Drag a guide and place it 138 pixels from the left and another 945 pixels from the right edge of your canvas, creating a centered layout which you will place your design elements.
Create the Background:
Using the Rectangle Tool (U), create a rectangle covering the whole document with the color of #181818. Add the “Extra Heavy Canvas” Pattern Overly in the layer properties menu.
Create the Header:
Make another rectangle at the very top of your canvas spanning the width of the document with a height of 25 pixels and a color of #4896CE. Copy the Layer style from the previous step and paste it into this layer.
Take the generic twitter bird from the internet, re-size it to approximately 29px by 17px, and place it on the top left of your header.
Using the Horizontal Type Tool (T), type a random twitter update. "Browsing the internets looking at design blogs." is what I wrote. Use the Character settings below.
565 pixels from the top of the canvas create another rectangle spanning the width with the same color, pasting the Pattern Overlay Layer Style on this also.
Your canvas should resemble the image below.
Create the Top Body Content:
Type your name in Helvetica, font size 35px, and place it on the right side of your design a few pixels left of your guide.
Next type your profession. Change the font size to 12px and horizontal scale to 112%. Move it down below your name and hugging the right guide you placed earlier.
Go ahead and use the Line Tool (U) with a color of #509ACF and create a 1 pixel line below your profession spanning the entire area between your guides. Create a highlight below your line by adding the Drop Shadow Layer Property shown below.
Duplicate the layer (Ctrl+J) and move it down 40 pixels.
Now we will make our tag-line in between the line shapes we just created.
With the same text settings used to create your profession, type something unique, witty, and showing confidence in yourself and your abilities. I chose to use "Hi, My name is Mark.I dream up designs in my sleep and code them into reality during the day." Use the Paragraph toolbar to Center the text.
Creating the Spaceship:
This is a rather simple spaceship made by using the Ellipse Tool. Create a circle, then Duplicate the shape a couple times (Ctrl+J). Using the Transform Tool (T) to re-size and stretch the ellipses to a few different sizes, then change their color and arrange the layers to create a spaceship looking object. Apply the Heavy Cavas Layer Property to these shapes also.
Create the Image Placeholders:
Take screen shots of your different pieces of your portfolio, crop and re-size them to 180px by 144px.
Apply the Stroke Layer Property creating a 7 pixel border with the color of #5BADE7 inside of the images.
Space the images out horizontally moving them so that they have equal space in between each other and about 25 pixels above the bottom blue footer background.
After you code and implement this design in XHTML and CSS, a great idea would be to use a lightbox plugin using jQuery or another JavaScript Library, making it truly a one page layout. This way the viewer and prospective employer won’t have to use the back button in their browser.
Select all of the shapes which comprise your spaceship, Move (V) and center it above your left image, and about 17 pixels below the bottom line you created for your tag-line.
Making the Spaceship Beam:
Create a New Layer.Now using the Lasso Tool (L) make a triangle selection coming out of your spaceship and covering the top of your image.
Take the Gradient Tool (G) (100% #FFFFFF on left, 0% #FFFFFF on right ) and drag from top to bottom creating a white to transparent gradient. Change the Opacity of the layer to 80%.
Duplicate your spaceship and gradient three times and move them so that there is one above each portfolio item picture.
Make the Skills Section:
Type "Skills" with a font size of 26px in Helvetica.
With the text set to Centered and Leading to 33px, list off your skills. Now change the font size of your text you’ve just created to 20 pixels. Arrange them so that they are center aligned, and centered below your portfolio images.
Under the center of the furthermost right image type "Download Resume", then change the paragraph alignment to left.
Create a line below Skills as we did before but with a color of #254b66 and a Drop shadow of #F6F6F6. Make smaller lines and place them below each skill you have listed.
Finish off the Footer:
Duplicate the first line you created above and place it about 22 pixels below the lines made for your skills.
Type "Copyright 2009" with a font size of 11 pixels. Make sure you get the copyright symbol in there too.
Make Faded Borders:
Lastly we are going to make the left and right borders faded so that the main content stands out.
Make a large rectangle on the left of your canvas 120 pixels wide and covering from top to bottom. Make sure the layer is on top of all of your layers with a color of #ffffff and an Opacity of 20%. Duplicate and align to the right side of your canvas.
Final Image:
