TUTORIAL

  • Code School + Noupe: Claim Your Complete Sass Course for Free

    Recently we teamed up with the nice folks over at Code School to offer you a comprehensive course on how to use Sass effectively. Sass is a CSS preprocessor that makes coding style sheets a whole lot easier and the sheets themselves much more maintainable. “Assembling Sass”, that’s the title of Code School and Noupe’s free offering, explains the basics of how to enter the world of structured CSS in an entertaining, yet profound manner. Even though “Assembling Sass” is definitely worth paying for, Noupe readers can claim lifetime access to this course for free. You have to be quick, though…



    Read more 
  • Ways to embed a Clickable SVG-Logo into Your Website

    Save as SVG with Illustrator

    With the growing number of screen resolutions, devices that support an internet connection (desktop computer, laptops, but also tablets, mobile, TVs, and even your fridge someday), flexibility and scalability has become more and more important for websites. With the new arrival of the Macbook Pro Retina, this went a step further and brought an HiDPI display that was unknown to the market. This means a whole new challenge for web designers who have to find new ways to handle and make images size more flexible to avoid blurry rasterized effects. In this article, we will see how the SVG-format can help us solve this challenge, using an everyday example of a website header with a clickable logo.



    Read more 
  • Get Your Form On: Modern Web Forms Tutorials

    This article is designed to show you (through tutorials) how to create and better understand CSS forms. With a proper understanding of each element (radio buttons, checkboxes, textareas ..), CSS know-how, a little patience and some creativity you can create beautiful and appealing forms.



    Read more 
  • Adobe Illustrator Tutorial: Create a Set of Sleek Web Ribbons

    In the following Adobe Illustrator tutorial you will learn how to create a set of sleek web ribbons. We’ll start with two simple shapes and some basic masking techniques. Next, using a simple rectangle and some simple vector shape building techniques we’ll create the overall ribbon shape. Once we have the starting shapes we’ll continue with the smaller parts. Using some Pathfinder options, several Warp and Gaussian Blur effects plus some basic…



    Read more 
  • Adobe Illustrator Tutorial: Create a Simple Drop-Down Menu

    In the following Adobe Illustrator tutorial you will learn how to create a detailed web element, a simple drop-down menu. We’ll start with a bunch rectangles and simple paths, some basic vector shape building techniques and the Rounded Corners effect. Once we have our starting shapes we’ll continue with the colors. We’ll use multiple fills and strokes along with the Drop Shadow effect and some simple blending techniques. Finally, we’ll add the text. Let’s get started.



    Read more 
  • 3D Text Effects: Ultimate Collection of Photoshop Tutorials

    Typography is not just about the arrangement and placement of letters and words, rather it has become a field of art where artists can express themselves solely through the use of different styles of fonts with varying sizes. Typography has continued to expand as an art, though one must always heed the design principles behind it. Then one finds themselves freer to explore the more artistic sides of this element.



    Read more 
  • Adobe Illustrator Tutorial: Create a Detailed Dynamite Illustration

    In the following Adobe Illustrator tutorial you will learn how to create a detailed dynamite illustration. We’ll start by turning some plain text into a symbol, and by making some simple rectangles. Once we have our starting shapes, we’ll continue with some Extrude&Bevel and Warp effects plus some Pathfinder options along with a bunch of basic blending techniques. For the final touches we’ll use some complex linear gradients and some blur effects.



    Read more 
  • HTML5 Tutorials for Keeping Your Design Skills Tight

    With the growing number of HTML5 tutorials available to help designers and developers get a better handle on this language, it can get a bit tricky sorting through them to find what you are truly looking for. And as the capabilities of this language expand, it is important to keep up with the many ways to harness the full power of HTML5. Today, we hope to help you on that journey.



    Read more 
  • Adobe Illustrator Tutorial: Create a Detailed Scanner Illustration

    In the following Adobe Illustrator tutorial you will learn how to create a detailed scanner illustration. We’ll start with a bunch of simple shapes, some basic vector shape building techniques, several effects and the round any corner script. Once we have our starting shapes we’ll continue with some Pathfinder options, several new effects plus some basic masking techniques. For the final touches we will use some simple blending.



    Read more 
  • Adobe Illustrator Tutorial: Create a Printer Illustration

    In the following Adobe Illustrator tutorial you will learn how to create a detailed printer illustration. We’ll start with two simple rectangles and some basic vector shape building techniques. Once we have our starting shapes we’ll continue with some Pathfinder options, a bunch of complex linear gradients and some simple effects. For the highlights we’ll use some simple blending techniques along with some new effects and pixel perfect vector shape building techniques.



    Read more 
search form
 
image description image description