Tutorial Details
- Program: Adobe Photoshop, Illustrator CS3+
- Difficulty: Intermediate
- Estimated Completion Time: 2+ Hours
Download Source Files
Final Product What You'll Be Creating
First impressions do count! Stunning our viewers with a visually compelling portfolio is one of the most important things that a designer can do to court a new client. Today we will demonstrate how to use photos, brushes, and textures, and 3D objects to design a creative multimedia website layout in Photoshop. Let’s get started!
Resources
The following resources were used in the production of this tutorial:
- Classical camera
- Director’s chair
- TV camera
- Laptop
- Microphone
- Hotair baloon 1
- Hotair baloon 2
- Small Tree
- Cityscape Brushes by Terf
- Clouds brushes by JavierZhx
- Abstract glow brushes by Ro-stock
- Rust Textures by Princess of Shadows
- Armored Metal Textures by Wen Jr
- Render Pack Textures 1 by Angelus Hellion
- Render Pack Textures 2 by Xcellcior
Step 1
Create a 960px by 620px canvas in Photoshop. This is a good resolution for websites as most screens can accommodate it.
Press Cmd + R to add the ruler and draw some guides to mark the limits for the main content area. These will be useful to center your design.
Step 2
Now that the main content area is properly delimited, let’s resize the canvas to 1224px by 620px (Image > Canvas Size) to create a bigger background. This spill-over area will be useful for visitors with large screens and create a ‘borderless’ look.
Step 3
The last step in preparing our document is to add a guide in the center. This guide will be handy when you have to center the design elements. A quick way to find the center is to create a new layer and press the Cmd + T shortcut keys to activate "Free Transform".
Step 4
Let’s make the cloud platform on which the main design will sit. Make a grey gradient background. Layer > Layer Style > Gradient Overlay. Gradient #434344 to #EAECEC. Leave all the other settings as default.
Step 5
Create a new layer “Clouds”. Load your Clouds brushes and paint in white a few clouds of various shapes, sizes and opacity until you’ve achieved a similar result as shown below.
Step 6
Create a second layer “clouds 2″, add a few clouds in the center.
Step 7
Create a third layer “clouds 3″. This time use the Abstract glow brushes, the 2nd brush, size 420px. Flip it, press Cmd + T > Flip Horizontal. This will help in giving the clouds a more wispy and ethereal look.
Step 8
Now we’ll create a big 3D “M” for “Multimedia”. You could substitute your company’s initials here.
Open up Illustrator and paste the cloud background that you just created into a new layer. Use it as guide to design the 3D “M”. Type the letter “M”: font Handel Gothic Ex, 181pt, white; you can substitute any other wide thick font. To give the text a 3D effect, go to: Effect > 3D > Extrude & Bevel. See image below for the settings.
Step 9
Copy the 3D “M” and go back to Photoshop to paste it in your document. Rename the layer to “m”. We’ll now apply some effects and textures to make it more realistic and interesting. First apply the following Layer Style to layer “m”.
Step 10
Create a New Folder “m textures”. Select the letter “M” with the Magic Wand Tool and with this selection, add a Layer Mask to the folder. We will now have all our textures for the 3D “M” inside this folder.
Use “texture 4.jpg” from the Rust Textures pack. Copy, paste and call the layer “texture”. Duplicate it and scale the duplicated layer “texture2″ down to 12.5%.
Step 11
Adjust the Layer Opacity to 40% and change its Blending Mode to Color Burn for both layers.
Step 12
Add another texture layer “texture3″ using “metal_plaque_bump_seam.jpg” Armored Metal Textures. Adjust the Layer Opacity to 26% and change its Blending Mode to Hard Light. Shift the layer around until you are satisfied with the texture’s position.
Step 13
Use a Soft Round brush with Opacity of about 30% to apply a shadow below the “M”. Use the Smudge Tool to adjust and create a slanted shadow as below.
Step 14
Add your company name, in this case “Multimedia”. Use Heritage Extra Bold, 32px, black. Next add a faint shadow below it.
Duplicate the layer, rename it "multimedia shadow". Cmd + T to access the Transform Tool, right click and select Flip Vertical. Add Motion Blur. Change the Layer Opacity to 50%. Add a Layer Mask and finally, apply a gradient to fade out the bottom.
Step 15
Now we’ll create the cityscape for our Multimedia world. You can use Cityscape Brushes for the buildings. Download a few abstract render packs : Render Pack Textures 1 and Render Pack Textures 2 for the textures. First use the brushes to draw a few buildings. Draw each building on a separate layer, between layers “clouds” and “clouds2″.
Step 16
Resize, position and cut out part of the buildings that you don’t need.
Step 17
For each building, create a New Folder which will contain their respective textures. Using the same method to apply texture for the letter “M”, select each building, one at a time, with the Magic Wand Tool and add the selection as a Layer Mask to the folder. Set the folder layer’s Blending Mode to Lighten.
Step 18
Now apply the abstract textures to the cityscape as below. Move, rotate, resize the textures until you’re satisfied with the effects.
Step 19
It is a good practice to clean up and organize your layers. Though a bit tedious at first, this practice will actually save you precious time when searching for files, let’s say a month later. Place all the buildings layers in a new folder “Buildings”. Bring this folder down between layer “clouds” and “clouds 2″.
Step 20
Use your cloud brushes to paint a few small clouds on layer “clouds2″ to cover up the buildings’ base.
Step 21
Let’s add our multimedia props: Classical camera, Director’s chair, TV camera, Laptop, Microphone, Hotair baloon 1, Hotair baloon 2, Small Tree. For each of these objects extract their background by using the Magic Wand Tool (W) and then click on the button Refine Edge to adjust the edges. To remove any remaining rough edges, use the Eraser Tool (E) with a small round brush.
Step 22
Resize and then apply Filter > Smart Sharpen (Cmd+F) to each object. Position them as below.
Step 23
Add shadows to the chair, TV camera, laptop, microphone, camera and car by following the same techniques used for the letter “M”. For the tree, use natural brushes and adjust the shapes using the Smudge Tool.
Step 24
Spring cleaning time! Link up each object layer with its respective shadow layer so that it will be easy to turn each object on and off as needed. To do this, Press Shift + click on both layers. Right click and select Link Layers. Then place all the props layers in a new folder “Props”.
Step 25
When designing a homepage, the interactive elements play a major role in determining the website’s success. Therefore we should make our main buttons enticing and prominent for users to want to click them. We’ll create 3D boxes that are connected with the cityscape through colorful wires. They will represent our different page sections. Here’s a preview of what you’ll be designing.
Step 26
Go back to Illustrator to draw the 3D boxes and colorful wires. Use the Rectangle Tool (M) to draw 6 white boxes of different width depending on the length of the text the box will contain. Example “Web” will have a smaller box and “Contact” will have a wider box.
Step 27
Apply Effect > 3D > Extrude & Bevel for each box. See image for each box’s effect settings, from left to right.
Step 28
Copy over the artwork you created in Photoshop so far and paste it in a “background” layer as a guide. Draw a few lines with either the Pen Tool (P) or the Pencil Tool (T), whichever is easier for you.
Step 29
We’ll now make some rainbow brushes. Use the Rectangle Tool (M) to draw a rectangle. Then copy and paste four to five rectangles one beside each other vertically. Change their colors. Select all the rectangle and use Align Left to align them.
Step 30
Make a few rainbow variations. Here are some samples.
Step 31
To make the brush, select a rainbow cluster, drag and drop it into your Brushes Panel. Select New Art Brush. Name your Art Brush “Rainbow1″ and keep the default setting with a horizontal right direction.
Step 32
Now apply your rainbow brushes to the different lines.
Step 33
Copy and paste each rainbow wire(line) individually in Photoshop. Paste the layers in front of the buildings but behind your props and the letter “M”. Apply a Layer Mask on the wire layers and use the Cloud brushes to make part of the wires transparent.
Step 34
To give the wires a 3D look and make them shinier, apply a Bevel & Emboss Layer Style with similar settings as shown below. Each wire requires some slight settings tweaking to achieve the desired look.
Step 35
Copy and paste the 3D boxes from Illustrator into individual layers.
Step 36
Apply texture “metal_plaque_bump_seam.jpg” from Armored Metal Textures, using the same techniques as in Step 10 and Step 17. Set the texture layer’s Blending Mode to Hard Light with Opacity 26%.
Step 37
Add text to the boxes. Use Heritage Extra Bold, 14px, black. Rotate the text where needed to follow the angle of the boxes.
Step 38
Clean up your layers and organize the buttons into folders, if you haven’t already done so.
Step 39
The last step!! Add the footer and you’re done! Use Verdana, 10px, #cccccc for the first line and #999999 for the bottom line. These are safe web colors.
Conclusion
I hope you found this tutorial helpful. Do share your opinions, ideas, and I will be glad to help you if you have questions. Be creative and explore the techniques you’ve learned here – I can’t wait to see what you come up with!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Carine Ma
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Interesting. With the uniqueness of the scene the “Multimedia” font/text seems out of place, and I’m guessing that may have to do with how the text is flat while everything else has dimension and volume.
First, :) nice tutorial, thanks
Nice image, but it’s not exactly a website layout really is it?
I think we’re just used to seeing the WP themed site design tutorials. I do wonder where the content would go for this site though? O_o
You’re right. We’ve seen too many grid based site and forget the endless possibility of web design layout.
I think what we’re used to seeing is the same 960 Grid System layouts in the same polished, or grungey, or whatever style. I admit I’m not the biggest fan of this initial design, but at least the author is trying something different.
I’m sorry, melody. I forgot to use my own name on the comment.
Damn, that’s suck.
I agree Dean; it’s not a website in the sense that it is a ‘content page’ – this strikes me more as a very pretty splash page. I’d say ‘landing’ page but there seems to be no content. Just the Multimedia image/text and what I presume could be turned into image map links.
You’ve got it Melody & Jesse, this is not a conventional design. It’s a front page that aims to impress clients with a creative design and has navigation links to individual pages. The concept was originally designed for a flash interactive/animated interface.
When you click on one of the boxes, for example “tv”. The box will shake and the “tv” will slide down along the wire and drop down (about 500px below) into in a splash of colorful ink and relevant content will appear.
I hope this makes sense :)
Is this used in a real project? If it does used I’d love to see the final outcome, with all those flash animation. I haven’t seen a flash website for a while.
Very surreal looking. I love the look of it! I am not sure though if it would be good for a website.
Amazing..i will like to have this inspiration too.Nice good work :P
great! very original, well explained tut! :)
I’m new to the scene but really like this and will be giving it a go. Nice tutorial :)
With some flash tricks, this design could pretty cool :)
Spot on it’s meant to have some flash animation of the boxes, objects, scrolling window, splashes of inks!
Not sure if I like the outcome…
The end result of this is a really poor looking website.
I’m used to much better quality work from you guys.
Sorry to be negative but I feel it needed to be said
Oh! because your site is great…..
The outcome is hideous. First animated sparkling GIF’s and now this?
Micheal & Sean, I had a look at your websites. Now I understand where the negative comments are coming from. This tutorial is certainly not about conventional html/grid/wordpress website! Cheers!
I think Carine was putting it too nicely to be honest…
@Sean:
Has nobody introduced you to font replacement yet? I’d assume not since you’ve got some massive headings on your site which look absolutely terrible because they’re not anti-aliased. As well, your portfolio is less than desirable. Maybe try aging a few years, growing up a bit, and evolving as a designer before criticizing someone else’s work which is far superior to anything you’ve made public.
@Michael
Wow, really? You’re seriously going to sit there and make that comment while having a link where we can all view your horrible site? I mean c’mon…
@Both:
Don’t you know that if all websites were designed/built around the same boring grid that the web would be inundated (more so than it already is) with terrible web designs? I think that Carine’s design is quite a refreshing change of pace from all the patchwork grid designs that seem to be popping up all over the web every 2 seconds.
If you don’t like it, you certainly don’t have to feel obligated to draw any sort of inspiration from it!
Isn’t the trend to show us how to make it into a WordPress theme?
For me, the final outcome looks more like something better served as a design for one side of a flyer/mailshot to promote one’s services, as opposed to a dynamic design. That’s the beauty of design, folks – some of you have hang ups about the fact it wouldn’t work so well as a web page. You may well be right, but instead of throwing criticism, why not look at how a design like that could be deployed instead? It’s all open to interpretation, and I personally enjoyed the tutorial.
You’re right, the techniques illustrated in this tutorial can be used in any type of design work and shouldn’t be limited to web design. As I explained earlier this was designed for a non conventional flash website. Glad you enjoyed it!
Thanks for the back up, I don’t mind mind the negative criticism, but they would have been better if they were backed up with reasons.
The design is awesome really. but it takes up the whole screen. would like to see an example of how this
if u maybe made it use only 1/4 of the screen on the top, u could fit in something else under…
You could add something below if you want. Really it’s up to you how you want to use the techniques demonstrated here :)
Personally, I would use this for a landing page (I may in fact use something similar). The buttons obviously as buttons, but also some of the elements as hidden links, just cause I like that. =]
Then design a related layout for the content pages, using a standard grid, etc. Use one of the textures in the header, use the M with Multimedia, maybe some of the buildings even, perhaps with some of the props floating around.
I very much like this tutorial and the outcome. I went through the whole thing, added some changes, then as I was saving it again, power went out. Corrupted the whole file =[. So I started over, from memory mostly =]. Its great cause I’m just learning photoshop.
Is this actual design in use anywhere? Mine is different, but very similar. I want to turn it into an actual layout, but I don’t want to put it visible anywhere if it is so similar to another site.
Cool concept; certainly not a typical website design, but that’s ok. I’m looking at this less of, “how to make a non-conformist web design” and more of a tutorial on putting elements together to create a scene; for whatever medium it may be intended for. Also, it does say a “Design a Multimedia Website…” which those often have interesting designs to begin with, haha. Good tutorial, thanks!
@Melody, I agree that I’d be interested to see how content on an internal page would be laid out.
mmm i agree with melody the text need more work, and the clouds of the background are…..not good either, i suppose this is a layout for a flash site or just a big image in a html but i wonder how would be the contents of the site.
I enjoy the end result- with the exception of the wires. They do not seem fluid enough and often don’t seem to bend in a manner that feels ‘natural’ given the orientation of the boxes they connect to. Further, the effect you’ve used ends in a noticeable bevel at the bottom of many pieces, which cheapens the effect overall.
A few more natural twists in the wiring, and perhaps placing a cleverly-designed ‘cap’ overtop the wire where it meets the gray box and I think you’d have a much more solid piece.
Thanks Rob for the great tips! Yeah I admit that the wires could be better, using the bevel was a quick fix to achieve a 3d look :)
I actually like the style of this. It’s different and it’s eye catching. As mentioned above there wouldn’t be much room to add content, but if you used your imagination, there could be various solutions to sort this problem such as, click on the film box, the screen zooms into the box and then you have a brand new web page to do with film? Anything is possible nowadays :)
Very nice. But im not sure this can use for web layout hehee :D
Even though i don’t really like the outcome, if I would have to add content, i would make it a horizontally scrollable site since it is in the clouds, and clouds float, right?!
Of course it could be a flash site, but then, you can turn any picture or comp or illustration into a flash site because you have no limitations whatsoever what you can do on the screen.
Great Job!!!!!
Great Tutorial…
amazing nyc work keep it up
if you mean you will use this Header i will say you can because is just a header is not complete yet
anyway i like it
It looks very good! Interesting design … a little too big but it can be used in a real website :)
God idea, but it’s not finished at all. Need to work more on it, to polish everything
i very very very like it admiring….
Great, nothing less
Great tutorial, very helpful. Thanks!
I think this is an excellent layout. An idea for how to access the content, is when you click on the links like film, tv, etc. You do an overlay box that grays out the back ground & pops up (sorta like the lightbox effect) & then that is where you can see the content. This way you wouldn’t be getting rid of the main banner — it could still show but like a transparency look when your viewing content. It’s an idea. I like the way you did that though. really cool.
Great tutorial. Doesn’t necessarily look like a website design but still looks amazing nonetheless.
Real Classical piece. Had much help and generated concepts for ma new project. Keep up!!!
Hi Carine,
By looking at my website, I don’t think you can judge if I know a particular ‘style’ of website or not.
I run a design inspiration blog called D-Lists where I showcases websites every day. I see A LOT of excellent web designs everyday. I love unique looking websites and interfaces that challenge users.
However, I do not think this design is very good.
The textures aren’t very subtle, the ‘navigation’ looks poor, with the font being badly aligned. What are those boxes supposed to be? How do they say multimedia to me?
Some of the perspectives in your ‘montage’ are wrong making it look like it’s just been thrown together.
I’m sorry to be harsh and I’m not rating you as a designer, just this design on what I see.
Please try not to pigeon hole someone just by looking at their portfolio sites.
Hi Michael,
Sorry it came across wrongly but you didn’t previously justify why you didn’t like this design so naturally I tried to find a reason. Thanks for expanding your views, no offense taken I respect your opinion.
By the way the boxes are meant to animate and release colorful splashes of ink coming from the wires when you click or drag them. It a wacky idea.
Cheers!
Wow!.. I am appalled by your attitude. In no way did Carine “pigeon hole” your design style.
Its quite obvious to me that while you can happy sit there and criticize this design, when areas you should really be focusing on are your own website. I can see lots “wrong” over there? Thick black borders against white backgrounds, zero colour and ugly font..
As harsh as this sounds its no harsher than your reply to Carine, who as far as I can tell has been very respectable against all your insults.
Please take some of your own advice.
There is also a reason why this is PSDTUTs and not NETTUTs post.
Great tuto!
I’ll try to make it live with Basekit. Someone knows it? Apparently with it, you can make a PSD into a website without knowing HTML and stuff..
I am so new to multimedia and web layout designing. You have given a very detailed and good step-by-step tutorial of designing a multimedia website layout in photoshop. Which is very easy to understand for new learner like me. since I am too new to start working on any project but it gave me a good idea what to expect. As a new student I have many questions in my mind but I will ask you next time.
Have a nice day
Garima
Thank you so much, I just did a Blogger template using this image, check this out http://multimedia-blog-deluxetemplates.blogspot.com/
I really like the design, the wires maybe could of done with a more natural look I agree and maybe more fx used on them to bring them out more. I think its a great tut to see how to put things together though like someone else said, obviously as a web page it may not be perfect and but there is a lot that it does teach people and some great tips, which is what I want to see here anyway. It gets the thumbs up from moi.
Klodian, I just visited the Blogger template that you made using this tutorial. I have to say it is amazing.
Thank you
The design is beautiful. I am still unsure about all the negative comments. If all websites looked the same and fell into the same grid, hell it would be one boring place!
I agree its only a splash page.. but who says other extra tutorials cant be produced?.. Everyone seems to be moaning that this is not a WordPress site, or its just a splash page.. there is no content.. its not coded.. it doesnt have a grid.. blah blah.. when really people should be celebrating and embracing such imagination.
The design is created for inspiration purposes only.. and if it doesnt fit you needs then dont use it as inspiration!..
But give credit when credit is due…
#Rant over
Keep up the good work :)
This tutorial more help to us, . Thanks!
Nice tutorial
thanks
I kinda like this. It is very different than the run of the mill 960 grid layouts. Don’t get me wrong. 960+ grids give you specified content areas, but I do think the layout above works. Content areas could easily be added and this could easily be jQueried up into an awesome site. Maybe when you click on one link the other “cords” shorten up and the content for the selected link shows below.
I do think that the 960 grid is becoming stale now. With the endless possibilities of plugins, CSS3 or CSS2 for that matter, HTML, mobile sites, etc, etc that more off the wall, yet functional designs are gaining more appeal. They show a bit more… willingness to push boundaries.
how to slices the button for website link?
i get some trouble when the object that want i slice isn’t square or maybe the possittion is too near with the other object,,,tnks
I am very impress because i find good results of the tutorial
cool tutorial! another resource i found on multimedia webdesign: http://www.peachpit.com/adobecs5
As a designer for over 10 years who has worked on entertainment and corporate sites I think many new designers are missing the point in tutorials like this. The idea is not take this exact site and layout and replicate it, the idea you should take away is to be inspired by the imagination and learn some of the techniques. So maybe next time your coming up with a site concept and you need a custom sky with brushes or floating boxes or wires, etc you will have a better idea how to create them after looking through this very creative tutorial.
Carine,
Thanks for the tutorial and the inspiring work. My intention was to use this design as a webpage header of sorts (as can be seen on my website now).
For the most part I was able to follow your instructions with relative ease and understanding. The rainbow wires threw me a little, and I figure I will come back to them at a later date.
The one big issue I have is creating hyperlinks for the boxes. Your tutorial did not address that. Everything I found on Google suggests usingthe image map feature in ImageReady which apparently does not come with CS3. Is there any way for me to be able to link the boxes in the image?
Thanks again.
wew, this is magic tuts
very very nice…