How To Create a Clean and Colorful Web Layout – Photoshop Tutorial
In this tutorial I am going to show you how to create a clean corporate layout in Photoshop. The original layout was created by kuntiz from ThemeForest and I want to thank him for allowing me to write this tutorial.
Materials Needed:
Step 1: Create a new document
Create a new document (Ctrl+N) in Photoshop with the size 1200px by 750px. Then select the Gradient Tool (G) and draw a gradient #792700 to #000000 from the top to the bottom of your document.
Step 2: Add some colors to your background
Create a new layer, select the Brush Tool (B), select a soft brush with the diameter 300px and add some colors to your layout. I have used red, orange and blue. Name this layer "color."
Step 3: Add a texture to the background
Now we are going to create a texture for our background. Open in Photoshop the leafs image which you have downloaded at the beginning of the tutorial and move it into your document using the Move Tool (V). Right-click on this layer and select Convert to Smart Object. Then go to Filter > Artistic > Film Grain and use the settings from the following image. Then go to Filter > Pixelate > Mosaic, and again use the settings from the following image. Set the blend mode for this layer to Difference, the opacity to 30% and name it "texture"
Step 4: Create a dark background for the content
Create a new layer, select the Rounded Rectangle Tool (U), set the Radius to 3 pixels and create a rounded black rectangle. Then double-click on this layer to open the Layer Style window and use the settings from the following image for Drop Shadow. Set the opacity of this layer to 70% and name it "black shape."
Step 5: Use groups to organize your layers
Hold down the Ctrl key and select all the layers which you have created until now and then group them (Ctrl+G). Name the group "background."
Step 6: Create more groups
Create a new group (Layer > New > Group) and name it "home." Then create another group inside the "home" group and name it "logo."
Step 7: Add a logo and a tagline
Create a new layer inside the "logo" group. Then select the Type Tool (T) and write the name of your layout using the color #f4f4f4. Double-click on this layer to open the Layer Style window and use the settings from the following image. Then create a new layer and write a tagline using the color #eeeeee.
Step 8: "Sign up" and "login" buttons
Now we are going to create two buttons in the upper right corner of our layout. Create a new group and name it "Sign up | Login." Then select the Rounded Rectangle Tool (U) and create a rounded rectangle like I did. Double-click on the shape’s layer to open the Layer Style window and use the settings from the following image. Set the foreground color to white and use the Type Tool (T) to write the words "Sign up | Login" on your button. Set the opacity of the text layer to 75%.
Step 9: Create a blue line with the height of 1 px
Create a new group and name it "Navigation." Create a new layer, select the Single Row Marquee Tool and click once on your document to create a selection with the height of 1px. Fill that selection with the color #406f94 and delete what is outside of the black rectangle using the Rectangular Marquee Tool (M). Set the opacity of this layer to 40% and name it "Line."
Step 10: Add a gradient to the navigation bar
Create a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did (note: you can use some guides to help you create the selection). Then select the Gradient Tool (G) and draw a gradient #35423e to transparent from the bottom to the top of the selection. Hit Ctrl+D to deselect. Then go to Filter > Noise > Add Noise and use the settings from the following image. Name this layer "gradient" and leave a distance of 1 pixel between the line and the gradient.
Step 11: Write the names of your layout’s pages
Select the Type Tool (T) and write the names of your layout’s pages in the navigation bar. Then double-click on the text layer to open the Layer Style window and use the settings from the next image. The font which I have used is called Greyscale Basic.
Step 12: Create a separator
Now we are going to create a separator. Create a new layer, select the Single Column Marquee Tool and click once on your layout. Then select the Rectangular Marquee Tool (M), click on the "Intersect with selection" button from the option bar and create a selection like the one from the next image. Fill the selection with white and hit Ctrl+D to deselect.
Step 13
Double-click on the layer which you have created at the previous step to open the Layer Style window and use the settings from the following image. Name this layer "line 1."
Step 14:
Duplicate the "line 1" layer (Ctrl+J) and name the new layer "line 2." Select the Move Tool (V) and hit once the right arrow on your keyboard to move this layer 1 pixel to the right. Then double-click on the "line 2" layer to open the Layer Style window and use the settings from the following image.
Step 15: Convert the "line 1" and "line 2" layers into a smart object
Hold down the Ctrl key and select the "line 1" and "line 2" layers. Then right-click on one of them and select Convert to Smart Object. Name the smart object "separator."
Step 16: Create a blue highlight
Create a new layer beneath the "separator" layer. Select the Rectangular Marquee Tool (M), create a selection like the one from the following image and fill it with the color #35423e. Right-click on this layer and select Convert to Smart Object. Go to Filter > Blur > Gaussian Blur and use the settings from the next image. Then go to Filter > Noise > Add Noise and again use the settings from the following image. Set the opacity of this layer to 60% and name it "highlight."
Step 17: Create a mask for the "separator" layer
Click on the "separator" layer in the Layers palette to select it and then go to Layer > Layer Mask > Reveal All. Select the Gradient Tool (G) and draw a black to transparent gradient from the top to the middle of your separator.
Step 18: Duplicate the separator
Hold down the Ctrl key and click on the "separator" and "highlight" layers in the Layers palette to select them. Then select the Move Tool (V), hold down the Alt and Shift keys and then click on your document and drag the mouse. Now you have duplicated the selected layers. Use the Move Tool (V) to move these new layers to the right. Repeat this step and create as many separators as you need.
Step 19: Group all the separators
Select all the "separator" and "highlight" layers in the Layers palette and hit Ctrl+G to group them. Name the group "separators."`
Step 20: Create a button for the active page
Now we are going to create a background for the active menu page to differentiate it from the others. Select the Rectangle Tool (U) and create a rectangle like I did. Put this layer beneath the text layer which contains all the pages names. Double-click on this layer and use the settings from the following image for Gradient Overlay. Then name it "active menu" and set its opacity to 50%.
Step 21: Create the search bar
Create a new group (Layer > New > Group), name it "search" and put it above the "navigation" group. Select the Rounded Rectangle Tool (U), set the Radius to 3 px and create a rounded rectangle like I did using the color #104f59. Name this layer "text field" and set its opacity to 80%.
Step 22: Create the search button
Select the Rectangle Tool (U) and create a rectangle like I did. Put this rectangle in the right side of the search bar. Double-click on this layer and use the settings from the following image for Gradient Overlay. Then right-click on this layer and select Create Clipping Mask.
Step 23: Write the word "search" on your button
Select the Type Tool (T) and write the word "search" using the white color. Set the opacity of this layer to 75%.
Step 24: Create a vertical line for the search bar
Select the Line Tool (U) and create a vertical line using the color #123036. Name this layer "line", put it beneath the "button" layer and move it between the search bar and the button using the Move Tool (V).
Step 25: Create a blue rectangle
Create a new group (Layer > New > Group) and name it "Showcase." Create another group inside this one and name it "background." Select the Rectangle Tool (U) and create a rectangle using the color #219aad. My rectangle is 983 px wide by 273 px height (you may want to open the Info palette - Window > Info – before you create the rectangle, so you can see the exact size of your rectangle). Set the opacity of this layer to 55% and name it "bg4."
Step 26: Add a texture to the blue rectangle
Open in Photoshop the "pixelated blue rectangle" image, move it into your document and put this image above your blue rectangle. Set the opacity of this layer to 55% and name it "bg3."
Step 27: Add a gradient to the blue rectangle
Ctrl-click on the "bg4" layer’s vector mask to select it, then create a new layer, select the Gradient Tool (G) and draw a gradient #56b8e5 to transparent from the bottom to the top of your selection. Then hit Ctrl+D to deselect.
Step 28: Create a smaller blue rectangle
Create a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did. Select the Gradient Tool (G) and draw a gradient #0f2b42 to #2a607f from the bottom to the top of your selection. Then hit Ctrl+D to deselect. Name this layer "bg1."
Step 29: "Sign up" button
Create a new group (Layer > New > Group) and name it "sign up button." Select the Rounded Rectangle Tool (U), set the Radius to 2 px and create a rounded rectangle like I did. Double-click on this layer to open the Layer Style window and use the settings from the following image. Then select the Type Tool (T) and write the words "sign up" using the white color.
Step 30: "Learn more" button
Repeat the previous step to create another button, but this time write the words "learn more" on your button. Then create a new layer, select the Custom Shape Tool (U) and create a white arrow like I did.
Step 31: Create a button in the left side of the rectangle
Create a new group (Layer > New > Group) and name it "left arrow." Select the Ellipse Tool (U) and create a circle using the color #406f94. Double-click on this layer to open the Layer Style window and use the settings from the following image.
Step 32: Create an arrow inside the blue circle
Create a new layer and use the Custom Shape Tool (U) to create a white arrow. Double-click on this layer to open the Layer Style window and use the settings from the following image. Set the opacity of this layer to 50%.
Step 33: Create another arrow in the right side of the rectangle
Repeat the previous two steps to create another arrow in the right side of the blue rectangle.
Step 34: Create a featured image
Create a new group (Layer > New > Group) and name it "image." Put a small image in this group and name the layer "image." Double-click on this layer to open the Layer Style window and use the settings from the following image.
Step 35: Add a shadow to your image
Go to Layer > Layer Style > Create Layer. This will create a new layer beneath the original one with the style of that original layer. Now go to Layer > Layer Mask > Reveal All, select the Gradient Tool (G) and draw a black to transparent gradient from the bottom to the middle of your small image. Name this layer "shadow."
Step 36: Add some text
Create a new group (Layer > New > Group), select the Type Tool (T) and add some text. Name this group "text."
Step 37: Create a white rectangle
Create a new group and name it "content." Create another group inside this one and name it "shadows." Select the Rectangle Tool (U) and create a rectangle like I did using the white color. Name this layer "white shape" and set its opacity to 90%.
Step 38: Add a top shadow
Ctrl-click on the vector mask of the "white shape" layer to select it. Then create a new layer, select the Gradient Tool (G) and draw a gradient #8f8f8f to transparent like I did. Set the opacity of this layer to 50% and name it "top shadow." Then select the Move Tool (V) and hit the down arrow on your keyboard two times.
Step 39: Create two vertical shadows
Create a new layer and use the Rectangular Marquee Tool (M) to create a selection like I did. Then use the Gradient Tool (G) to draw a gradient #8f8f8f to transparent like I did. Add a mask to this layer and use a big black soft brush to mask the center of the shadow. Set the opacity of this layer to 30% and name it "vertical shadow 1." Duplicate this layer (Ctrl+J), name the new layer "vertical shadow 2" and move it to the right.
Step 40: Create a horizontal line
Select the Line Tool (U) and create a horizontal like with the weight of 1 px and the color #aebcc7. Name this layer "line."
Step 41: Add some text
Select the Type Tool (T) and write the content of your layout. You can also use images and anything else you want.
Step 42: Create a gradient for the footer
Create a new group and name it "footer." Create a new layer inside this group, select the Rectangular Marquee Tool (M) and create a selection like I did. Then set the foreground color to #555555, select a big soft brush and paint with it over the top edge of the selection. Set the opacity of this layer to 50% and name it "gradient."
Step 43: Add a line with the height of 1 px to the footer
Create a new layer, select the Single Row Marquee Tool and click on your document. Fill the selection with white and hit Ctrl+D to deselect. Go to Layer > Layer Mask > Reveal All, select a big black soft brush and mask this layer like I did. Take a look at the following image for reference. Set the opacity of this layer to 15% and name it "line."
Step 44: Add some text to your footer
Select the Type Tool (T) and add some text for your footer.
Final Result
578 Comments
Would be good to see some alternative colour use with this tutorial, anyone experimented with different colours? maybe less vibrant for a more corporate feel, think this could potentially be quite a versatile layout :)
Flag as inappropriatethis is amazing tutorial…thanks for sharing this…..really helpful…
Flag as inappropriatehii, im quiet confused i think :L
Flag as inappropriateDont you have to break each thing up and then do it on dreamweaver how are you gnna do that:/
I have created almost same web layout with the help of this tut.
Flag as inappropriateWell done, thank you for inspiration.
Flag as inappropriateThis tutorial was amazingly detailed. I learned more by creating the website via your tutorial than I did in my Graphic Design and Photoshop classes put together. Thank you so much! A very annoying cloud has been lifted off of the intimidating monster that is Photoshop. Thanks again!
Flag as inappropriateisn’t it possible to get the full website link rather than just the home page results? i need to create a full website but i need help on other pages. It would be great if you could add the link for this page so we can find out how it looks with the links?
Flag as inappropriateExcelent tutorial!!!I make same with my hands
Flag as inappropriateThis is a great tutorial but personally because im a beginner and im a uni student I think it would’ve been more useful and helpful if this was a video tutorial and I’d know how to actually create it when something goes wrong or I don’t get it right.
Flag as inappropriateWow! the final outcome is great, luvd it
Flag as inappropriateThanks for the tutorial. This is a great resource that we’ll advice to our intern website designers.
Flag as inappropriatethanks for gr8 layout n tut :)
can u also post HTML conversion, it will be a super learning for us :)
Flag as inappropriateuse CSS/XHTML to convert photoshop mockups into working website…:)
Flag as inappropriateNow we need to know how to convert this to a CSS design.
Flag as inappropriatehelp me make a template that I made in photoshop eh
Flag as inappropriateTo put it on my website ami msn to help me nid_dog2@hotmail.com
Well done,Thanks for inspiration..
Flag as inappropriateThis is a very good beginner tutorial. It was well thought out and really provides a great example to anyone trying to learn web design. From start to finish this is easy to follow and shows how simple steps can be used to develop an effective design. With a little imagination, nearly anyone could follow this to create their own version. This will slice to CSS and HTML very easily. 10/10!
Flag as inappropriateYou are a wonderful person…a God….so many amazing tutorials, so freely given…Mr. Super talent!!!!
Flag as inappropriateIts a nice tutorials, Thanks for your sharing.
Flag as inappropriateIt is so cool…I like this style,thank you for share.
Flag as inappropriatevery nice tutorial! can you set up another tutorial on how you convert this to html using css? thanks!
Flag as inappropriategood
Flag as inappropriateplease send a free course of graphocs desion in my mail adds.I wait for this.
Thanks for excellent tutorial!
Flag as inappropriatevist for basic training of photoshop
Flag as inappropriatehttp://training4free.co.cc/Basic%20training/Basic%20training.html
thanks for your sharing, I LOVE IT!!!!
Flag as inappropriatethanks and nice ..
Flag as inappropriateNice tutorials and its use full to me, thanks for your sharing
Flag as inappropriateExcellent tutorial! Stumbled and also saved on my computer so that I can refer to it when time has come!
Flag as inappropriateThanks for sharing, teaching…
This is a great tutorial. I had to go through it twice because i missed a few steps but finally go the same effect.
Flag as inappropriateNice. Well done!
Flag as inappropriateLooks great but its just an image of a website, not an actual website.. Great for showing ideas though, and a nice tut. Thanks :)
Flag as inappropriateamazing tutorial no doubt. i got chance to take a nap during LOADING OF THIS PAGE.
Flag as inappropriateThanks, Its very easy.
Flag as inappropriatenice tutorial…
Flag as inappropriateAmazing stuff…very helpful…thanks and keep up the great work on the site!
Flag as inappropriateVery helpful, Thanks!
Flag as inappropriatehow to create a clean and colorful web layout in photoshop
Flag as inappropriateExelente, si no se aprende con un tutorial asi de claro, no se aprendera con nada, je je XD no mentiras, racias por compartirlo
Flag as inappropriateReally wonderful Tutorial… but the entire page is graphics, and I believe that means your SEO is limited to only hidden text and maybe a Tag Cloud… IF it gets indexed at all… I’d rather create the background(s) and leave off all the text (less the menu items) and add the text live in CS4, so that all of it can get indexed… If I’m wrong, someone PLEASE correct me!!
Flag as inappropriateHi,
Nice job and thanks for sharing here
thanks
Flag as inappropriateWow……I can’t believe it…awesome….How can I improve my creativity????
I was checking some of the websites and went to the one Josehp Moralles was indicating….well, the theme is pretty lame and the website is half finished…pretty bad work…but I liked the logo at : http://www.myriad.x10hosting.com/vybz.html
I would like to buy a logo there but once again the site disappointed with an incomplete form… I would like to advice u to finish the site before advertising!!!
PS: AWESOME Template!!
Flag as inappropriatenice detailed tutorial.
Flag as inappropriateNICE JOB :)
Flag as inappropriateWow this tutorial is exactly what i was searching for, really looking forward for more stuff from you!
Flag as inappropriateThat Greatest tutorial i have seen thanks alot!!!!!
Flag as inappropriateNice useful tutorial,
Flag as inappropriateGreat tutorial, You are the best……………………………
Flag as inappropriateVery, very nice!!!
Flag as inappropriateExcellent tutorial. I loved it! Thank you
Flag as inappropriateGreat :)
Flag as inappropriatelooOoOoove it :)
Flag as inappropriateExcellent tutorial mate. I have tried to create my own theme but certainly not as good as this.
if anyone wanna check my theme and want to make similar, mail me at Joseph@gmail.com for steps, although a theme like this is inspirational, not mine!!
anyway, check this site: http://www.myriad.x10hosting.com
Flag as inappropriateNice tutorial !
Flag as inappropriategreat guide, but it’d be nice how to plug all of this into Dreamweaver and actually get this live…
Flag as inappropriatepretty sweet stuff!! :)
Flag as inappropriateExelente tutorial… estaba buscando hace tiempo uno así… Haces bien en copartir tan valiosa información, para los que trabajamos de forma empirica el photoshop.
Flag as inappropriateThis is great helpful tutorial for me. Thank you a lot~
Flag as inappropriateAwesome Tutorial – very Informative read & insightful, detailed steps. Thank You for Sharing. Btw, you should check-out http://www.MadMediaMonkey.com
Flag as inappropriateThe tutorial is in great detail which help to learn the web page design step by step
Flag as inappropriateExcellent tutorial about web layout. Great work. Thanks
Flag as inappropriatethank’s,great work !
Flag as inappropriateGreat tutorial. Thanks for sharing this article.
Flag as inappropriatethis is soooooooooooooooooooooooooooooooooo stupid and my teacher is still making me do it
Flag as inappropriateSuperb Tutorial. Thanks for sharing it.
Flag as inappropriatethanks for sharing this is a good tutorial
Flag as inappropriateTANQ so much this is great and i enjoyed that
Flag as inappropriateNice to see this Tutorial…
Flag as inappropriateGood Work
This is what is called: Nice Photoshop Design Tutorial, Thanks for sharing it.
Flag as inappropriatevery cool!! thx.
Flag as inappropriateGreat design!!!
I hope my question isn’t too ignorant but when you design a page in photoshop it is static. Though you have designed buttons, written text, and created labels it is flattened into the overall design. People can not interact with it like a traditional web page…. What program do you use/suggest/recommend to get a functional web page out of what currently is a (very impressive) static design?
Flag as inappropriateI second this I see lots of lovely web desgin tutorials for photoshop, but at the end of the day, it’s a static image/data. How wold you actually create this and publish it as a website where the buttons work, and the data is dynamic, etc?
Many thanks.
Flag as inappropriateI would recommend using Fireworks and Dreamweaver. They are great programs for building a website. To make them dynamic so they are usable, all you have to do is put each button/box/background that you want to be usable in a different document then upload everything into Fireworks/Dreamweaver. There you can rearrange them and add links to certain buttons. You can also use Flash for the featured product section. I would recommend looking up tutorials to help build a website with those programs.
Flag as inappropriateAwesome! Good work kuntiz!
Flag as inappropriateWow i like the first nifty trick with the leafs and the film grain filter :) amazing post
Flag as inappropriateNice design tips, Thanks
Flag as inappropriateAwesome design and great tutorial.keep them coming
Flag as inappropriateVery appealing! Thanks for posting such an amazing tutorial.
Flag as inappropriateVery nice explanation. awesome use of colors. keep up the good work.
Flag as inappropriateSuper interesant tutorial. Felicitari! ;)
Flag as inappropriatenice design
Flag as inappropriateNice tutorial… It comes handy, as I was looking for some effect on layout i’m currently working on…
thanks a lot
Flag as inappropriateGreat tutorial, thanks a lot
Flag as inappropriatewow, really nice, thanks…
Flag as inappropriatethanks great work
Flag as inappropriategreat work. i like it.
Flag as inappropriateNice Web Layout, Tecqunique is very useful.
Flag as inappropriateThanks a lot for design tips…
Great work. Just what we’re after.
Hope you don’t mind, but I’ve commented on your tutorial on by blog
Flag as inappropriate(http://digilarb.blogspot.com/2010/02/distracted-by-pixels.html)
I see myself much more than a programmer rather than a designer, while I sometimes design a simple layout. This kind of guideline gives me a view on how a ‘true’ designer design a layout.
Thanks.
Flag as inappropriateAwesome!
Flag as inappropriateThanks a lot for design tips…
Nice theme and guildline
Flag as inappropriateStuck at Step #9. Can someone please explain it to me?
Flag as inappropriateWow, great tut, thank you for taking the time to write this :)
Flag as inappropriatecan i download this psd please…
Flag as inappropriateYou need pro tuts or something like that. I wish I could to, but I don’t have money or a credit card. :(
Flag as inappropriateExcellent post. Thanks17
Flag as inappropriateExcellent post. Thanks12
Flag as inappropriateThanks for your post , Great post.
Flag as inappropriateawesome! i like it so much i’m using it for my site. made a few change, but kept the overall look. anyone having trouble coding to html+css feel free to email me!
Flag as inappropriateWhats ur email add man?
Flag as inappropriateHave not attempted to throw this into HTML/CSS but was wondering if you had some pointers/tips/etc. Email address?
Flag as inappropriateThe best I have ever seen.
I will be eternally grateful.
Flag as inappropriateGreat tutorial. Very easy to follow!
Flag as inappropriateWHY CANT I SEE ANY OF THE PICTURES =(
Flag as inappropriatethats probably cuz you didnt put the pictures in the root folder
Flag as inappropriateis there a part 2?
Flag as inappropriatevery nice tutorial. definatley one of the best on the web.
Flag as inappropriateone of the best tutorials i’ve seen so far. but where is part 2? from psd to html its very good
Flag as inappropriateits very good tutorials for me its very good& help full
Flag as inappropriateits very good tutorials for me its very good& help full
Flag as inappropriateWhat an excellent tutorial. It was a great learning and was precise too. I just loved the outcome and will make sure to follow all your Photoshop tutorials on PSDBURN
Flag as inappropriatenice man,
Flag as inappropriateI appreciate for the free tutorials but how do i get this into css?
help?????
thanx man..
Pure CSS? It will be a nightmare to you, untill you trow it on the wall. You can make it nice with css and tables. You can try with grid, but… One question: Why on earth make styles to one thing well definitive as a website full of gradients and images and color? If you want make it for css you must think it to css. To apply therefore, and edit or change as well.
Flag as inappropriatei really like the amount of detailing in the layout,
it was helpful
thanks
Flag as inappropriatei really like the amount of detailing in the layout,
it was helput
thanks
Flag as inappropriateGREAT !!!!!
But, I’d like to learn about HTML… I working on a tutorial on the web, but it’s kind of confusing… :S
I’d like to hear from you about it. I know You’ll make it seem so easy !!!
Flag as inappropriateThe best tutorial I’ve ever seen! Lots of techniques, good lookin’ final result. A must for every beginners like me! Thanks a lot!
Flag as inappropriateThat looks great… think I am going to use some elements of this tutorial… thnks
Flag as inappropriateone question why using photoshot instead of fireworks for build webpages?
Flag as inappropriateFireworks is not “the right” option to make websites. Not even the best option to work with images. It is more like a “commodite” to people who develops websites, but doesn’t got that hand in photoshop or other so called designer tools. It comes useful when you have to make some rollovers, slices, maps and little animations, but not the best choice to create and manipulate images.
Flag as inappropriateDear Sibi, don’t know how many pages u have made but converting this one to the regular XHTML&CSS is peace of cake. It takes few hours but it’s not hard…
Flag as inappropriateDear Sibi, don’t know how many pages u have made but converting this one to the regular XHTML&CSS is piece of cake. It takes few hours but it’s not hard…
Flag as inappropriateDamed web on the phone. Posted it to the wrong thread! Sorry.
Flag as inappropriateAmazing. Never knew so much went into the design of one web page. Especially the amount of effort that went into creating a button is mind boggling.
Flag as inappropriateHeya, this tutorial looks good, but I’m stuck at step 2, may I know how you manage to do that nice “gradient” of colors with just the Soft Brush tool with 300px? The end result of mine turned out ugly compared to that shown in the tutorial. :p
Flag as inappropriateThe Best Web Design Tutorial so far!!
I love the outcome. And its detailed!
Flag as inappropriateone of the best tutorials i’ve seen so far. but where is part 2? from psd to html!
Flag as inappropriatevery nice tutorial and a beautiful outcome. will try this as soon as possible. i wonder what my outcome will be.
Flag as inappropriateNiiiice,
Flag as inappropriatebut, i was in trouble when implementing into css :D
By the illustration of the whole steps, everything is very easy. Thus it should ordinarily be.
Flag as inappropriate…mmm idk, a couple parts were a little bit confusing…-_-”
Flag as inappropriateVery Nice. Sleek and smooth and very effective.
Flag as inappropriateBravo.
Great tutorial, a lot of nice technics and touches.
Candy.
Flag as inappropriategreat! Awesome work… Thanks a lot.
Flag as inappropriatethese tutorials are great but i need help with the next step…. scripting and implementing to web with the dynamic factor. please help
Flag as inappropriatevery amazing :D …. tried it and it works :d
Thank YOU
Flag as inappropriatenice tutorial, lots of little nice touches.
Flag as inappropriateThank you for good information
Flag as inappropriateWHERE IS PSD?
Flag as inappropriateThis design looks great. I really love it.
@rahuljin
Flag as inappropriateyou can use the guidlines in Photoshop to devide all elements on the page (as nav, content area, sidebar etc.). Then you have a kind of a grid that you just have to cut step by step and then implement it into your css code – which is a bit of work and needs some css skills.
cheers,
Tim
I just have to say this this is one of the best tutorial websites I’ve visited. I will keep coming back for more!
Flag as inappropriategreat,thanks
Flag as inappropriateGreat Job,,,
Flag as inappropriateso amazing! good.
Flag as inappropriatehey, great layout.. and tutorial is great too…
thank you for sharing this with us….
Flag as inappropriatevery nice thanks..
Flag as inappropriatetoo many things i have learn from this article.very nice job!thanks to share..
Flag as inappropriateVery inspiring, fired up photoshop because of this.
Flag as inappropriateBravo. Very nice tutorial and design.
Flag as inappropriatethank your share
Flag as inappropriateGreat outcome. The tutorial itself is easy to follow but… This site, will not be easily coded in Tabeless CSS. Any tips on making that backgronud scale to the edges of the browsers?
Flag as inappropriateWhat happens if I have a 2000px wide resolution?
very creative
Flag as inappropriateVery complex and detailed tutorial!
Flag as inappropriatenice design…but d main thing is building how do i do dat cos i’m so new 2 d world of web designs
Flag as inappropriateWoW :) Awesome tutorials. Thanks for sharing this nice post.
Flag as inappropriateInformation is very useful
Flag as inappropriateThis is the best website I’ve learned Photoshop from. I have a suggestion though, next time try to put the text explanation before the graphic rather than after.
Excellent Job!
Thanks
Flag as inappropriateThis tutorial was really useful, I learned a lot from it. You’ve done a great work man! Thank you
Hope you the best all the time
Flag as inappropriateThis is an awsome tutorial! The right juice on so many places, thanks alot for the great work.
Flag as inappropriateVery nice, thx
Flag as inappropriateExcellent, i learn a lot!!!
Flag as inappropriateHow do you convert such excellent design into HTML/CSS?
Flag as inappropriateGreat tutorial. Thanks
Flag as inappropriateGreat layout WOW! I LOVE it..
Flag as inappropriatePlease do some more of theese tutorials.
Such a complete tutorial! I wish all tutorials were this great! thanks!
Flag as inappropriatecool what some people already have on it, too bad only a few of them offer it for free
Flag as inappropriateExcellent tutorial! I would be interested in seeing how you create the html for this css included.
Flag as inappropriateGood job… Liked the overall colour-scheme a lot
Flag as inappropriateTHat’s perfect.. but how do a make that a wordpress theme now?
Flag as inappropriateHow i can built a Blogger Template with Photoshop?
Flag as inappropriatethat was soo cool!!!!!!
I have a small question: after building such website/template in photoshop, how is it published? or should I add the links and the other things through website-designing programms like front page or dream-weaver??
could someone guide me to a website that could help me…
thanks
Flag as inappropriatecurious if anyone answered you. I have the same question… “what do I do now?” :)
Let me know if you find anything that shows HOW to slice this up and turn it into an actual webpage.
Thanks
Flag as inappropriateShawn
http://www.youtube.com/watch?v=IKeg1nhe-wE
This is a great tutorial for that.
Flag as inappropriatenice design and tutorial too…
added to my bookmarks…
Regards,
Flag as inappropriateQuickLinkNow
What an in-depth tutorial. Some really nice touches to remember. How have I manged to neglect the mosaic filter!! Expect to see about a million sites based on this tutorial now :)
Flag as inappropriateWow, what an in depth tutorial! This is a great article to learn how to create the design, or just inspiration for a design.
Flag as inappropriateVery useful and well explained tutorial – thanks.
Flag as inappropriatevery good !
Flag as inappropriatevery good !
Flag as inappropriateReally good job, it takes a lot of effort and time to make such a good and detailed in depth tutorial. thanks!
Flag as inappropriateWoow, that’s a tutorial , i loved it so much . it was so instructive and easy to execute , thanks man , you are the best. Don’t keep posting those tut. Thanks again.
Flag as inappropriate¡¡ Excelente !!
Flag as inappropriateGreat tutorial!thanks
Flag as inappropriateIt was beautiful Template and coolest guid! Very detailed tutorial.
Flag as inappropriateThanks
That was really good to follow… do you have any more of these layouty tutorials for Photoshop? Thanks for sharing.
Flag as inappropriateReally good guide! Easy to understand though sometime you left out from top or bottom with some gradients and such but it was easy figuring out since you said “Do as i did”, and you had great pictures showing just how! I made a really nice site of this and learned alot on the way
Flag as inappropriateincredible, really incredible. that is the type of webiste I like. The pixel background is so cool and goes perfectly with the black box there. so nice !
Flag as inappropriateI copied the template now, at least more or less, and would like to try to build it into a wordpress theme
Flag as inappropriateThe advantage of reading such articles is that, at the end you have learned just more than creating the template, instead now you know more than one tricks.
Thanks for writing up this detailed tutorial.
Flag as inappropriateExcellent tutorial! I would be interested in seeing how you create the html for this css included.
Flag as inappropriateVery Good and effective…Thnx!
Flag as inappropriatePlease do come up with more good stuff like this….
nice tutorial…the quality is amazing. I definetely learnt some stuff to implement in the improvement of my site.
Thanks again :)
Flag as inappropriateYes,so cool!
Flag as inappropriateI love this tutorial. I learn a lot. thank you so much.
Flag as inappropriatevery very nice tutorial and wonderful template,pity that it can not be downloaded
Flag as inappropriateMosaic background is fantastic. I’ll try. Another layouts is professional
Flag as inappropriateThanks for this great tutorial. I know that it takes a lot of time and effort for you to do this. I’m currently learning web design in school and this tutorial is helping me to learn some design concepts. Again its a great tutorial but if I could add or request only one thing it would be to include the dimensions that you used for each shaped/layer etc as this would enable me to follow the tutorial more exactly as I ran into problems. Again I want to reiterate that this is a great tutorial and thanks for taking the time to make it.
Flag as inappropriateSuperb……a great tutorial…
do you have another tutorial explaning the conversion of this one into html and css…..that would have help beginners like me….
Flag as inappropriatevery, very nice design, how i can download it?!
Flag as inappropriateLook this is nice and all but some of you don’t know how to work with image maps it seems. That’s programming I wouldn’t suggest mixing the two
Flag as inappropriateThis was a very well-done tutorial providing a lot of great practice in a variety of tools, effects and techniques. Thank you, Ciursă, for taking the time to put it together and Tutorial9 for making it available to everyone.
Flag as inappropriateLove the top layer design with mosaic effect! Kind of got me inspired for an upcoming project I have to work on! thanks for post!
Flag as inappropriateVery good tutorial- thank you!
Flag as inappropriateThanks alot i will try to work on this one
Flag as inappropriateI love this look. Thanks!
Flag as inappropriateThanks a lot, great work..
Flag as inappropriateim love this tutorial very much….
Thx
Flag as inappropriateGr8 Ui but content need little bright but overall it look awesome
Flag as inappropriateLooks very nice! But I’m new to ‘web design’ and don’t understand how to get a website (with php, css and all this stuff) out of this single psd-file. Are there any tuts on this?
Flag as inappropriateLooks very nice! But I’m new to ‘web design’ and don’t understand how to get a website (with php, css and all this stuff) out of this single psd-file. Are there any tuts?
Flag as inappropriateNice color design…
Thank you.
Flag as inappropriateGreat site… full of inspiration, thx
Flag as inappropriateJust amazing. That is one of my favorite tutorials ever.
I want to translate the lesson on my own language.
I hope you don’t mind.
Of course i will put a link to your site in the end of my post.
Best regards !
Flag as inappropriateDobromir Ivanov
Bulgaria
May I ask: do you then place this into Dreamweaver … and how do you add the ‘links’?
Thank you
Flag as inappropriateDiana
thank you so much very nice
Flag as inappropriateI can see the hard word u put in it and the results are amazing.
Thank you!
Flag as inappropriatePerfect in any way !
..will use it for sure, thnx.
Best wishes,
Flag as inappropriateDubrovnik
Hi… I got very much impressed by seein ths tutorial…
Cal u plz mail me all vedio or ths kind of tutorial..
Wil b very thankful to u if u forward asup..
regaurds,
Flag as inappropriateVinay prasad
vshelvankar@yahoo.co.in
Excellent! This layout is so clean and practical. Great job to the designer and to you for the tutorial writeup. Your site truly inspires!
Flag as inappropriateSo cool.
Flag as inappropriatePro.
Flag as inappropriateThis is a great site. Full of inspiration. I love it.
Flag as inappropriateI like post very god
Flag as inappropriatevery nice tutorial. thanks.
please tell me how to slice and use it to make a web page.
Flag as inappropriateVery useful:D thanks a lot.
Flag as inappropriateno its not pointless, which is why the title says web LAYOUT. not creating a website. whats your point.
Flag as inappropriatein the real world the creative makes the picture of the website and then hands off the psd to the techie guys who slice and dice the picture of the website and then type away frantically for a bit, and voila, you have the web site and not just the picture. By the way, when you load a page in your browser, do you shut your eyes and then click about randomly with the mouse? Or is do you look at the site and see that picture first? Its those few seconds before you click or type that the vast majority of people decide to stay on the site, or just go on to another one… so not so much pointless as it is crucial… (rant over)
Flag as inappropriateThank you Ciursă :)
Thanks for the thorough tutorial. I’ll practice it some day.
Flag as inappropriatevery useful tutorial
Flag as inappropriatewow luv it
Flag as inappropriateVery nice layout
Flag as inappropriate@Arkady
It’s not pointless – just slice the elements as the navigation or the header etc. and write some CSS code – this is the way a lot of webdesigners work as far as I know. Design in Photoshop and the programming in CSS and use the image slices from psd file –
So this tutorial is just great if you got the time –
How to create a site out of psd is to find at css-tricks – com.
Perfect tutorial – bookmarked
Heiko
Flag as inappropriateThanks for this post. What great effort and detailed instructions that you’ve put into this post. It’s highly appreciated. It’s very well laid out.
Flag as inappropriateGreat tutorial thanks :D
Flag as inappropriateouuuuuh That’s what i’m talk’in about
Flag as inappropriateCrazy tut
what can i say thnks
merci
grazie
gracias
danke
awesome tutorial….great…. :)
Flag as inappropriateit’s cool…..
Flag as inappropriatei luv it…. step by step and very detail
But what’s the point. It’s not a website. It’s a picture of a website. A non-existent website. It’s pointless.
Flag as inappropriateYou do realize that elements of this or any Photoshop design can be easily used to create your clean, semantic HTML & CSS files, don’t you? Consider this a mockup.
Flag as inappropriateYou have to slice up the “picture”, then export to Dreamweaver or something then code it dummy :D
Flag as inappropriateGreat tut, pretty stuff.
Thanx so much, great tutorial, crystal clear layers and layers groups organization!
Flag as inappropriateluv this :D thanks
Flag as inappropriateWow, really awesome tutorial, very well explained!!
Flag as inappropriateGrants!
Amazing tutorial and beautiful design. Thanks for writing this.
Flag as inappropriateWhat a great post! I have bookmarked it. It is a very detailed and informative tutorial. This will be helpful not only for the students and casual designers, but also for the professionals who have problem with color management. Can anyone give detailed information about ICC profiles?
Flag as inappropriateGreat tutorial man!
Flag as inappropriateReally step by step. . .
Thanx a lot!
Super cool :D Thanks
Flag as inappropriateBut you aren’t able to really use the things for a webpage, right?
(I am a noob, a big one)
Flag as inappropriateYes you can all you have to do is slice it in photoshop then code, its a lot of work but its worth it!
Flag as inappropriateOfcourse you can, this is how to make a web template. Just cut it up into parts and code it
Flag as inappropriateHi,
you wanted to make a tut about these screenshotimages like that one on the top…
when do we get this? :)
Flag as inappropriategood and simple, thank you for sharing
Flag as inappropriateReally complete and…what to say much than just thank you.!
Flag as inappropriateNot only a great tutorial but PRECISE to the very last detail, And when sometimes some of us are not that great with color management or other bits and a tutorial goes this far into every detail, it’s a bless and an invitation to relax and enjoy. Very nice design and harmony.
Flag as inappropriateA couple of days ago I found myself needing to design a back-end for some of the websites I’ve designed and to do so quickly I used your tutorial. I’ll sure link back to this post in my back-ends.
Thanks a lot!
very excellent tutorials…super…I just gone through it. Thank you..
Flag as inappropriateAwesome tutorial! thanks
Flag as inappropriateWow.. Cool tutorial. Thank you.
Flag as inappropriateGood Job ! :)
Flag as inappropriateHi, that’s very good…
Flag as inappropriateGreat tut!
Would it be possible for you to write tut strictly connected to this one? What I mean is: how to code this particular design?
It could be like two part tut: first how to design, then second how to code it :).
Flag as inappropriateFantastic insight into brilliant design. Really is a nice design layout adopting the current trends. Helps dramatically with the process. Thank you.
Flag as inappropriateyou are my hero
Flag as inappropriategreat ideas
Flag as inappropriateawesome work :)
Flag as inappropriate..some great new ideas in some of those design elements! thanks!! :D
Flag as inappropriateyou should see this :)
Flag as inappropriatehttp://holdfire.net/
Wow. Really great tutorial. You’ve outlined each step so well, it would hard to match that quality!
Thanks for laying out all the steps and explaining everything for someone who doesn’t have that much creativity and foresight :)
Flag as inappropriateLooks great!
Stunning! Love it!
Think we will use something like this for our Intermediate Design students!
Love to see how you then turn this into HTML/CSS
C
Flag as inappropriateThat’s cool.Well,how can I get the PSD file?Thank you!
Flag as inappropriateYou can purchase the .psd file from Theme Forest. Here is the link http://themeforest.net/item/griminati-business-website-layout/32173
I know that usually all the source files are available to download for free here, at Tutorial9, but this one makes an exception because it is for sale on Theme Forest.
Flag as inappropriateOmg, you are really masters in potoshop, im so confused, jajaa…i try to follow this tutorials, is really impresionant, high level of design…
Flag as inappropriatewhat font is the logo ? I really want to know it looks great with it
Flag as inappropriateThat font is from the Futura Family http://www.linotype.com/472/futura-family.html
Flag as inappropriatevery well done, I love the simplicity and thoughtfulness to details.
Flag as inappropriateThanks for the tutorial!
Flag as inappropriatewow! thank you for posting… amazing tutorial…
Flag as inappropriatePFS. Pretty Freakin’ Sweet. I need to start messing around with Photoshop more. :-(
Flag as inappropriateFreakin’ beautiful, thank you so much for this tutorial.
Featured here: http://www.presidiacreative.com/best-of-the-web-27/
Flag as inappropriateNice tutorials. Thanks for sharing it
Flag as inappropriateHey this tutorial is really good, and am sure everyone must be saying that but I some how feel that we tend to get stuck with one standard pattern of design (in terms of structure and layout) not cause its good but its safe. And to make it look good and different play with the colors.
Well its okay even then, but then why can’t design be made from the point of view that its practical.
So that irrespective of the Browser or Machine or the internet speed you have a nice, beautiful, usable and fast loading page.
Being an designer I think execution is equally important. I would have been like the others but the truth is, such designs are good only for a select audience. Design is a process that defines a solution to help people achieve their goals.
So what use is this design if I have to wait for 30 seconds for the page to load.
Bottom line I don’t mean to criticize, but am just saying why cant we create simple designs that on their own are beautiful and serve the purpose.
Having said all this, I still appreciate the author’s effort and work in making and posting this work.
Flag as inappropriateAwesome tutorial
Flag as inappropriateAwesome tutorial, lots of great techniques shared.
Flag as inappropriateso much to learn from you guys! i loved the way the separators were created in the menu and how the three columns were made.. sometimes these two are really confusing for me..
Flag as inappropriateWhy would I want to replicate what you have already done? Reverse engineering doesn’t aid creativity.
Flag as inappropriateThanks for the post anyway.
It’s a tutorial to give someone the basic idea of how to, not to gear them to duplicate someone else’s work.
Flag as inappropriatewow – you’re dumb!
Flag as inappropriateGreat tutorial and design, but do you have a tutorial on how to export that design and optimize and code it so it can be used as a site?
Flag as inappropriate@Shawn,
You can use slices.
Slice your design up using PhotoShop or Fireworks!
Fireworks is awesome to do this in.
Good luck
Flag as inappropriateDennis
No good technique. Go and learn html, css…
Flag as inappropriateIf you want to learn how to slice your design and export it, check out this tutorial: http://www.youtube.com/watch?v=Bo0YDe9KzsU
The guy has a cool Aussie accent too, lol.
Flag as inappropriateI like it, Its a nice Tutor, but I dont know how to apply it to my website, need tutor please..Thanks
Flag as inappropriate@Kalyan – It is a tutorial. It have only show the technic. Wich result you create is your part.
Flag as inappropriateLooks really good, I like the colors. I just saw the Griminati layout on Theme Forest. I’m impressed!
Flag as inappropriateReally nice design, it’s ironic because I was just looking at this template on Theme Forest.
Flag as inappropriateOR you could use the approach of Google.
Step 1: Avoid all of this graphic design crap, and use plain html with standard colors and fonts that people are familiar with and like.
Step 2: Provide something actually useful on your site
This whole article (and the graphic design “industry” (scam)) is nothing more than a temporary victory of style over substance.
Do you not understand one of the big reasons why windows has been successful, is the consistent look and feel of applications. We don’t need or want a whole new set of revolting colors and fonts for each stupid web site we visit.
Flag as inappropriatestyle over substance? why not a comfortable balance between the two? the style adds a touch of individuality to the presentation of a website. I like being able to differentiate the factors between two decisions.
Flag as inappropriateYou, sir are an idiot. Graphic design is a scam? Almost everything you see was created my a graphic designer. you know how dull your world would look if everything was white and black, white backgrounds and black text? Its the internet, business’s DO\ create clients with excellent online websites. Your an idiot. Don’t comment on graphic design tutorials.
Flag as inappropriateNice!
Flag as inappropriateI like the design up to the header.. but I feel that the body content part (News.. Our Services) looks incomplete.
Is it just me?
WOW. Honestly, this is the best tutorial I’ve EVER seen regarding this. Lovely. Just wonderful. Hey, you think I could pay you to make something for me? I’m actually serious :) I would love to have one of your grand creations for my website (not the blog, but my actual site). I’ll be around :)
Flag as inappropriatehttp://www.tutorial9.net/wp-content/uploads/2009/06/corporate-layout/step9.jpg
Flag as inappropriatePSDBurn or Griminati? ;p
The author of this tutorial is the owner of PSD Burn ;) (see author bio) He must have forgotten that step. Good catch!
Flag as inappropriatethis is an pretty good tutorial nice work and thanks a lot for it!
Flag as inappropriateWoow super work!
Flag as inappropriateI like this tut :)
very nice
Flag as inappropriatevery nice and detail tutorial !!
GREAT!!
Flag as inappropriateThank you SO much for this WONDERFUL tutorial!!! I’ve run across a few that I’ve tucked away, but this is clean and concise – KUDOS!
Flag as inappropriateGood tutorial. I design touchpanel templates and I’m always looking for tips that will help me design good looking background images. This has some great inspirational ideas in it, thanks!
Flag as inappropriateThanks a lot for this nice tutorial. I love this colorful web layout. You have explained it step by step and easy to understand. Thanks again.
Flag as inappropriateAlso, I would like to know, how to make Slicing and coding for this layout. Thanks.
Wow!
Flag as inappropriateGreat job I love it!
Excellent Tutorial, The Final result is really good
Flag as inappropriateGreat awesome tutorial!!
Flag as inappropriateHow to publish this nice web layout to the WEB [html]?
Anyone wanna help?
Great tutorial with some brilliant attention to detail! It’s the small things that make a difference!
Good job :)
Flag as inappropriatenice and colorful :) good work
Flag as inappropriatevery useful tutorial,Thanks.
Flag as inappropriatenice tutorial, but it would be nicer if you would create a tutorial about: how to code this design for a template….. just a idea
Flag as inappropriatetank you for this education :)
Flag as inappropriatewow the outcome is fantastic i will be giving this ago:)
Flag as inappropriateGreat layout thanks
Flag as inappropriateClearly guideline :D
Flag as inappropriatewow!!! Step by step! Wonderful!
Flag as inappropriatethanks, this is a great design!
Flag as inappropriatei’d like to see how it will be sliced up and implemented in a functional page…
yeah, now the actual part of creating a website is the coding.
Flag as inappropriateThis is Awesome! Thx!
Flag as inappropriateGreat tutorial. While I may not want to make a replica of the result it does teach quite a few useful techniques.
Flag as inappropriateFANTASTIC tutorial! I’ve been a huge fan of this site and the resources offered here for a while but this really took things to the next level.
I can’t believe you give this stuff away for free! Some of the things I’ve learned on this site aren’t even covered in $50 books!
Thanks for all the fantastic work! :)
Flag as inappropriateIf you were trying to gather sympathy about your use of Windows… well, you succeeded.
Flag as inappropriateNICE Tuturial, Great Job, very Use full, Thanks
Flag as inappropriateI really like the design and tutorial however I do not think this is corporate as suggested by the title on the image.
I’d love to see someone take a real stab at producing a corporate website design. A corp website has to deliver product messaging for a huge array of products, it has to convey the business, it has to be engaging and has to provide a look & feel which is transferrable to all tiers of information on the site.
Flag as inappropriateWOW i use dreamweaver but this is my first to see a tut for web design in photoshop and you did well than dreamweaver.
Flag as inappropriateThanks and we all hope you’ll bring more great tut like this one :)
Hi nice tuts!
can I use your tutorial and create a corporate web template using GIMP?
Flag as inappropriatecool! Im looking this one.. Thank you so much!
Flag as inappropriateAnybody knows the font name used for the logo in this tutorial ?
Flag as inappropriateThe author can correct me if I’m wrong, but it appears to be from the Futura family – perhaps Futura SB?
http://new.myfonts.com/fonts/efscangraphic/futura-sb/
Flag as inappropriateI hope there will be a tutorial on how to make it fully functional soon… AWESOME TUTORIAL though!
Flag as inappropriateFantastic tutorial, big thanks.
Flag as inappropriateWonderful tutorial very useful and detailed.
Flag as inappropriateAbsolutely amazing tutorial especially for beginners. Great thanks!
Flag as inappropriateFantastic. Absolutely Fantastic!
Flag as inappropriateReally solid tutorial. Thanks!
Flag as inappropriateSorry for my question but I’m a newby in photoshop design world. My question is simple : what was the name of the logo font ?
Flag as inappropriatethis is an amazing tutorial… very clean and professional looking! I bookmarked it for future client use… thanks!
Flag as inappropriateNice, I really like that style, very trendy and neat.
;)
Flag as inappropriateWow, it’s really nice.
Is there going to be a second part on how to create the HTML/CSS?
cheers
Flag as inappropriateWatch this video and you’ll understand how to do it: http://www.tutvid.com/tutorials/photoshop/tutorials/slicingALayout.php. Good luck!
Flag as inappropriateGreat tutorial.
Will be sure to try it out.
Ed
Flag as inappropriatevery nice tutorial :)
Flag as inappropriatethanks
Nice tutorial, but it would be much nicer to have a screen-cast to accompany it.
It’d be also nice to explain why you chose some of your design elements (like colour etc…), rather than do this, do that.
Flag as inappropriateSome tutorials on the design process would definitely be nice :) I think Ciursa Ionut was focusing on showing how to recreate this layout that is being sold on ThemeForest.net, but in the future it would be nice to have a balance between technique and process.
Flag as inappropriateI love the outcome. Very well explain tutorial. 5/5!
Flag as inappropriateThanks, very nice tutorial!
Flag as inappropriateGreat tut! I’m just wondering how you can upload this to the real web to actually use this? Any programs suitable for that?
Flag as inappropriateI didn’t try to create one similar,but it will be usefull for my webpage desings in future.
I didn’t know so far how to create a film grain.
And overall it looks profy.
Nice work !
Flag as inappropriateBeautiful, thanks so much man for this tutorial, it helps so much! keep the beautiful work :]
Flag as inappropriateAwesome tutorial! thanks for this! I might take some of the tips here away with me and use them on my new portfolio website!
Thanks guys!
Flag as inappropriateNice tut. Thanks.
Flag as inappropriateGreat tutorial
Flag as inappropriatecool. thanks
Flag as inappropriateVery nice! Thank you.
Flag as inappropriateThis tutorial is awesome..
Flag as inappropriateWell written and the result looks really cool, thanks!
excellent tutorial! i really dig the background ;)
Flag as inappropriateI’ll try this out. Thank you so much, Ciursă & Tutorial9! :)
nice tutorial!
Flag as inappropriatevery helpful tutorial and neat post thank your for sharing your idea
Flag as inappropriatea very very good job, it’s nice to learn from you
Flag as inappropriatei’m an old man newbee in design like this,
but very likely to learn.