TUTORIAL

  • Homepage Construction Kit: 40 Ready-made Elements for Web Design with Photoshop (+ how to create your own)

    It is quite common to prototype web designs in Adobe Photoshop. Although the final product will consist of large amounts of CSS driven looks, it usually turns out to be faster to use an image-editor for the first drafts. Photoshop still is designer’s first choice in many cases. Using very few basic shapes and forms you are able to creative high-grade user logins, buttons, sliders, video-players or even whole web sites.



    Read more 
  • SEO 2013: 20 Most Important Contributions To Content Marketing Strategies

    WP Tags and SEO

    Google’s Penguin called it quits for some SEOs. Over-optimized websites with unnatural link structures and keyword stuffing got punished. New strategies had to be developed. Content marketing became the next big thing – a strategy I would have thought that was patently obvious. High-grade content, be it articles, videos, podcasts or infographics, proves to be the solution. Content like this needs no unnatural link support, instead builds backlinks automatically – because of the quality of it.



    Read more 
  • Mandatory for Web Developers: Free Video Tutorials on Chrome DevTools by Code School

    codeschool-devtools-01-w550

    Are there web developers who have never heard of Chrome DevTools? I don’t know of one single example. Chrome DevTools are a developer’s friend. Directly implemented into the browser, they deliver tools that are inescapable when it comes to web programming, especially the debugging part of it. Getting started with DevTools is not exactly complicated, but – as always – any help in accomplishing a faster start is greatly appreciated and lowers the inhibition threshold for newcomers. It is exactly such an entrance (and more) that the free video tutorial “Explore and Master Chrome DevTools” offers you.



    Read more 
  • Photoshop Etiquette: Basic Knowhow for Designing The Web Using Photoshop

    photoshop-etiquette-homepage

    Adobe’s Photoshop still is the market’s most common and most popular choice for professional designers. Besides photography and print design, which Photoshop once got invented for, it is widely used in the designing of websites, too. The last ten years saw the product grow in functionality especially in terms of web design features. A large part of the world’s most successful websites started as a draft in Adobe’s market leader. Photoshop Etiquette is a new and free service, aiming at beginners in web design with Photoshop. It offers the absolute basics and makes for a very good starting point.



    Read more 
  • 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 
search form
 
image description image description