Archive for the ‘Tutorials’ Category

4Jun

Once you try working in Adobe Illustrator, you will hardly stop getting back to it over and over again. It has proven to be one of the most helpful and successful means of bringing your creative ideas to life. Coming packed with a variety of useful drawing tools, natural brushes and a bunch of other time savers, it seems there is nothing you could not do with it.

From time to time we decide to collect the most effective, easy and free Adobe Illustrator tutorials to give you a chance to discover it deeper and gain new skills to get extra-amazing results. This week is no exception. In today’s round-up we’ve collected 15 Adobe Illustrator vector tutorials that will help you develop breathtaking vector graphics.

***

1. Creating Bart Simpson Vector Character in Illustrator

If you are a big fan of The Simpsons, you will no doubt enjoy this guide. Using layers, Pen tool and its sister tools like Convert Anchor Point Tool and Direct Selcetion Tool, the tutorial will teach you how to draw and colorize a vector Bart Simpson in Adobe Illustrator. Starting from the basic shape and then moving further while adding shadows and other effects, you’ll be able to create the character on your own.

Bart-Simpson-Vector

20Nov

The world around is full of possibilities. It enriches life with so many inspiring things that bring our creativity to the new level. Artists who are highly creative people need this inspiration for their creations. The more they see and accept from the world around, the more wonderful things they produce.

Photoshop is one of the means for creating masterpieces. Especially when it goes about photo manipulations. Just imagine how many breathtaking works you can craft using this powerful tool. These digital pieces with acute attention to details are so catchy, that can easily win the interest of the audience.

Photoshop portraits stay apart from other manipulations, ‘cause it’s really hard to create a sleek and original one. If you have ever tried to perform it, you know what I’m talking about. This compilation of Photoshop Portraits. Photo Manipulation Tutorials is a spoon of inspiration for all of you who need it for great ideas and stunning artworks. Have a look at the most noticeable of them that were created during the last year and enjoy.

***
Photo Manipulate a Beautiful, Bejeweled Ancient Princess

Photoshop Portraits. Photo Manipulation Tutorials
***
Photoshop Tutorial. Advanced Compositing Techniques

Photoshop Portraits. Photo Manipulation Tutorials

26Jul

Time savers are of a great value for today. Certain techniques that are implied for more rapid operations can hasten the workflow. When it goes about sites where animation adds a spicy tone, they use CSS3 that offers its easy creation. Easily, efficiently, quickly – this is how you get a variety of effects with the help of CSS3. What is also important, even novice can easily make use of CSS3 tricks. Such cool effect creation doesn’t demand profound knowledge of code, flash animations, JavaScript. Everything you need is to browse a tutorial that shows the creation of some effect, and following its steps you can get the desired one.

The pack of CSS3 Animation and Transition Effects Tutorials offers you useful tips and wise tricks on how to create stunning animations on your site. It’s really easy to make a page eye-catching. Try it!

***

Putting CSS Clip to Work Expanding Overlay Effect

With the help of CSS clip property and CSS transitions, you can easily create simple expanding overlay effect. Use this tutorial to know how.

CSS3 Animation and Transition Effects Tutorials

***

3D Thumbnail Hover Effects

Step by step instruction on how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery.

CSS3 Animation and Transition Effects Tutorials

17Jul

Today let’s focus attention on 2 important parts of design layout – header and menu. Header attracts attention the first time you enter the site, it contains the corporate colors of the company and its logo. The way you design it can determine the effective presentation of business idea and its correct communication to the viewers. What makes the headers undoubtedly attractive? Of course, their huge sizes that have an impact on the viewers. Some apps that are used to show the products or offer visitors to sign-up for something. Effective sliders are also good for featuring portfolio. You can also use nice characters (if a business concept can adopt them), it adds some friendliness to the look of the design. Of course, there is a bunch of other useful advices concerning the creation of headers. While surfing around the following How to Create Header Tutorials, you can find a lot of them.

When it goes about menu, you should remember that this is a navigation element, and its primary purpose is to guide the user seamlessly around the site. So, the first important point you should bear in mind, is its thought-out structure and usability. It should present all subjects and categories in a well-structured manner and easy-to-perceive way. Only in this case the viewers will find it useful. How to make them looking clean and clutter-free? Follow the wise tips in the How to Create Menu Tutorials below, and create your own well-done items.

How to Create Menu Tutorials

***

CSS3 Responsive Menu

CSS3 Responsive Menu

***

How to Create a CSS3 Dropdown Menu

How to Create a CSS3 Dropdown Menu

3Jul

Each designer and developer craves for making the work easier. What can facilitate this process? Of course, a good bunch of cheat sheets. The usual cheat sheet looks like several notes that are used for quick reference. Their primary aim is to help complete some work faster and easier. They are widely used here and there to minimize errors in code, and thus are so popular among users.

Here you’ll find helpful CSS Cheat Sheet that can seamlessly be a guide for your CSS. CSS is what makes control layout of many documents, apply it (layout) to various media-types, offers a lot of advanced techniques. The syntax of CSS is easy, but sometimes quite tricky to master, and these notes will help you do it faster.

***

CSS Cheat Sheet

You can print this cheat sheet that features the whole list of currently supported tags with descriptions and attributes, as long as their support in HTML 4.

CSS Cheat Sheet3

***

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

To get the idea about the right CSS 2.1-property and obscure CSS 3 property, follow the link to the cheat sheet below.

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

20Jun

The topic of our interest today are fullscreen background images. How to implement them into a site without extra efforts? You can do it easily using jQuery and CSS3. Browsing the following tutorial you will get the idea of how to put together a basic webpage using fullscreen videos. It is done with the help of BigVideo.js plugin that is based on Video.js script.

Fullscreen Video Tutorial Preview Screen

Live Demo Download Source Code

13Jun

What can assist you in design creation better than a good tutorial with the detailed description of a process? Here is a bunch of great ones both for those with advanced and moderate Photoshop skills. What can they help you with? After browsing them carefully, you’ll be able to master the process of cool text effect creation in Photoshop. They discover a variety of options for creating text effects of different styles. Just a bit of your time and at least some Photoshop experience, and you’ll see what cool stuff you can create. You can experiment, and see what happens.

You can ask what are these effects for. The idea is simple – they affect the whole design, making it effecting and drawing the viewers’ attention to it. Even minor text effects can bring the spectacular changes to the overall look.

Check out the Text Effect Photoshop Tutorials below, play with the chosen effects and unleash your creativity, making the works of your own undoubtedly impressive.

***

How to Create Colorful Wooden 3D Text

How to Create Colorful Wooden 3D Text

***

Vintage Tiles Text Effect

Vintage Tiles Text Effect

22May

Twitter Bootstrap is one of the hottest trends on the web for today. CSS and JavaScript files that constitute a Bootstrap framework make your job done faster and easier – this is the slogan of Bootstrap. Its 2.0 version offers 12 column responsive grid, that facilitates the mobile support of the Bootstrap sites.

If you’re lucky to know all Bootstrap features and how it works, you can create stunning designs. If not, here is a compilation of well-done tutorials for you to learn about it and how to start with it. The documentation of this work is easy-to-perceive, every designer and developer could ever dream about such a well-structured info. Of course, sometimes you need the additional explanations for some reasons: the visually presented facts can be understood easily and some of the detailed tutorials show the process from the more convenient for perception point of view. So, you are here now to get a bunch of good Tutorials on Using Bootstrap, and you’re welcome to check them out.

***

Bootstrap – Up and Running

You’ll learn how to get Bootstrap up and running from this tutorial.

Bootstrap – Up and Running

***

Bootstrap – Creating a Portfolio Page

If you’re going to create a design portfolio page, this tutorial is for you. Everything is clearly explained with text and code samples.

Bootstrap – Creating a Portfolio Page

24Apr

It’s not polite to make people wait, but it happens that you need to. If your page is too heavy and needs some time for loading, you have to make the viewers know that in several seconds the process will finish. Tiny bars, circles, fade away elements – you can use whatever signs you want, to mark the loading page. CSS animation is what you need for creating the mentioned above loading signs. Pure CSS will be enough for bringing into life the desired animation. Showing such animated elements in motion to the visitors is like saying to them “wait a bit, everything happens in a moment”.

But how to create nice with the pleasant to eyes animation effects? CSS Loading Animation Tutorials will show it to you set by step. The wise advices from professionals is what you exactly need to make a good loading animation.

***

CSS3 Loading Animation

CSS Loading Animation Tutorials

***

Creating Loading Animations Using Only CSS3

CSS Loading Animation Tutorials

10Apr

The motto of every successful designer is “never stop learning”. It works at the first stage of your career and it helps improve your existing level of knowledge. Bearing it in mind, you can achieve great results. If you are a beginner, find out some time to learn a bit more. If you’re a beginner who is interested in jQuery, spend this time on the useful resources that will help you grow all the must-have developer’s skills. These websites offer you all kind of stuff that deals with jQuery: tutorials, articles, tips, techniques, codes and whatever you need to master it.

Here I’ve compiled this list of the useful Sources to Learn jQuery that can help you become a real jQuery ninja. If you have you own, let’s check it out. If you run into some unfamiliar sites, feel free to add them to your list.

***

Learning jQuery

You’ll learn a lot from the masters of jQuary: useful tips, techniques, see the professionally done tutorials and a lot of more.

Sources to Learn jQuery
***

jQuery for Designers

The aim of this project is to teach the designers with a little programming experience to add some simple, and even more complicated effects to their pages. The main goal is to make them understand what they are doing. All the stuff that includes tutorials, demos, screencasts, codes, etc you will find here.

Sources to Learn jQuery

You are currently browsing the archives for the Tutorials category.