The past days I was looking for inspiration in famous old paintings, and got interested on "Starry Night" of Van Gogh and thought: Can I apply this to web design? And the answer is Yes! Then after several hours of work, here's my tutorial for you, an artistic web design depicting a "Magic Night" concept.
Create a Magic Night Themed Web Design from Scratch in Photoshop
Feb 4th in Interface by Alvaro Guzman
Final Image Preview
Before we get started, let's take a look at the image we'll be creating. Want access to full PSD files and downloadable copies of every tutorial, including this one? Join PSDTUTS PLUS for just $9/month. You can view the final image preview below or view a larger version here.
Step 1
Let's the design begin! First of all, this isn't a basic tutorial, so I'll skip some basic explanations. Anyway, anyone with an intermediate - advance level of Photoshop skills will be able to do it. Second, it's really hard to obtain exactly the same result that I've got, and you must use your imagination and good taste to get something similar or better than my design. And third, this was designed by considering application into a Wordpress template, but you can quickly convert it into another engine's theme, or even a custom website.
Moving forward then! Create a new document 960 pixels by 1000 pixels and RGB. Draw some guides to mark the limits and go to Image > Canvas Size to resize the document making the canvas' width bigger (1460 x 1000 px). This way you'll have your design centered into a big document and see how it looks on widescreen resolutions. Also, draw a guide to mark the header height.
Step 2
Draw a horizontal guide in the middle of the document and use it to fill the "Background" layer with a dark blue Radial Gradient (#0D2B53 - #010D1F). I'm also adding a few guides as bounds of the main page's padding on the left and right.
It's very possible that we'll change the document's height later, so add a New Fill Layer (#010D1F) below our "Background" layer.
Step 3
Since one of the PSDTUTS readers suggested using real pictures instead of the classic Clouds filter, we'll try that this time. Paste this picture of some storm clouds into a new layer named "Clouds" and change its Blending Mode to Overlay. Then go to Layer > Layer Mask > Hide all, and draw a Radial Gradient from white to black (#FFFFFF - #000000), which goes from the middle top to almost the middle bottom. Then adjust the "Clouds" Levels a little bit to make the clouds darker.
Step 4
Now paste this nice skyline of a spanish shore into a new layer named "skyline." Then create a new Adjustment Layer > Channel Mixer... and select Black & White with Blue Filter (RGB). Then to apply that effect just to the "skyline" layer in the layers palette, hold the Option key and click between the Channel Mixer layer and the "skyline" layer. Finally, change the "skyline" layer's Blending Mode to Overlay.
Step 5
Apply a Layer Mask > Reveal all to the "skyline" layer. Then using a big and black (#000000) soft Brush hide the borders of the image, then select a Grunge brush (I'm using this Grunge Brush set by Kelzky13, especially brushes 250 and 181) and make the borders a little bit more irregular.
Step 6
Next type the title "Magic" using the Scriptina font. Then apply the layer styles shown below: an Outer Glow (#9EB6D0) and a Gradient Overlay (#70ABF6, #FFFFFF, #B4CBE7, to #FFFFFF). Also, now is a good time to organize our developing design into folders. Put all the layers into a new folder named "Background" and the text inside another folder named "Logo."
Step 7
Now we'll add some stars to our design, you can use any star Brush set but I'm using this set: Star field brushes by BL1nX. Then using the brush 550 of the set, paint the stars in white (#FFFFFF) into a new layer inside a folder named "Stars." Notice that I'm putting the brightest star over the dot of the i. Then apply a gradient overlay using three colors (#3A8FEF, #FFFFFF, and #66C9FC) to the "Stars1" layer.
Step 8
Next, using the brush 615 of the stars field set, add more stars to the sky into a new layer named "Stars2," then with a soft Eraser, delete the stars over the buildings. Next, add a Outer Glow (#8AB2FF) to "Stars2."
Step 9
Add more stars to the "Stars 2" layer all across the design, then using the Eraser tool, delete some areas of the stars. Finally, apply a Gradient Overlay effect to "Stars2" layer, using four colors: #6AB1D1, #FFFFFF, #94CFED, and #FFFFFF.
Step 10
Now download these Star Brushes by jen-ni and keep the brushes handy because we'll use them several times in this tutorial. Select a 65 px brush (I'm using number 148) and draw a white (#FFFFFF) star into a new layer just above the dot of the i. Then apply an Outer Glow (#00BCF9) to the star to make it brighter.
Step 11
Duplicate the "Magic" text, select the text, and type the word "Night" in it's place. Next, set the Outer Glow to white (#FFFFFF) and the Gradient overlay to three colors (#F9DA5B, #FEAE00, and #FFD403), see the image below to check the filter's values.
Step 12
Let's add some clouds to our night! Download redheadstock's Clouds II brushes. Next, select the brush number 2464 and set its size to 960px (matching the design layout's main width). Set the foreground color to #234B7F and paste a single cloud into a new layer named "cloud1." To keep the layers organized, I'm putting the clouds into a separate folder inside the "Background" folder. Now stretch the "cloud1" height a little bit.
Step 13
Following, Dodge and Burn the cloud a bit. Notice that I'm lightening the areas next to logo star and darkening the cloud's bottom. Also, change the "cloud1" Opacity to 50%.
Step 14
Add one more cloud into a new layer named "cloud2." You can use any cloud you like, but use this color as a foreground: #5F83A5. Dodge the bottom of the cloud a little bit to improve the lighting sensation.
Step 15
Repeat the previous step but this time using another brush with this color: #36638C and place it above the "cloud1." Resize it, then Dodge and/or Burn the cloud if necessary.
Step 16
Select a big soft Eraser and delete the bottom of the "cloud1" layer to create a fade out effect.
Step 17
This is actually a critical step, we'll add the main container background, you must never forget you're designing for the web. Using the Rectangle tool draw a vector rectangle (#0A1D37) into a new layer all below the "Clouds" folder. Notice that my rectangle is inside the padding Guides. Then select the rectangle layer and go to Layer > Layer Mask > Reveal all... and draw a white to black gradient, which adds a nice effect at the rectangle's top. Finally, drop a Guide below the Rectangle's fade in, which will help us when we turn this design into HTML + CSS. Notice, that from the guide to the bottom of the background color should be plain.
Step 18
Now add another rectangle but this time as the Sidebar background, again help yourself with a Guide, and use the color #091525. Then, apply to the new rectangle a Layer Mask a little bit just like in the previous step.
Step 19
At this point, we've got the basic header background done. Now it's time to add some details. I'll put a unique RSS icon on the header. Copy this picture of the full moon and paste it into a new layer named "moon-rss." Then adjust the Hue / Saturation values to make the moon a little bit more yellow, and add both Inner and Outer Glow filters (see the values shown below).
Step 20
Add a small cloud shape with the color #7997B3 into a new layer above the moon in the layers palette. Then using a big soft eraser, delete some areas of the new cloud.
Step 21
Add the classic RSS shape (#DCA30B) into a new layer in front of "moon" layer but behind the "cloud" layer. Then, apply to it the filters shown below (a Gradient Overlay, an Outer Glow and a Drop Shadow). Finally, add a star somewhere over the RSS shape (see Step 10).
Step 22
Paste this image into a new layer, we'll use it as background of our main pages navigation bar. Since the original image is a little bit stretched, we need to make it more wide, I played with both selections and the Move (Free Transform) tool to increase the scroll's width. Then Warp the scroll just a little bit using the Flag warp.
Step 23
Dodge some areas of the scroll to increase the shadows and to improve the warp illusion.
Step 24
To improve scroll's texture, apply a Gradient Overlay filter (#045F96 and #FBF4BD) and a Pattern Overlay as well.
Step 25
Now add a Drop Shadow to the scroll. You can use the Drop Shadow filter or do what I did, duplicate the scroll layer, and on Hue / Saturation adjust the Lightening to -100, Blur the black copy a little bit and distort it with the Free Transform tool to make it irregular.
Step 26
Next, add a cloud over the scroll, Dodge, Burn and Delete just like in Step 15. Then add the Pages link's text using Georgia - Italic font. Use the color #0B1827 for the standard links, and the color #211808 for the hover link. Also, add some additional details like stars on the background and a line as the hover effect. You can see the layers' structure at the bottom of the image below.
Step 27
As a final detail on the pages navigation bar, create a new layer above the scroll and using a particles brush, draw a line like it is a watercolor painting (see the image below). Do it a few more times but using different colors. Also, down the navigation bar "Stars" Opacity below 40%.
Step 28
Add the RSS related text. I'm using 10 px Aria, with yellow (#F2C90D) and white (#FFFFFF). Don't forget to set the Anti-aliasing Method to None because most of the browsers renders the text without any anti-aliasing (IE7 and Safari are the exceptions).
Step 29
As an additional detail add this picture of a nice balloon. Extract the balloon from its background and place it somewhere below the logo, add a Color Overlay (#1F416E - Blending Mode: Overlay) to the "Balloon" layer to match the scene colors. Also, you can Burn the balloon's left side just a little bit.
Step 30
Next using the brush 615 of the star field brushes (see Step 8) add more stars above the balloon and the scroll. I'm also adding a chord to the balloon by painting a white curved line with a 3 px solid brush. Also, use the Eraser here and there to reduce the amount of stars.
Step 31
It's time to add a post. First, add the title and the metadata row into a new layer named "Post." See the image below to view the Character values. Also, I'm adding a little star near the metadata as a visual detail.
Step 32
Let's add more info into the "Post" folder, since the list on the homepage will have a preview of several post. We'll add a preview image at left (200 px by 200 px with a 1px Stroke effect) and a brief text at the right. Also, we'll add a preview of how many comments the post has on top right. For the comments field, create a new folder named "Comments" and add a tiny background with a small cloud and some little stars. Basically, just repeat one of the previous steps when we were designing the header, but in a tiny measure. Then add the comments number and the word Comments below.
Next, add a Tags line below the post and add a little star at the right of that line. Add a little star field as a background for the post, just if you want to. Finally, draw a divider (#1D324F) for the post using the Line Tool.
Then duplicate the "Post" folder and edit the copies to create two or three different posts. It's very possible that your document's height needs to be increased at this point, just do it by using the Crop tool or Image > Canvas size, jut like in Step 1. When you have resized your main document, increase the height of both the main background and sidebar background as well.
Step 33
Let's work on the sidebar now. We're going to add the Search form. Create a new folder named "Sidebar" and inside of it create another folder and name it "Search." Draw a cloud into that folder and dodge and bur it to make it look like the following image. Then using the Rounded Rectangle Tool, draw a rectangle over the cloud. Apply a 1px Inside Stroke effect (#697372) to the rectangle and change its Fill value to 50%.
Step 34
Add some white stars above the cloud layer using any star field layer, remember erase all the extra stars. Then duplicate, reduce, and Edit > Flip horizontal the "balloon" layer of Step 29 . Put it into the "Search" Folder. Also, add the title text using Georgia Italic and a nice yellow (#D5A934) color. Next add the search instructions and the button "Go!". You can see the Character's values at the bottom of the following image. As a final detail draw a single bright star behind the text.
Step 35
Add the sidebar content text, titles, links, and put each section into a separate folder. Also, add a soft star field background on each folder and a shiny star behind each title. Besides, add a shiny star as an example of the hover effect on any link. Don't forget both padding and margin Guides.
Step 36
We're reaching the end. Let's add a footer for the sidebar. First, fade out a little bit of the bottom of the sidebar's background painting with a soft brush on its layer mask. Next draw a few clouds, then Dodge and Burn them. Make sure that the clouds do not invade the main content background or exceed the sidebar's width. Then add a white star field behind the clouds and duplicate the balloon once more. I'm saving all this into a Folder named "Sidebar Footer."
Step 37
Finally, we'll create the footer. First on the main content background's layer mask using a big soft brush, hide the bottom to fade it out. Then select some cloud brushes and paint them all across the bottom of the design. I'm combining big dark blue (#0B1C38) clouds and small blue #223E63) clouds, as shown in the images below. Remember, those clouds will become a background image, so try to not cross a Guide between content and footer. Besides, remember to put all the footer's related layers into a new folder named "Footer."
Step 38
Burn the lightest clouds. Then, paint a white star field by using brush 615 of the stars set. Following, paint a brighter star field with a different brush, in this case number 656 of the set. At last, delete the star field with a soft big Eraser.
Conclusion
I hope you found this tut useful. PLUS Members can download the PSD file and modify whatever you want, add or remove details and create your own starry design.
.
Subscribe to the PSDTUTS RSS Feed for the best Photoshop tuts and articles on the web.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Muheed Baloch February 4th
It is an amazing tutorial. So much detail and so thorough.
Hope to see more tutorials from you in the future with such precision.
( )mamjed February 4th
this is nice! hope to see a follow up on nettuts!
( )David February 4th
Nice tut. Beautiful and detailed!
( )Kylio February 4th
Wow.
Great to see such a nice piece of work in the current slum of mediocre tutorials.
Great work
( )Steve February 4th
Hooooolyyyyy sh*t it’s so… magic! ;D
This light, right on the end – freakin fantastic, blows my mind.
Oh man, such a lovely work – if there’s an option I would fav it. : )
( )Maxi February 4th
Nice tut Alvaro! I like to see a south-american comrade around here…
Im a multimedia student and im in road to make a page for a comunity so this is very helpfull, thanks a lot!
Saludos desde Argentina
( )Alvaro March 5th
Saludos!
( )Clem February 4th
Beautiful
( )Marco February 4th
Gooood one !!
( )Nice use of colors/fonts/effects – i just adore the Blue
z final result is amazing !! simple and clear !!
keep going
Eric Salvi February 4th
This is really nice/usefull. I would have to agree is this going to be on NetTuts next on how to splice accordingly and add it to the internet?
( )Josh February 4th
this is great, can’t wait til i have some extra time to get through it!
( )BroOf February 4th
The outcome looks nice ;D
( )Pim February 4th
Would love it to turn this into HTML/CSS. Looks great!
( )vectorss February 4th
very nice. amazing
( )pibo February 4th
cool!!
( )Ben Reid February 4th
Nice bit of work. Colours are wonderful!
( )Gotti February 4th
Thanks for this amazing tutorial.
( )Andrew February 4th
Excellent work & amazing tutorial. Thank you for all your hard work! It’s got a very cool Harry Potter/Prince of Persia feel to it. I love it!
( )ilovephotoblogs February 4th
awesome!
( )OpenSourceHunter February 4th
Very nice, hope to see this tutorial part 2 on NETTUTS, how to created this WP theme
greetz
( )marciobda February 4th
Very nice tutorial. You turn a simple website in a beautiful work.
( )btw, i’m from Brasil. =)
xQlusive February 4th
Wauw, clean, nice, fairytaile lookalike design! Absolute a very nice tutorial! Thanx
( )curtis allen February 4th
Nice tutorial. Keep up the good work.
( )Matthew Heidenreich February 4th
wow, great outcome! Thanks for the share
( )steph February 4th
beautifully done!
( )hoping to see the conversion
Ryan O. Hicks February 4th
Impressive
( )Johnson Koh February 4th
It’s very well done with detailed explanations.
( )Thanks so much!
desgnr February 4th
very very well done, nice tut. thx for putting in the time
( )Manuel Minino February 4th
AMAZING tutorial, a lot of brushes and layer tricks (nothing so “new”, but the way of combining elements is cool!!)
The question as always in every Web design psd tutorial: Will you make the css/html version (for nettuts maybe)??? this seems like a wp theme. Will this REALLY works in a web browser?? I’ve never seen a wp theme so beautiful!! Can this be real or is just Night Magic illusion? am i dreaming?
anyaways… cool psd results!! Felicidades Alvaro!!
( )Bruno February 4th
Terrific! Complete and amazing! Thanks
( )Nick February 4th
Incredible tutorial, congrats!
( )steven February 4th
beautiful
( )Dan February 4th
Nice Picture. It would take 20 minutes to load in anyone’s browser as html/css though. Flash maybe a little less.
( )Chaz December 5th
Yeah it really wouldn’t take that long at all.
( )MIYA February 4th
Beautiful!!
I served as a reference
( )Louis-Pierre Dahito February 4th
Amazing… Thank you for sharing !
( )fesh February 4th
Amazing Design!
( )Sam February 4th
Great Design. Great Tutorial. Please keep em coming…!
( )sentaman February 4th
great!
( )Jason February 4th
Great tutorial and a beautiful result.
( )Off topic but what theme is he using, the one on the Layers window?
Just curios.
Usman Arshad February 5th
Very nice, Thank you very much for sharing! Keep it up!
( )andi February 5th
that’s real nice
( )Omar the Radwan February 5th
Nice one, thanks!
( )Nikola February 5th
love the design! nice work. thank you!
( )sa February 5th
Amazing tutorial.thanx alot.give us more tutorials like this.
( )Lee Milthorpe February 5th
Fantastic!
This tutorial must have taken an age to put together! Worth it though!
( )pHéR-d February 5th
awesome design man!
( )Bogdan February 5th
That’s ……….. awesome!
( )alfin kahar February 5th
amazing tutorial…
( )you had shown the process of web design from scrath
which inspiring me..thx
Carlos February 5th
Great tutorial – Useful too. Back to worthwhile tuts.
( )300 February 5th
Beautyful….
Keep going bro..!!
( )Greetz from Sparta
Yatrik February 5th
Excellent. Superb. awesome.
( )Mr Kuzio February 5th
It’s very nice!
Great!
Wow!
…and thanks XD
( )Adel February 5th
I’m speechless man, this is a very generous giving …..
( )Tanaka13 - Créations du Net February 5th
great design!
( )Isis February 5th
One of the most beautiful layouts that I’ve ever seen. Congratulations and thanks for sharing this.
( )Amanda February 5th
Wow, amazing. Thank you so much.
( )Lee February 5th
Thank YOU!! Give us more like this!!!!
( )Timothy February 5th
Nice tutorial. The final product looks pretty good.
( )Diana Lora February 5th
Wonderfull tutorial Alvaro. It seems so nice !!!!!!!!!
( )Steve Mullen February 5th
Can’t beat a tutorial with a link to a free brush!
( )ashvin February 5th
w o w !
( )Raymond Selda February 5th
This is one crazy monstrous tutorial! I love the effect Alvaro. Very awesome job. Thank you.
( )Joefrey February 5th
Great design! Thanks alvaro!
( )Russ February 5th
At long last a bloody good tutorial with good tips n tricks.
( )Kyo February 5th
WOW! Very, very lovely!
( )melissa February 5th
First tut on this site that I’ve cared to look at in a WHILE. Very beautiful design, very inspiring! Thank you!
( )kjasmine February 5th
thank you so much for taking the time to create such a productive tutorial!
( )detruk February 5th
OUCH…
( )Very good work…
And Very good tuto…
humm…
Very good Website anyway !
Diogo February 5th
Just excellent … keep with good work
Waiting to see the part 2 in NETTUTS: How to turn into a WP theme…
Well done! Gratz!
( )Lubes February 5th
Not bad. Nothing amazing or new, but quite serviceable and pretty.
PSDtuts and their ilk really should invest more into screencasts than they currently do, in my opinion. Video tutorials are such a better way of learning then scrolling and trying to comprehend someones particular use of language.
( )lucia February 5th
superrr
( )Chris Robinson February 5th
nice work on the lighting
( )Clément Petit February 5th
Very very very [...] nice !
( )Good job Alvaro !
Tom H. February 5th
Fantastic!
Very thorough!
( )Gus February 5th
great effects!, would be good to see a tutorial of how to convert this psd to a wordpress theme.. thanks
( )Mark Gomes February 5th
This is the best tutorial that I’ve seen!!! I hope to see more like it.
Thanks again for all your time and hard work.
( )BogDinamita February 5th
:X:XXX:X:X:X
( )TheArtist February 5th
Really great!!!!!!!
One of the best Tuts I’ve ever seen!!!!!! (and I’m really picky).
Well done!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
( )TheArtist February 5th
Meant to say Thank You!
( )Gumo February 5th
Increible…. muy bueno
( )lotoli.net February 5th
it is the bestt really good work…
( )Webdesigner Depot February 5th
Great atmosphere, beautiful color palette.
( )Dan February 5th
Keep em coming
( )zafzaf February 5th
great
( )tazzy51 February 5th
that’s so nice! love this..greetings from czech republic
( )smain February 5th
ufff… awesome. Thanks for this tut.
( )Skunkie February 5th
Excellent job, you have a beautiful sense for the atmosphere of a picture. Also a very detailed tutorial.
Your work inspires! Keep it up.
( )INTERNETSUPERSTAR February 5th
Also requesting a followup on NETTUTS with the actual conversion to a WP theme instructions. Nice work!
( )Steve February 5th
Need more tuts like this, much thanks
( )WEBBOgrafico February 5th
Very nice tutorial… very interesting to me as I’m learning a little bit more of PS right now
( )Suma Priya February 6th
Great
Beautiful
( )zia February 6th
Great Dude
( )Mughal Hassan Baig February 6th
nice cool amazing beautiful & very very nice tutorials…….
( )Christian February 6th
Plz it would be nice this tut to html / ccs
( )Pedro Rogério February 6th
Very very very nice.
( )Fliezenga February 6th
Looks nice! might be difficult to put it into html/css
( )J February 6th
Ok, I’ve tried my hands at alot of these tuts, and love most. This one is not complicated compared to most, but it just shows how easy everyday shoop methods make something amazing.
( )Diego February 6th
Fantastic tut!
( )Slapstick February 6th
WOW!! Looks straight out from a harry potter movie.. Excellent Techniques … Great Tutorial.. Thanks for sharing
( )Piotrek February 6th
Nice & clena . Bravo
( )Henry February 6th
Looks great but would cause some problems when building the HTML across browser versions and if the font size is increased it would break. Nice design though!
( )Kristine February 6th
Very nice! Now how does one go from that and make it a real webpage…
( )DADADOLL February 6th
fantastic!
( )VertigoSFX February 6th
Now this is what makes PSDtuts my number one go to site for photoshop. Amazing tutorial and beautiful result…I love how creative the author was with the rss feed link!
( )Todd February 6th
Beautiful!
( )vidya February 7th
beutiful simply GREAT!!!!! hw do u get these type f ideas???? i want from u the simplest process to convert psd files to html.. plzzzzzzzzz post it.. to v19831984k@gmail.com or ur website
( )Jackie February 7th
Fantastic. Thanks.
( )om vaishnav February 7th
Really Its Amazing…..Thank U Very Much Alvaro Guzman…..For this tutorials.
( )Rada February 7th
Great! Congratulation!!!
( ).inet February 7th
Wow! Amazing dude, gona try this out my self thx!
http://nowgfx.com/forums
( )ArtBox7.com February 7th
I’m speechless
( )godonholiday February 7th
lol at vidya – “simplest process” then you should give it a go! head over to nettuts and follow one of their amazing tutorials on how to convert psd’s to html. Once you learn how its a simple process
( )Navdeep February 7th
Amazing
( )Moe February 7th
Really impressive – Thanks
( )Andrea February 7th
One of the best Photoshop tutorial I’ve ever read. Thanks very much for this.
( )Aloke Pillai February 7th
Final Result looks beautiful!!
( )Lee February 7th
Always love your inspiring work here on PSDTUTS!!!!
( )CoLLaPSe February 7th
Very beautyful!
( )Reader February 7th
JEEEEESUS CHRIST! THIS IS BREATHTAKING!!
( )Hsuan February 8th
Great tut !
( )Manoj February 8th
I don’t know how can i thank you.
( )Great tutorial for my work
mr.zer0 February 8th
AMAZING!! like magic ^^
( )Martin Nielsen February 8th
Great lighting, so delicious!
( )Wynter Jones February 8th
Soooooo amazingly cool! So thorough, it’s awesome. I actually learned stuff!
( )Ronan February 8th
Hi does anyone know the fibers pattern thats used in this tutorial; its a nicely done piece. Well done.
( )Oras February 8th
Great isn’t enough to describe this tutorial … ULTRA AMAZING!
( )Thanks a million
Heldenstadt February 8th
It looks really great. Thank you!
Can someone please tell me if there is a tut, which is about turning such a psd-file into a homepage?
It would be nice if someone answers …
( )Marja February 9th
Love this, very good tut.
( )meizopan February 9th
amazing..
( )Banhawi February 9th
Fantastic tutorial , thanks …
( )jayhan February 9th
Breathtaking! Very detailed work! Thank you so much!
( )Mabuc February 10th
It blows my mind.. one of the best Ive seen here.
( )Gofree February 10th
Wow, how beautiful!!!
( )Zackfair February 10th
nice tut!!
( )Md. Manik February 10th
So good and I am proud for your achievment
( )Alexandre February 10th
Very Good!!!!
( )Ricky C February 10th
I love this tut. Its more specific and detailed. And i got myself educated. Love it
( )Tudy February 10th
Amazing work!
( )FONA February 10th
wonderful design…, it was very nice.. amzing..
( )Mohd Saqib February 11th
Very nice… I liked very much your method to explain each and every thing about this design. This is really nice.
thanks a lot !!!!!!!!
( )E-One February 11th
Great !!! Like always. Best grunge design Alvaro! U Rule
( )E-One February 11th
best
( )jan February 11th
bravo!
10/10
First class
Amazing
( )Amazing February 12th
Draw guides? How do i draw guides?
Should have been covered in the tutorial dude
( )myows February 12th
amazing…. great step by step explanations.
thank you.
( )CSSJockey February 12th
Amazing Design!! Learned some thing new today
( )David February 12th
Terrific tutorial !
the design is beautifull and the step by step tuto very clear. Nice job !
( )Kleberson Leite February 13th
Well.. Very Good Tutorial!! I´m Happy for Help!!
That´s Great!!
( )johansur February 13th
Little bit confuse in step 5, can you help me. I confuse on hide the borders of the image, then select a Grunge brush (I’m using this Grunge Brush set by Kelzky13, especially brushes 250 and 181) and make the borders a little bit more irregular.
Thank you
( )TMS February 13th
Amazing design – thanks for the inspiration and tips.
Now all i need to know is how to get this into html! (Well i;ve worked that out but what about editing the text in the posts?)
Would i need to edit the photoshop file everytime i create a new post?
( )Arana February 13th
So nice.
( )Thx for this!
tillo February 13th
@Amazing – Not sure which Photoshop version you’re using, but I’m a PC and I use CTRL-R to show the ruler. After the ruler is shown, click anywhere on the ruler and drop and drag it down (or to the right if you’re using the side ruler) to the location you want the guides to be.
@johansur – In step 5, you don’t need to use the Grunge brushes to hide the photo, use the solid black (#000000) to brush that over the edges so that you can’t actually see the border of the image. You can also do this before importing the image too if you’d like then just move it over…
( )rafeequl February 14th
Salute! Great Post !!!
( )Ranek February 14th
Real good !
( )Vsync February 15th
Awesome!! i love it!
But as a web developer, it seems a bit hard to implement in HTML/CSS…
( )Hollow February 15th
Nice , and full tutorial ! THX . This is my work
i change something a bit , but i like it http://www.lookpic.com/files/Site_Theme_Screenshot.jpg
( )MirazTutorials February 15th
Very inspirational i love the colours and layout as well as how professional the end design looks.
( )Alvaro February 15th
Writing the HTML+CSS tutorial of this. Wait it soon on NETTUTS…
( )Whizkid February 15th
my try …
http://i40.tinypic.com/a9vimw.jpg
( )Emma February 16th
Wow, the design is awesome! I’m looking forward to the HTML+CSS tutorial. Excellent work!
( )toanpham February 16th
Good job!
( )Matt February 16th
@Dan: Nice Picture. It would take 20 minutes to load in anyone’s browser as html/css though. Flash maybe a little less.
Actually, I think it depends on the file options at the time that you “Save for Web and Devices”.
( )liam February 16th
Best tutorial I’ve seen in a while, excellent work!
( )Richard Arran February 16th
Another excellent tutorial. More please!
( )Corey O's February 17th
This took me a few hours to work through. I can’t imagine how long it took you to come up with the design and write such an in depth tutorial. I’ll definitely check out the XHTML/CSS on nettuts when you write it.
Your tutorials are excellent!!!
( )NZ February 17th
Awesome. Absolutely beautiful work.
( )PiTBuLL February 17th
Extraordinary !
( )I like it very much . Its a well done tut and i love the design . Keep up the god work !
daweisam February 17th
it’s great\1
l like your webdesign
( )asma February 17th
hi,
( )Nice, nice
Mahmoud reiad February 17th
WoOoOoOoOoOoOoOoOW
( )all that can i say that is ~amazing and easy Explaining nice really nice
rjwang February 17th
Very Good~~~~
( )Cookie Boy February 18th
Nice work dude! I used some of your techniques and applied it to my project and it looks great… Thanks!
( )Adil Mughal February 19th
Wow, really too much tips are there with complete details.
i really love this tut.
Best of luck and thanks to provide this kind of tutorial.
Thanks.
( )bruno February 19th
Don’t get me wrong, this guy usually uses some nice techniques… But the point is that he has an awful taste. His works are always so kitschy. It reminds me the late 90’s. Those kitschy websites with frames and animated gifs and midi musics.
( )Yervand February 19th
My web page Please viste and leave your comments as it`s my first web page.
( )dinesh pawar February 22nd
It’s geat job
( )Jared Walker February 23rd
Very good tutorial and nice brushes too.
( )dharish February 24th
its awesome work dude.
( )Kiraly Zoltan February 26th
very nice tutorial!i would definetely like more like this
( )James February 26th
Amazing! Wonderful post.
( )kovshenin February 27th
Great! Nice one, thanks you. Looking forward for some more tutorials…
( )Jamie Allsop March 3rd
This is one nice web design. There is a lot of detail been put into the design and I do like the overall layout of it as well. I am interested to know how long it took you to do this design and am looking forward to the HTML / CSS Tutorial.
( )Serkan Gürkan March 3rd
Very nice tut. Beautiful and amazing..!
( )Fernanda Prevedello March 3rd
Beautiful!!! I love PSDTUTS!
( )fathonix March 5th
Great work and idea, I love it
( )pravesh March 6th
nice !!!! i like it.
( )MegaPHASE March 7th
Amazing tutorial. Keep up the good work!
( )Kaitlin March 9th
I love big tuts, this is one of my favorite.
( )dia_75 March 9th
10/10 very nice tutorial and easy to follow
i really looking forward to the css/html part any idean when its coming online?
( )meteorbites March 9th
AWESOME….
( )dia_75 March 10th
One question because at step 32 i got a little problem with the space…
where did i miss the part that you expand the size from 1460*1000px to 1460 x 1588px ??? because when i duplicate the post folder i dont have enough space for it (and later for the footer) so i check your final image and got a 1588 px height ??
( )Alvaro March 10th
yes, in that step you should increase the document height a lot, that’s why in step 2 we added a vector fill layer as a full page background, just in case we’ll need to increase the height later.
You can solve this issue by adding less posts, smaller images or even simply increasing height of all involved layers.
( )dia_75 March 10th
thank you,
i solve it by expanding the workspace area also i insert the fill layer corectly now i got the same result
adi March 10th
can u tell me how to get the code???
( )so that i can use to edit my blog template
your design is very impressive..
nice work
Alvaro March 10th
wait it soon on NETTUTS+
( )adi March 10th
i really looking forward to the css/html part any idean when its coming online?
( )dia_75 March 10th
been there done that
after working 3 days on this one my final result
http://i41.tinypic.com/s2elw0.jpg
i try to follow the steps as excactly as i can, because i want to learn the used techniques, after that i hope i can achieve my ideas better
so once again, thanks for that useful tutorial Alvaro
P.S. take your time for the Html/CSS Tut because i now want the same quality
( )iTropics December 6th
Wow….Good on you…But I guess the menu box is a bit taller…
( )kim March 11th
great Work,I wish I could Do like that beautiful!!!!!!!!
( )Tyler March 11th
Is there any way you could go more into using the guides? I feel like that’s the only thing you left out of this tutorial. I have no idea whats going on w/ the guides, and you added a lot more guides then the ones you pointed out in the tutorial. I’m lost on how much padding i should use for the outside gues, and where the nav guide should be placed, and where the extra guides that weren’t described came from, and why they’re there.
( )John D March 11th
Nice, I never use some of the tools that you used. Very cool.
( )Pixeam March 17th
Great work and Good Tutorial!
( )Sion March 18th
Wow!!!!Amazing!!!!*____*
( )Merijn March 18th
So nice! How did you get this idea to make this tutorial? I really enjoy it. Its beautifull, easy to follow and really helps me get my idea`s on to the web too!
( )Manuela March 20th
Very very nice…never seen a such well done tutorial. I’ll learn so much from it…thanks a lot! Waiting for the next!
Manuela, Italy
( )asas March 21st
OMFG !!! ITS AMAZING !!!!!!! g8 !!!
( )Luke March 25th
I must say this is an amazing tutorial! I have just created my PSD and I am heading over to Nettuts to view your coding tutorial.
Thankyou Sir for an AMAZING tutorial.
( )Sinoun March 29th
Wow, this is truly spectacular. One of the best layout tutorials I’ve ever seen! Great job, and thank you!
( )Muhammad Alwi March 31st
you are very kind. thank you very much
( )Divya Sanu April 6th
hi plz tell me how toconvert it into dreamweaver for the same web layout pl with step by step. if any 1 can do this pl sen it to my mail id that is : 20jdisanya@gmail.com, i’ll be very thankfull to you thanku so much.
( )Divya Sanu April 6th
hi, pl tell me how to convert the same web layout into Dreamweaver, pl if any body knows this step by step pl forward to my mail id tat is: 20jdisanya@gmail.com i’ll be glad to u thanku.
( )sylarZA April 8th
wow that is to the T-with detail. love it
( )Luis April 8th
Wow.
Gratz for Tutto
( )Sandar April 20th
wow, great style
( )Munimohan April 24th
marvelous! and amazing. :
( )Matt April 27th
I’m confused on step 36. When I try to brush the layer mask it gives me the color of the other layer just beneath it. Why is that?
( )sandeep May 6th
mind blowing! wanna c more work in future. Keep it up!!
( )Simon Medina May 7th
I went through this tutorial very slowly so I wouldn’t miss anything. It took me about 3 days to duplicate your work; It’s almost identical, great template.
With the techniques I learned from your template I was able to created the following web layout for my job: http://www.avalar.biz/AVRE.jpg, It’s not the best, but it’s certainly my best, and I just wanted to take the time to thank you for the tutorial. It has been a great help.
( )I would love to see more of your work it’s pretty awesome.
Simon Medina May 7th
Sorry, had to change the link: http://www.avalar.biz/AVRE_02.jpg
( )Alvaro May 8th
Really glad to see that my tut inspired you to create something new… thanks for your words
MONSTERtuts May 10th
this tutorial is freakishly good
( )aki May 15th
Great!
( )Sakis May 19th
Very pretty
( )dark ikari May 19th
wow great tutorial, i never hear about creat web interface in photoshop n.n ill read all and learn everything
( )dradwa May 20th
very nice design and tutorial
( )ben budhia May 21st
poa(swahili for cool).
( )david_101 May 22nd
how do u use the psd in dreamweaver
( )Aleksi May 25th
Can you guys tell me where to get the pattern overlay he used? I cant find it anywhere. I cant draw any hover details on my menu bar because of it.
( )elion May 30th
Awesome.
( )nice brushes…
o(∩_∩)o…
Rico June 3rd
as ive only been using photoshop for about a year now, this is prob the best tutorial ive came across, nice work.
When is the HTML & CSS going to be available as I would love to give that a go
thanks m8
( )Alvaro June 4th
it’s available net.tutsplus.com
http://net.tutsplus.com/articles/news/new-plus-tutorial-convert-a-beautiful-psd-to-html-and-css/
( )chriz June 3rd
Best Tutorial i`ve ever seen
( )samiha June 11th
Many and many thanks
( )Justin K. Reeve June 13th
This is a beautiful design, and an excellent tutorial! Thanks for taking the time to share this!
( )tuff June 18th
so beautiful tut! it helps me so much.
( )Netviper June 19th
This was pretty damn amazing. Thanks for the tutorial
( )raheel mustafa June 23rd
I am new in designing but your design appealed me very much.
( )halı yıkama June 23rd
perfect
( )esthezia June 27th
This is AWESOME!! Finally so detailed info!!
( )Thanks a looot!!
erk June 29th
very nice tut
( )k July 8th
Too Gud
( )vijay July 11th
its nice but not very nice
( )ratha July 18th
hi, it’s very nice
( )tom July 20th
Hey,
The tutorial was excellent.
This is pretty stupid question But….
because I do not deal with photoshop for websites’, but I would like to try .How do I save the photoshop file to export it later to html?
( )Alvaro July 28th
Check how to do it at http://net.tutsplus.com/articles/news/new-plus-tutorial-convert-a-beautiful-psd-to-html-and-css/
( )Bryan July 20th
Beautiful page! I am a amateur designer and just did this poster for my company based on what I learned from your design.
Obsello Absinthe Poster
( )zety July 22nd
ENCHANTING! like the artist itself…Keep postin’ more ov this…
( )Carina July 25th
Beautiful! I’m going to use some of the effects to enhance my illustrations
( )ZIA July 27th
BRILLIANT. MAN U R A CREATIVE GENIUS
( )John July 27th
Nice,, hmmm is there any video tutorial….
( )sreenath July 31st
best tute dude……..all designer or student can enjoyyy dis
by
( )creative designer from india
webzone interactive
Il narratore misterioso August 5th
Hi! This tutorial is AWESOME
Thank you for inspiring us and for giving us the possibility to create something fantastic.
I modified your design a little and I used it for the header of my brand new blog (in italian).
That’s it: http://lemilleunaricetta.blogspot.com/
This is my first attempt (I did it in three hours, more or less) and I think that I’ll try to do something best, but for the moment is ok.
Thank you SO MUCH
( )karthik January 2nd
hi buddy,
can you send me the psd, its looks great
( )discount web design September 3rd
Thanks for such excellent post. Really informative blog. Keep the good work here and i wish you all the best and success.
( )Negoro September 11th
You are opened my mind!
( )pawel October 3rd
Nice tut. Beautiful and detailed!
( )larry October 8th
how do i make the guidlines. i click on ruler and after ive created a line, it disappears when i try to make another new line
( )Sty*Lisch October 8th
Wow… That´s Magic! =)
Thanks a lot
( )Kim October 15th
Thank you Alvaro! I really learned a lot from your very detailed tutorial. I now have an idea how to start in making layouts. Keep it up!
( )unrealxlife October 23rd
thanks very niceeee
( )legOstaRwArs November 6th
great work!
( )very thanks.
oes tsetnoc November 19th
That’s a wonderful tutorial. Very easy to try and learn by doing.
( )Juan Manuel Ferrand November 23rd
Alvaro, sos un grande!!
( )Gracias por la magia
Mudza November 24th
woow it’s really cool tutorial….i like it so much
( )Nikk November 24th
A-M-A-Z-I-N-G tut dude!!! THANK YoU!!!!!
( )Anton Mur December 5th
Realy great design work!!!
Big thanx for this tutorial…
( )iTropics December 6th
Thanks for that. I thought you will show how to convert the image to HTML/CSS….
Thanks anyway…
( )Alvaro January 16th
check it at nettuts+ http://net.tutsplus.com/articles/news/new-plus-tutorial-convert-a-beautiful-psd-to-html-and-css/
( )mcakir December 14th
hi … perfect tutorial man !
can ı say somethng ? is there you know that how it can do web layouts on photoshop as video tutorial ? if you share, i will be happy
10x again
( )chesanqi January 5th
Beautiful! i love it!
( )Glenn Campbell (South Africa) January 21st
Fantastic. Modified, added flash animation and set to html; have a look at http://www.mediaalliance.co.za/ke/i7/index2.htm ~ since i used css, have added a “day” theme (“Magic Days”) – http://www.mediaalliance.co.za/ke/i7a/index2.htm … use IE to view (both pages under construction) – note flash animation in both headers…
( )Again, awesome tutorial; cloud brushes are INSANE. Inspirational. Very well done.
shane February 5th
Flash effect is quite new
( )HELP January 22nd
If someone can help me with this tutorial and photoshop please add me painkiller_@live.de
)
( )shane February 5th
Nicely done, kudos.
( )