Archive for the ‘Tutorials’ Category

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

3Apr

If your relationship with WordPress reminds a bad romance, don’t get upset. Here you will find some tips on how to get it better. If you want to learn how to create WordPress business themes, allow some time for reading this post featuring Photoshop Tutorials dedicated to this theme. The designers have taken their secrets public, and you can learn about them checking out the tutorials below.

This post will be helpful for all those who don’t have years of designing experience. Such tutorials that show everything in details are a great way to start and learn more about design tricks. All this will help you create your first WordPress business themes, and, perhaps, share your experience with others in some time. Are you ready to start with it? Don’t hesitate!

PS. People differ, and not all of us are ready to spend 1 hour or even more for mastering these tuts. For lifehackers we can offer the ready-made WordPress business layout that are already designed by skillful professionals with all you needs in mind.

***

Corporate WordPress Style Layout Tutorial

Good tutorial about creating a corporate WordPress styled layout. .PSD files are attached.

***

Create Business WordPress PSD Layout

Learn how to create the contrasting business WordPress layout for your website. Can be also used as a corporate layout.

You are currently browsing the archives for the Tutorials category.