Comments on: Designing a highly-professional website, from the sketch to the code http://wegraphics.net/blog/tutorials/designing-a-highly-professional-website-from-the-sketch-to-the-code/ Premium vectors, textures and Photoshop brushes Sun, 20 May 2012 20:36:05 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: virgilio vega http://wegraphics.net/blog/tutorials/designing-a-highly-professional-website-from-the-sketch-to-the-code/#comment-13616 virgilio vega Sun, 20 May 2012 13:08:47 +0000 http://wegraphics.net/?p=3717#comment-13616 I am following this tutorial, nice, but not really explanied step by step for beginners :( I am following this tutorial, nice, but not really explanied step by step for beginners :(

]]> By: Linh http://wegraphics.net/blog/tutorials/designing-a-highly-professional-website-from-the-sketch-to-the-code/#comment-12984 Linh Mon, 05 Mar 2012 07:11:31 +0000 http://wegraphics.net/?p=3717#comment-12984 Hi piervix, I'd just want to say that this is such an amazing tutorial. I have always wanted to learn how to build website but have never found time to follow a formal course. And then I stumble upon your wonderful site. It's such an incredible feeling to see the finished website. I have learnt so much from your tutorials.Thank you very much for sharing this detailed guide. While following your tutorial, there's a few glitches that I haven't seen anybody mentioned yet. 1, For the slider, I got this error where the images were chopped up into square box and these boxed piling on top of each other. After trying out different stuff, I've finally found that I need to add this line into the Slider section. .nivo-box { display:block; position:absolute; z-index:5; } 2. For the credits part, I got the same result from the Photoshop design by making the a part of instead of seperating by itself. If you have time I would love to hear what you think about these 2 adjustments that I found for the code. It will help me improve at coding website. Once again, thank you very much for sharing this tutorials. Hi piervix, I’d just want to say that this is such an amazing tutorial. I have always wanted to learn how to build website but have never found time to follow a formal course. And then I stumble upon your wonderful site. It’s such an incredible feeling to see the finished website. I have learnt so much from your tutorials.Thank you very much for sharing this detailed guide.

While following your tutorial, there’s a few glitches that I haven’t seen anybody mentioned yet.

1, For the slider, I got this error where the images were chopped up into square box and these boxed piling on top of each other. After trying out different stuff, I’ve finally found that I need to add this line into the Slider section.

.nivo-box { display:block; position:absolute; z-index:5; }

2. For the credits part, I got the same result from the Photoshop design by making the a part of instead of seperating by itself.

If you have time I would love to hear what you think about these 2 adjustments that I found for the code. It will help me improve at coding website.

Once again, thank you very much for sharing this tutorials.

]]> By: Kim Jun Hong http://wegraphics.net/blog/tutorials/designing-a-highly-professional-website-from-the-sketch-to-the-code/#comment-12310 Kim Jun Hong Tue, 27 Dec 2011 04:59:31 +0000 http://wegraphics.net/?p=3717#comment-12310 Wow. Amazing. Professional! Wow. Amazing. Professional!

]]> By: John http://wegraphics.net/blog/tutorials/designing-a-highly-professional-website-from-the-sketch-to-the-code/#comment-11262 John Wed, 05 Oct 2011 11:57:42 +0000 http://wegraphics.net/?p=3717#comment-11262 Pretty nice tutorial! I am planning to redesign my blog and your tutorials and your website in general are a great source on inspiration for me ( in a good way :) ) Pretty nice tutorial! I am planning to redesign my blog and your tutorials and your website in general are a great source on inspiration for me ( in a good way :) )

]]> By: Kellsie http://wegraphics.net/blog/tutorials/designing-a-highly-professional-website-from-the-sketch-to-the-code/#comment-11174 Kellsie Thu, 29 Sep 2011 05:16:29 +0000 http://wegraphics.net/?p=3717#comment-11174 Call me wind because I am absotluely blown away. Call me wind because I am absotluely blown away.

]]> By: Eddie http://wegraphics.net/blog/tutorials/designing-a-highly-professional-website-from-the-sketch-to-the-code/#comment-4715 Eddie Wed, 15 Sep 2010 00:20:08 +0000 http://wegraphics.net/?p=3717#comment-4715 Thank you so much! I was going about it in a completely different way. This will help me a lot with future button designs. Thanks again! Thank you so much! I was going about it in a completely different way. This will help me a lot with future button designs. Thanks again!

]]> By: piervix http://wegraphics.net/blog/tutorials/designing-a-highly-professional-website-from-the-sketch-to-the-code/#comment-4642 piervix Fri, 10 Sep 2010 15:23:03 +0000 http://wegraphics.net/?p=3717#comment-4642 Yes Eddie, you have to create the rounded rectangle adding the following style: - Inner shadow: --- Blend Mode: Multiply (black); --- Opacity: 20%; --- Angle: -56°; --- Distance: 1px; --- Choke: 0%; --- Size: 2px; - Gradient overlay: --- Blend Mode: Soft Light; --- Opacity: 65px; --- Gradient: from black to white; --- Style: Linear; --- Angle: 90°; --- Scale: 120%; -Stroke: --- Size: 1px; --- Position: Inside; --- Blend Mode: Normal; --- Opacity: 100%; --- Color: white; Yes Eddie, you have to create the rounded rectangle adding the following style:

- Inner shadow:
— Blend Mode: Multiply (black);
— Opacity: 20%;
— Angle: -56°;
— Distance: 1px;
— Choke: 0%;
— Size: 2px;

- Gradient overlay:
— Blend Mode: Soft Light;
— Opacity: 65px;
— Gradient: from black to white;
— Style: Linear;
— Angle: 90°;
— Scale: 120%;

-Stroke:
— Size: 1px;
— Position: Inside;
— Blend Mode: Normal;
— Opacity: 100%;
— Color: white;

]]> By: Sebastiano http://wegraphics.net/blog/tutorials/designing-a-highly-professional-website-from-the-sketch-to-the-code/#comment-4635 Sebastiano Fri, 10 Sep 2010 08:18:00 +0000 http://wegraphics.net/?p=3717#comment-4635 Hi Eddie, After created the rounded corners rectangle, it's all about blending options. Play with a soft inner shadow. Decrease distance, size and opacity. Hi Eddie,
After created the rounded corners rectangle, it’s all about blending options. Play with a soft inner shadow. Decrease distance, size and opacity.

]]> By: Eddie http://wegraphics.net/blog/tutorials/designing-a-highly-professional-website-from-the-sketch-to-the-code/#comment-4625 Eddie Thu, 09 Sep 2010 21:20:36 +0000 http://wegraphics.net/?p=3717#comment-4625 AWESOME tutorial! I appreciate this so much! I just wanted to ask, how did you get that engraved look in the navigation? I couldn't get the same, elegant look that you achieved. I tried for a little while, but I just couldn't make it look nice. Any tips? AWESOME tutorial! I appreciate this so much!

I just wanted to ask, how did you get that engraved look in the navigation? I couldn’t get the same, elegant look that you achieved. I tried for a little while, but I just couldn’t make it look nice. Any tips?

]]>