Category Archives: Web Design

Photoshop website mockup!

Created in Photoshop CS5. Logo created in Illustrator. Click image to view full size.
You can download the psd file here!

Website_mockup

Audi Photoshop Website Layout – v2 :D !

Here’s the original Audi Layout we created in class (just redirecting on my own blog):

https://digitaleffectx.wordpress.com/2012/01/27/photoshop-website-layout/

A useful list of Photoshop shortcuts provided by my teacher (ITS ALL ABOUT SHORTCUTS PEOPLE!!) [for both Mac and PC] :

http://www.mediafire.com/?32eb6f1taoc8i4p   (PC shortcuts – Photoshop CS5)
http://www.mediafire.com/?p9fo8g8zyz1t4pd  (Mac shortcuts – Photoshop CS5)

Source files for this project (if anyone wants to take a look):

http://www.mediafire.com/?7cby1fa9tj9upsz


Second Audi Layout

The images had to be shrinked a lot to fit in the small column on here. Click any to view them full-sized, it will redirect you to my Flickr.

Here’s some insight on the second audi website layout which we had to create ourselves:

Starting off with the file from the previous project, I selected the center-point image. From there, I used a rounded rectangle for the top menu and added a few logos (to decide on one later). Used the stroke effect to get that gray outline on the top and bottom around the image!

mainimage-stroke

Adding a rounded rectangle as a way to create round rectangular quick links at the bottom of the image:

bottom blocks

Sadly, that didn’t work out as when I inserted the image on top of it, the corners looked terrible. I finally ended up using this tutorial from Matt Thomes so my image would instead serve as the rounded rectangle:
http://matthom.com/archive/2004/09/10/fast-rounded-corners-in-photoshop

^ If you end up using that trick to get fast rounded corners and you want to get the result on the same page, ignore the last step under ‘Almost Done’. Instead, click on your image layer and then click the ‘add layer mask’ tool which is on the bottom right and looks like this:

layer-mask-tool

Once done implementing that, I tried to alt-drag and make 2 clones but apparently that didn’t work out as I couldn’t replace the image for each of them. I had no groups but just an image itself which served as each block. To get a better picture:

bottompart

The 3 links are just images with a mask on them. Since replacing the images on the clones didn’t work out, I just deleted the other 2 and repeated the process separately for each one. The top menu seemed to have too much empty space and didn’t look balanced, so I added an extra menu there. On top of that, I gave the 3 bottom images a ‘difference’ blend mode on the stroke so they change colors as it goes from the grey stroke of the other image to the background (look at the border of the image) Once finished with that, I had my images and the menu pretty much set up:

layout-final-2

All I did next was add a few text layers under those 3 images, add some final touches and make sure everything was lined up right according to the guides and the grid. Ctrl-click multiple layers, then use the selection tool (v on keyboard if not in selection tool mode) and you’ll see the align options on the toolbar under the file menu. And there you have it!!! Enjoy!

final-grid

End Result

You won’t be able to see the image properly due to the white background. Click here or on the image for a direct link view it in flickr’s lightbox!

final

Photoshop Website Layout

Here’s a Photoshop Layout we created in class. I’ve attached the source files if anyone is interested in trying this out. A mask was used for the main image, the rest was just aligning text layers and adding the logo! Click on the image for the full-sized image (redirected to Flickr)

Audi R8 Layout 1
 
 
 

All project files can be downloaded here (psd, img and logo files)

http://www.mediafire.com/download.php?rpgjoc3zirjob45

%d bloggers like this: