Keep posted
Advertising
This month’s Collaborators
Friends
Tutorials
Getting Quality twitter followers
Have you ever feel the need to get more followers in a social network? Well, most of us have and we cannot excuse for that: it’s human nature to get recognition. Social networks have integrated the relationships and the interactions we have with the technological aspect of our lives, and that’s why we feel the need to use them all day. Read more
Responsive Web Design, most complete guide
If you’ve been working in the web design field for the past couple of years you should know that designing a fixed interface for a widescreen computer is not enough. Most of the clients you’ll be dealing with from now are going to request that their site is not only desktop-compliant but is also optimized for smartphones and tablets. This issue presents the necessity of working with different screen resolutions in order to guarantee that a website looks good in all sorts of devices.
But if the devices’ production continues at the same speed that it has for the past couple of years, the amount of screen resolutions and formats that designers will have to deal with is going to become unbearable. On this article we’ll be discussing one of the most effective solutions to face this problem with a certain easiness, we’re of course talking about responsive web design.
Read more
Amazing jQuery photo slider
What’s up guys?, to continue with our experiment series, our designing and programming team joined forces to create an amazing carousel vintage photo slider with PHP and jQuery. This is definitely a nice photo slider to be applied in different websites so you can showcase your work in a more original way. This tutorial is going to cover the programming part of the carousel (stay close to find out the release time of the design part) so you can learn how we did this fancy photo slider and you can adapt it to your own projects. You can also take a look at the demo to see how it works and download all the source files.
Google Plus, everything you need to know
Yes, we know that the ‘social network’ term is starting to sound annoying, but due the fact that there’s no other term for making reference to those websites where people can interact with people we’re going to stick with ‘social network’ for a little while. Since laughter became XD, to blush =$ and more, the internet has become the number one channel for keeping a permanent interaction with the rest of the world, so know you can talk to any person around the world by just making click.
And is after these premises that the new social project of the almighty Google has been released. Google Plus promises to become the ultimate tool for social engaging and sharing that will change the way we see things. Although is kind of hard to determine how well things are going to be for Plus in a couple of months, we consider that these guys have learned from their mistakes (let’s not forget the big failure of Google Buzz and Google Wave) and Plus will probably turn out to be a successful project for the company.
Read more
Professional Photography course, from newbie to master !
Hundreds of articles have been written about photography, some good and some awful, the truth is that the amount of photography-related information out there is humongous, which makes difficult to separate the goodies from the garbage. Regarding content, some articles discuss the technical aspects of photography, others concentrate in photo editing and becoming a master in Photoshop, while the rest takes the discussion around good practices and the passion that being a photographer represents.
After searching for a while, we found that there’s not an actual photography guide that you can start with, just several mini-articles and photography websites where many complex aspects are discussed, leaving aside the people that’s just beginning on this field and want to find an user-friendly guide to learn all the essentials about photography.
Interested in icon design?, the ultimate (and we mean ultimate) tutorial and guide
Every day we’re surrounded by icons, from mobile devices to electronic transfers, icons are always present to make our life easier. Behind the creation of an icon there’s a complete team of artists and designers that are developing new techniques and styles that people can easily read and visualize.
For those who want to learn all the basics on how to create good-looking and effective icons, Iconshock has published the most complete icon design guide ever, featuring tons of great tips, references and just everything you need to know to become an expert in icon design.
Web design history, a complete journey
Implement a floating configuration panel to DOM elements
If have some notions in web development, then you probably know that Document Object Model (DOM) is the way JavaScript sees its containing HTML page and browser state. Despite the great advances that have happened on this subject, there are certain limitations regarding DOM that need to be fixed through scripts and/or plugins.
Today we like to introduce jQConfigurator, a jQuery plugin created with the purpose of help people implement floating config panels within DOM elements.
Creating patterns/textures (PAT files) in Photoshop
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.
150+ CSS3 tutorials and examples
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.
Create CSS classes and IDs from a single sprite image
As you probably know, sprites are 2D images or animations that are integrated into a larger scene to work as description elements and perform some other functions. Sprites are often utilized to generate classes and ID’s in CSS but making these usually requires more than one sprite image.
Spritebox is an useful tool developed by Gilbert Sinnott that allows you to make CSS classes and ID’s from an unique sprite image, making things much easier for web designers and developers.
Read more
Realistic vintage vector tutorial
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.
Awesome: 10 CSS3 box shadow experiments
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.
One page website, vertical parallax
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.
Mastering shadows in Photoshop, Illustrator and Fireworks, who’s the winner?
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.