Category Archives: Tutorials

One of the most innovative and genuinely useful platforms to appear in the last few years is IFTTT (If This Then That), a service that allows you to connect different online applications and automate tasks between them. This allows you to save time, increase productivity and turbo charge your social media strategy.

A lesser know, but equally useful platform, is Zapier - which ‘zaps’ tasks from one app to another, and actually offers over 3 times the channels than IFTTT, including many that can help you run your website.

How Does Zapier Work?

Very similar to IFTTT, Zapier describes its system through ‘triggers’ and ‘actions’, which are simply events, such as ‘new email received’ or ‘new tweet sent’. Whenever the trigger event occurs, it sends a ‘zap’ through Zapier, which completes the designated action for you.

Zapier can be used to help manage and automate some of the more tedious tasks that come with running a site, and all the other associated plugins and services you use on top. Continue reading

Earlier, photographers needed to buy different techniques to produce photos with certain effect. But the computer age changed the principle: launching of Photoshop became a true revolution in photography making. Now, if you have skills of using this program you’ll be able to transform your photos in any style you want (of course, it doesn’t deny your camera should take pictures of high quality).

So, in case you are not an absolute pro in Photoshop, I gathered 30 photo effect Photoshop tutorials. My aim was to share different stuff: vintage, watercolor, nature, sci-fi and many other effects. Enjoy.

* * *

Photoshop Vintage Effect

 
Photo Effect Photoshop Tutorials

* * *

Surreal Motionscape Effect With Photoshop CS6

 
Photo Effect Photoshop Tutorials

* * *

Continue reading

People of the 20th century had a lot of fantasies about how civilization of future would look like. You can watch old sci-fi movies to see all those crazy futuristic dresses, transportation, buildings, environment, devices and other. Previous generations definitely had a great fantasy. But I think in 60’s, 70’s, 80’s, 90’s they couldn’t imagine that in 21st century people would have sympathy exactly for the style of previous decades, call it oldschool, vintage or retro, and consider it very cool and fashionable.

Well, this paradox doesn’t prevent us enjoy old-new elegance in all the artistic things. Today I want to share with you 8 vintage postcard tutorials – some of them are step-by-step text instruction, the others are video. People of 20th century knew well how to make postcards beautiful, so let’s take their experience to design better.

* * *

Design a Retro Postcard with 3D Text

 
Vintage Postcard Tutorials

* * *

Create a Vintage Linen Colortone Postcard in Photoshop CS4

 
Vintage Postcard Tutorials Continue reading

CSS (Cascading Style Sheets) is a wonderful tool, which gives an opportunity to do incredible things in HTML5. Nowadays CSS is widely and successfully used in web design, increasing the quality of its realization. Moreover, now it’s rather easy to make the content look beautiful. CSS can manage such important front-end elements as layouts, colors and fonts.

I want to make web better and my role is little – to assist you, web designers and developers, to do it. And then just enjoy the result. So, for that purpose today I gathered 10 hot CSS3 tutorials of this summer. Everyone wants to rest in this warm season. But our rest is specific and it means improving the web.

* * *

Using Custom Data Attributes and Pseudo Elements

 
CSS3 Tuts Summer 2013

* * *

Quick Tip: Don’t Forget the Viewport Meta Tag

 
CSS3 Tuts Summer 2013 Continue reading

Drupal is widely used tool for creating maps because of providing different libraries, latest technologies and third party services. Openlayers are one of the approaches of creating geographical data and maps in Drupal. It supports various map providers, such as Google Map, Yahoo Map, and Bing Map. Layer helps groups the elements that are rendered on the Map. Openlayers.Layer is the base class that defines common features, such as name, opacity, projection, maxExtent, and resolutions for all the derived classes.

* * *

Before creating a map using Openlayers in Drupal 7, you need to ensure that following modules are installed:

  • OpenLayers (use 2.0 or higher): OpenLayers, Openlayers UI, OpenLayers Views
  • CTools
  • Views 3: Views, Views UI
  • Libraries
  • Geofield (1.1 or higher)
  • GeoPHP (1.7 or higher)
  • Geocoder (1.2 or higher)
  • Address Field

Steps to create maps using Openlayers in Drupal 7:

1. Store geodata nodes
2. Create a data overlay layer in Views
3. Define a map
4. Show a map using Views

Drupal Map Guide Continue reading

How to make it look blurred? If you’ve ever asked yourself this question, this post is right for you. The compilation of various resources including tutorials, tips and advices on how to create the blur effect with CSS will show you all the possible ways of achieving it.

Blur effect with its transparency and soft tone makes images and text passages pleasant on the eye. It can be used just for visual attractiveness, or as the background effect for focusing attention on some parts of text. It’s widely used here and there, and it’s not really hard to create it. You can do it with CSS filters, among which it is one of the most popular. They work quite well in various browsers, so you’ll have any troubles with them.

This post contains resources with parts of code that you can just copy, paste in the right place and get the desired blur effect. Let’s try!

***

Blur Menu with CSS3 Transitions

 

Blur Effect with CSS

***

CSS Filter Effects

 

Blur Effect with CSS

Continue reading

There are many ways to improve user’s experience on site. But today we decided to focus on navigation. An intuitive, user-friendly navigation is a great benefit no website owner will contest. As a rule, the visitor scrolls down your website all the way to read the content and when he/she wants to continue research, the scrolling should be done over again, this time backwards.

Surely, there are some good ways to free customer’s fingers from monotonous actions. One of them is to make your menu bar stick to the top of the page. This way all essential links will be constantly visible and easily accessible at any moment. A set of tutorials gathered below will show you how to create a fixed navigation menu on your website in few easy steps. Even if you are not much of a coding professional, you will easily cope with the task. We believe that fixed navigation menu is a good opportunity to save some space on your web page, as no additional links are necessary anymore, and show the customers that you value their time.

* * *

Fixed Navigation Bar in CSS & HTML

In this tutorial you will learn how to make a navigation bar which is always on the top of the page, using basic HTML and CSS.

Fixed Navigation Menu Tutorials

* * *

How to Create a Fixed Navigation Bar for Your Website

The tutorial shows how to create a horizontal navigation bar that sticks to the top of the screen using CSS and HTML.

Fixed Navigation Menu Tutorials

* * *

Continue reading

Do you use Adobe Illustrator in your design projects? The majority of designers simply can’t do without this editor when they need to create high quality vector graphics and elements. Since its development for Apple Macintosh in December 1986, the software has undergone sixteen upgrades, which finally resulted in Illustrator CS6, the latest version in this product line.

Actually, designers use both Illustrator and Adobe Photoshop as they allow to carry on different manipulations. Photoshop is perfect for work with digital images and illustrations while Illustrator is matchless for typesetting and logo design, for instance.

Vector elements, created in Illustrator can be incorporated into web pages, business cards, flyers and brochures. The quality of images drawn with the help of this powerful software lets to print them out in large scale.

If you feel like improving your Illustrator skills today, here are some latest fun Adobe Illustrator tutorials shared by expert enthusiasts with the community. All of them were developed in the current 2013 year and are suitable for any level of qualification. We are sure that you will pick out some useful details to apply in your next projects, i.e.: creative button design ideas, amazing text effects, facial expressions rendering, vintage strokes, interesting patterns, smart graphic tricks and many other things.

* * *

Creating a Coffee House Logo – From Theory to Vector in Adobe Illustrator

Illustrator Tutorials

* * *

How to Create a Simple Step by Step Progress Bar in Illustrator

Illustrator Tutorials

* * *

Continue reading

For some reason Photoshop shapes are often overlooked, but not at out blog. This post will enliven the question of using Shapes in Photoshop, and present you tutorials (including video ones) concerning this theme. It can be quite useful, especially for beginners who are always looking for some professional tips and clear explanations. Here is the short list of tutorial topics you’ll find below:

How to create custom shapes?
How to save custom shapes?
How to turn a text into a custom shape?
How to combine shapes?

You’ll see how to complete the mentioned above tasks in tidy and clean manner. Just using the simple tips and techniques, you’ll get good results. Here they are – Using Shapes in Photoshop: Best & Fresh Tutorials. Follow the tutorials, and make one step further to mastering Photoshop.

***

Making Your Own Custom Shapes in Photoshop

 

***

How to Combine Shapes in Photoshop CS6

 

***

Photoshop Text in Shape

 


Continue reading

“Wow, that’s amazing!” and “How to achieve it?” – this is the most usual first reaction of people who see the cool background effects on websites. Interactive sites with movable background images look really stunning, and draw much more viewers than the usual ones. Most of such sites use Parallax scrolling technique to achieve this effect. It makes the viewers’ journey around the site pleasant and exciting, observing how the background images move slower than the foreground ones. It’s not only visually intriguing, more important is that it makes the navigation really simple. In major cases when you scroll a parallax website, you can move on to another page actually staying on the main.

What other techniques are used for creating the background scroll effect? Just using a certain code you can make the background move. It is widely used in creating video games. In this compilation you’ll find the examples of Background Scroll Effect Tutorials for both of the mentioned above cases of usage. Video tutorials will show you the process of creation of these effects in detail.

We hope that this post will give you enough examples of implementing such a cool effect in your works. Show the world how it should move, and please the visitors of your site with its visual attractiveness and simple navigation.

***

A Simple Parallax Scrolling Technique

 

Background Scroll Effect Tutorials

***

jQuery Randomised Background Scrolling Effect Tutorial

 

Background Scroll Effect Tutorials
Continue reading

Page 1 of 101234510...Last