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

Advertisements

About Aamir Raza

VFX enthusiast and Digital Media Artist living in Toronto. // www.digitaleffectx.wordpress.com

Posted on February 8, 2012, in Photoshop / Illustrator / Print, Web Design and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: