M-Sign.nl » Tutorials

Build a feature slider using custom posts

Michiel — Mon, 26 Sep 2011 19:10:13 +0000

Some weeks ago, I wanted to add a slider to my wordpress theme. At first, the slider was reading data from custom meta boxes at posts from the wordpress cms, and was linked to posts, but this had reduced flexibility since it was not possible to link a slider to any post, page or item. The solution? Use custom posts or custom content that is used for the slider only. This tutorial describes how to set up custom post types yourself, and to add a jquery slider that uses these custom post types, both in a wordpress environment. It is assumed that you have basic understanding of wordpress and understand html and css well.

(more…)

Explore the flexibility of Raw in Camera Raw 6.0

Michiel — Mon, 04 Apr 2011 18:46:52 +0000

Most compact camera’s don’t have the option, but if you are as lucky that you own a DSLR camera, you have the option to shoot in Raw. Ever wondering why people shoot in Raw? Or wondering what Raw even is? And what are the advantages? This tutorial will learn some basics things of colour correcting and editing in a raw photograph, and will explore some options that are not so easy accesible when editing a .jpg. For this tutorial you need Adobe Photoshop, which also has the Camera Raw application or plugin built in. This tutorial is aimed at beginners. [...]

Design a Minimalistic & Humorous Poster Ad in Photoshop

Michiel — Sat, 19 Mar 2011 15:31:09 +0000

This tutorial describes in a few steps how to make a very minimalistic poster advert in Photoshop. It is assumed that you have some basic photoshop knowledge. You’ll learn to apply some basic design principles, techniques on choosing the right fonts and masking photographs. There is also a small introduction on amateur product photography. This will be our final end-result. The total time of completing this tutorial will be around 1 hour. Clicking images will in many cases enlarge the image. As well I like to use as many shortkeys as possible, so they are always mentioned behind the action. [...]

Adding Social Media Icons to Your Site using CSS3

Michiel — Thu, 26 Aug 2010 14:20:08 +0000

Welcome to m-sign.nl! In this tutorial we’ll discover how to add social media icons into your blog or website by using css. Usually these are added so you allow visitors they can follow you on facebook, twitter and even allow them to influence you. We’ll rebuild the media-icons and make them able to pop-up from the navigation bar when hovering them, such as they are displayed in the header of m-sign.nl. At last we use the css3 transition attribute for a more smooth animation when hovering the icons. (more…)

Building a CSS-Sprite Based Website

Michiel — Sat, 27 Mar 2010 16:19:17 +0000

What is a sprite? A CSS-Sprite is a single image which containt multiple images and is used and placed using css on such a manner that you use each image in it. Ok, this sounds a little bit vague (a more detailed description can be found on: http://www.alistapart.com/articles/sprites/), but a css sprite helps to limit your http-requests. In other words, it is used for optimizing your website loading times. It reduces your loading times. This is especially important when having a very big site with many visitors. However, it is also interesting to learn this technique for own purposes.

(more…)

Build a little game in Blender!

Michiel — Mon, 28 Dec 2009 21:26:38 +0000

Even the blockbuster movie 2012 used the Physic Engine Blender is using: Bullit. In this tutorial we will discover some basics of the Physics and Game Engine possibilities within Blender, and make a small game where we can demolish a brick tower. It’s pretty addictive to destroy this tower with a small ball, using the arrow keys on your keyboard. This tutorial is made using blender 2.49 (32bit). Blender is an open source 3d-editor which can be downloaded from blender.org

(more…)

Make a Winter/ Christmas Design

Michiel — Thu, 24 Dec 2009 17:53:58 +0000

The snow has fallen over here, and the outside is looking beautiful, but very cold. Inside nice music is coming out of the loudspeakers, the heating is working hard and the atmosphere is cosy with all the candles and lights. In other words, winter has arrived and it is time for a new tutorial: make a winter theme based poster. This can be used for christmas and happy new year cards, as computer background, etc. In this tutorial you’ll learn to use adapted brushes, stroked paths and layer masks. Let’s start!

(more…)

Make a CD-Cover!

Michiel — Sat, 16 May 2009 17:58:22 +0000

‘Recently I read a magazine and saw a picture of a nice and simple CD-Cover from Israel Houghton . I liked it, so I decided to make a tutorial on how to make a cover similar to this one.‘ So far the story of this tutorial ! In this short tutorial we’ll make a CD-Cover using Photoshop CS3+.

After this tutorial you’ll know how to apply to color schemes to a design, to adjust the ‘leading’ and ‘tracking’ of fonts and using capitals. The outcome of this tutorial is shown on the left.

Before actually opening photoshop, we’ll look at the colorscheme:

(more…)

Make a Summerparty Poster!

Michiel — Fri, 24 Apr 2009 18:54:12 +0000

Welcome to M-Sign! In this tutorial we are going to make a beautiful party poster for a summerparty using Photoshop . So what we want to achieve is a sunny and festive look. We’ll start with the bottom layer, and then move in, like we did in the previous tutorial (For more tutorials, look in the tutorials categories!). What you’ll learn in this tutorial is the use of custom brushes, gradients, groups and fonts. Also textures and stock pictures will be used.

Enough talk, on the left you can see what you’ll able to make after finishing this tutorial. In this tutorial are some custom fonts and brushes used. All credit of these custom items are to the original makers. The version of Photoshop that was used for this tutorial was Photoshop CS3.

(more…)

Make a ‘lovely’ wallpaper in 12 steps.

Michiel — Tue, 03 Mar 2009 17:11:37 +0000

Maybe you have seen it, recently a new wallpaper was added in my gallery, with the theme love. In this tutorial you are going to make this beautiful wallpaper, using Photoshop. The outcome will be more or less as the image you can see hereunder. (click for original size).

The render was made in a 3d application, but this tutorial will stick to the parts that were done in photoshop. This tutorial will be done in the ‘underlaying-layers-method’, which means that the tutorial will start with the bottom layer of the document as the first step and will end with the top layer. So let’s start!

(more…)