Design and Development tuts - TutorialShock

Tutorialshock joins Webdesignshock

TS Editorial — Tue, 02 Aug 2011 20:37:30 +0000

Hello folks, today we have an important announcement to make. After a year of being released, Tutorialshock has been merged with our sister page Webdesignshock, so from now on you can find all the best design and developing tutorials at www.webdesignshock.com (short address www.designshock.com). Please update your links:

New RSS

New RSS by Mail

New Facebook page

New Twitter

We like to thank you all for the constant support and feedback because without your opinion this site would’ve never grown as fast as Tutorialshock did, registering thousands of visits every day and being featured in some of the most important design blogs around.

Continue reading: Tutorialshock joins Webdesignshock

Best jQuery blogs to always keep within your RSS

TS Editorial — Tue, 03 May 2011 09:42:47 +0000

For those who are not very much into web development, jQuery is a popular cross-browser JavaScript library designed specifically to simplify the client-side scripting of HTML. jQuery was released in January 2006 by John Resig and is currently being utilized by over 31% of the 10 K most visited websites, thus jQuery has become the most popular JavaScript library nowadays.

One of the best things about jQuery is its OpenSource condition and the fact that is dual-licensed under the MIT License and the GNU General Public License V2, thanks to these two aspects, every developer can generate their own jQuery plugins and send them directly to the JavaScript library. Now that we have exposed blatantly our love towards jQuery, we like to offer you a grand compilation of blogs and websites where you can find a lot of information about jQuery, including new plugins, good practices and reviews, let’s see what you think about these places.

Continue reading: Best jQuery blogs to always keep within your RSS

Creating patterns/textures (PAT files) in Photoshop

TS Editorial — Thu, 14 Apr 2011 08:45:59 +0000

When we’re working on a new design, whether if this is a website design, a flyer or even a logo, we usually like to incorporate textures to the process; textures can be achieved in 2 basic ways: Real-life textures or digital. Real-life textures are regularly taken from photographs and subsequently digitalized for being used. As for digital textures, they are created directly in graphic programs such as Photoshop and Illustrator, these textures have the advantage of being squeaky clean when they’re made by a pro.

On this article we’re going to study the creation process behind digital patterns in Photoshop, from its construction to the exporting as PAT files. You will also find some pretty cool examples of digital textures in web design.

Continue reading: Creating patterns/textures (PAT files) in Photoshop

150+ CSS3 tutorials and exercises for web developers

TS Editorial — Wed, 06 Apr 2011 08:18:26 +0000

There’s no doubt that 2011 can easily become the year of CSS3. In only the first months we have seen the appearance of IE9 and the highly anticipated Firefox 4, both of these browsers offer lots of possibilities that they did not provide in the past, being one of them CSS3 support of course.

On this countdown we have gathered an extended list of CSS3 tutorials that vary from really simple articles where you can master all its main properties and then more advanced tutorials filled with magic that creates astonishing graphics, animations and interactive elements that were impossible to do a couple of years earlier. We have included all sort of tutorials, some of them will guide you through the main CSS3 properties, others will teach you how to make things that only graphic programs were capable of previously; finally, we will be presenting an special segment of tutorials that will show you how to take this language towards epic proportions.

Continue reading: 150+ CSS3 tutorials and exercises for web developers

How to make a realistic vintage typewriter in Illustrator

TS Editorial — Thu, 24 Mar 2011 08:57:15 +0000

Hello friends, did you guys enjoyed our programming tutorial on how to make a nice typewriter contact form?, well if you nailed that one now you’re probably wondering about the design itself, because it’s useless to have the code if you can’t apply it to a truly brilliant design. Don’t panic because now the second part of the tutorial has arrived and we’re about to show you how to make a great realistic typewriter with Adobe Illustrator, so fasten your seat belts and let’s go.

Continue reading: How to make a realistic vintage typewriter in Illustrator

Advanced (yet awesome) pure CSS3 boxes without using images

TS Editorial — Fri, 11 Mar 2011 08:04:52 +0000

As we have seen during these past few months, CSS3 and HTML5 have demonstrated that designing is now possible without using graphic programs and relying entirely on code. On today’s tutorial we will show you how to make the fascinating set of frame boxes featured in ThemeShock using pure CSS3 and achieve in the process something that can easily look as any Photoshop work. It’s important to state that these boxes look flawless in Safari and quite great in Chrome, so we suggest you to use either one of these browsers to check them out, now let’s begin this tutorial.

Note: This tutorial has been upgraded from its original version thanks to our friend Sven from Advanced Simple who sent us a solution to make these boxes work with Firefox 4, now you can find the improved code within the tutorial.

Continue reading: Advanced (yet awesome) pure CSS3 boxes without using images

jQuery and CSS single page portfolio, a vertical parallax navigation experiment

TS Editorial — Mon, 28 Feb 2011 09:50:50 +0000

Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system.

On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. There are many ways that can help you achieve this effect, we chose to explore one of these methods that utilize the popular jQuery library; beyond serving as a programming exercise, you can use this effect to create a beautiful single page portfolio, which is something quite popular these days among designers. On this tutorial you will find both the logical part and the programming section, so you can understand the mechanism of this page and then proceed making your own Nike-like navigation, now let’s get it started.

View Demo
Download Source

Continue reading: jQuery and CSS single page portfolio, a vertical parallax navigation experiment

Mastering shadows in Photoshop, Illustrator and Fireworks, who’s the winner?

TS Editorial — Mon, 14 Feb 2011 20:55:15 +0000

Shading has been a vital part of art and design since ever, because it’s the way for people to actually be capable of emulating light and 3D environments within a 2D workspace, whether if it is on traditional techniques (painting, airbrushing, etc.) or digital work. Many times the designers stick to a single way of doing things and so they tend to forget or even to leave unexplored further methods that might be even more effective that the ones they defend, this statement made us think about the many different ways you can create shadows in graphic / web design.

We have taken the 3 most popular graphic programs utilized by graphic designers to do all their digital work, specially web interfaces: Adobe Photoshop, Adobe Illustrator and Adobe Fireworks. We have executed a series of tests to find out the different types of shadows that you can make in these programs and then we compared and figured out which technique works better on each program, so now we like to offer you the results of our research.

Continue reading: Mastering shadows in Photoshop, Illustrator and Fireworks, who’s the winner?

Vintage typewriter: The sexiest jQuery contact form ever

TS Editorial — Mon, 31 Jan 2011 12:42:29 +0000

Hello friends, on today’s tutorial we will take a step aside of our classical design tutorials and will be focusing more on the programming part, we’re about to show you how to develop an awesome typewriter experiment with all the primary functions fully operational thanks to the mighty power of jQuery and CSS. But don’t think that this is pure crazy experimentation, because this typewriter can actually be utilized as a brilliant contact form to place on your different projects. The tutorial will guide you across the different programming stages, so please set your Dreamweaver, Notepad++ or whatever media you utilize and let’s begin.

View Demo Download Source

Continue reading: Vintage typewriter: The sexiest jQuery contact form ever

TutorialShock’s revamped design, a quick review

TS Editorial — Wed, 26 Jan 2011 17:57:40 +0000

2011 begun just a couple of weeks ago and we’re already starting to witness how many websites are redesigning their pages or at least making subtle changes to them and well, TutorialShock has decided to join the tendency by presenting the revamped version of our website, a new look that people will be seeing throughout this entire year, with even some pretty cool improvements during the next few months.

We’ve made a huge readjustment of the different design elements that configure the layout of TutorialShock, including the header, slider, the content section, the typeface and something pretty cool, the Shock community has just introduced their new superhero that will fight for the pixel justice

Continue reading: TutorialShock’s revamped design, a quick review