Welcome on m-sign.nl’s next item of the week. This week item is a special website on fonts, where they have a very basic but good looking and good working education page in fonts. Besides they have .pdfs with tips and typeface anatomy. This is awesome because it is simple and quickly gives the basic information on fonts you want to know, without going to deep into the world of fonts or getting too difficult.

Fontshop’s Meet your Type Guide

This is the basic guide for understanding typefaces and fonts, and works good into your browserscreen (but uses flash).

What else?

While the guide is the most important education item on the site, there are some small pdfs with quick tips for using the right typo. Very handy to read and remember these typs as these definitely will improve your feeling for using the right typo. Also in the typeface anatomy is explained what every part in a letter is called.

Where can I find it?

Here! Go to: http://www.fontshop.com/education/

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.

The Tutorial: Adding Social Media using CSS

While there are many popular and handy plugins to add social media to your website, as this website does in the form of the sociable and facebook plugin, you can easily hardcode this, thereby having more freedom in it’s position and icons that are displayed. This tutorial will learn how to the Social Media Icon bar that is displayed in the header of this site is made, and will explore the possibilities of the background-position attribute hovered and unhovered and the z-index attribute. There is only focused on the icon’s, which means that we will not design the header or the navigation bar in this tutorial. Have fun!

The endresult is showed in the header of this site. You can also view the very basic quick demo here.

Step 1: Grabbing the Sprite Image

Depending on what social media you are going to add to your site, you need the icons for the social media. Do think about what social media you want people to follow you. Many social media like twitter, facebook and flickr can be connected to each other.You can grab icons from the web or remake them in Illustrator or Photoshop (the latter makes it easy to adjust them to your own style).

I chose six icons, from rss to youtube to be displayed on my site. Also I rotated them 45 degrees and scaled them to be medium to big of size. Depending on your own site you can scale them to what fits with your design (but please note that the css background-position values are designed for the image I use). I put all icon’s into a single image, because we are going to use a sprite technique using css background-position to use this single image for displaying multiple icons. More on the use of sprites,what they are and how it exactly works can be found in this tutorial.

Now onto the important part. This is the image I’m going to use in the tutorial:

Step 2: The HTML Explained

There are three colored parts that are important for this tutorial.The focus in this tutorial is on the red part, but it is important to understand the function of the two other areas. These are not styled in this tutorial.

1. First we have the header container, which is outlined with the thick blue line.
2. Secondly we have the icon container, where all icons are put in. It is put in a container so we can simple place this container anywhere in the header were we want. This is outlined with red.
3. At last, outlined with purple, is the navigation bar. We want the navigation bar to be on the top of the icons, so the icons are behind the navigation bar when popped in, and we want the icons to pop out when hovering. Without this bar covering the icons partly, the icons will only translate up and there will be no pop-up effect.

In the HTML below we have a div with and header_container id, which resembles the blue area. The styling of this area is not discussed, so you can add your custom css styling here. However, your header should be wider than the total icon width. Within this container is an ‘iconplacer’ id which resembles the red outlined area. This is the container for our icons. Usually listed items are put into a list (<li> selector), but here I chose for the mininum of html code. Each Icon has a seperate class and is within a seperate <a> selector. At last we have the navigation id, which ich for the navigation menu. This is held into one div with the totalwrapper id. You can add any item or styling to these divs, but remember the navigation div can not be transparant because the icon’s must be able to hide underneath them.

Step 3: Lay it out with CSS

Now, in the html part we have seen each class and id described. Let’s style them!

We first want to describe the general container, below its position relative to the header container is described. The z-index of the #iconplacer should be lower as the value of your #navigation id (here the z-index is 0). The icons shoud be clickable, and that is why we added text between each in the html. We however do not want this text to show, so we use text-indent to set up a large indent. A small margin is added so there is a little space between each icon.

Now the class for each icon is described. As you can see each class is a lot smaller that the total final iconplacer container. The image on the background is positioned so, that every class has the right icon on its background: so that the right icon is in the rendered width and height that class has.

Now, we want every icon to pop-up when hovering. Very easy with css, we can just use :hover after each class. We can not use a:hover in general and only add a altered background -y- position. For each class the background position should be described again. Because our icons pop upwards, the x-value of course does not change in comparison to the classes described before.

Additionally, I quickly added some styling for the containers, and for the quick demo. This styling is very basic and ugly but discovers the possibilities.

Step 4: Finished

• The real demo is showed in the header of this site!

• 
  

  For the quick demosite, look here (original html)

• 
  

  And download the original stylesheet here

While browsing through the web and converstating with others, a lot of interesting sites and resources are given and found, and every week I’m going to share some of my findings to you. Well, I try to do it weekly, but sometimes I’m on a holiday trip and not able to post or find something interesting. The first Item of the Week is the harmony sketchtool, which is an online basis sketchtool. It has a wonderful feeling and I’m showing you just the basics today.

Harmony Sketchtool

The harmony sketchtool is an very simple online sketchtool which means that you do not have to download anything. It has several brushes, but pity enough no eraser (there is a clear button though which clears everything in a single click). The background and brush color can be set up, and you can save your image. When saving the image will be exported to .png and will appear in a new browser window.

But why is it so cool to be the item of the week? Well, there is two things:

1. The brushes are awesome, the sketch brush is real sketchy and the coolest thing is that when using some of brushes, brushing lines close to each other will connect these lines in a ‘webby’ or ‘hairy’ way. Awesome!
2. Some are also speedsensitive which means the brushes turn larger and smaller when brushing with a faster speed (try the square brushes).

Let’s continue to some quick examples.

Quick Sketchexamples

The brushtypes:

A ‘connecting’ brush:

Example of the fur brushes:

Example of the square brushes:

Example of the grid and circle brushes:

A quick (2-3 minute) doodle of a knight with the shaded brush:

You should try it…! But where can I find it?

The harmony sketchtool can be found here: http://mrdoob.com/projects/harmony/. Enjoy sketching!

Some weeks ago a post was added showing some beautifull old paper textures, with music notes, stains and other details on it. You can find this post here. Out of these textures, which were shot by m-sign.nl, 41 brushes were made. These are from low to high-resolution, and free to use personally as well commercially. The brushes are .abr, which means they can be used in Photoshop.

Old paper brushes pack

Download old paper brushes pack.

The brushes pack can be used in photoshop and contains 41 brushes. Enjoy your time brushing! The accompanying Old Paper Textures can be found here.

I have several friends where I design posters and brochures for.  However, most artwork is on my computer and needs to be printed out. The last time I designed a poster my client was asking where it could be printed, since I mostly only stick to the designing part. Travelling over the web reveals a great amount of online printing companies, and I came into contact with a particular one: nextdayflyers.com. In this post I’ll review this printing company. M-Sign.nl is starting to review!

Next Day Flyers:

Next Day Flyers is a printer specializing in offset printing with a quick turnaround. Orders placed by 10AM PST can even be ready for shipping or pick up on the same day.
Products offered include an array of club flyers, business cards (traditional, folded, rounded corners), brochures, bookmarks, tickets and more.
The website is user friendly and orders can easily be placed online. However customer service reps are available by phone and online chat if/when needed.
The Next Day Flyers blog has lots of great marketing tips and inspirational designs.

Services

Their most important services are divided into two areas:

1. Thick Cardstock, where you can print items such as business cards, postcards, menus, tickets to even doorhangers and custom die cuts prints. The last makes it able to pop out a certain shape from a printed item, e.g. a valentines card where you can pop the heart out to use as a special coupon. Besides regular printing, Next Day Flyers emberasses me with these  creative ways of printing.
2. Glossy Paper, the name says it all: for glossy prints.  From glossy booklets and brochures to dvd inserts. The latter makes you able to easily have professional covers for your own produced cd’s or dvd’s.

After printing products are ordered, they are placed very fast. According to more customer reviews, they have very good prices. Besides they have excellent customer care in the form of phone contact and online chat. What is excellent about their services is that every service is described in details and are ordered on a logic way on the website. When selecting a service, and clicking on ‘view details’  a well written description is given and a useful cost calculator. More can be found about this under ‘user interaction and friendliness’. An important point that can not be forgotten is the safety of the shopping, which is secure and furthermore Next Day Flyers is an accredited business.

User interaction and friendliness

There are some points which I noticed when reviewing the website on user friendliness.

• The ‘First Time Here’ button which can help you when you are new and the express checkout which can be used to calculate prices very fast. These are two useful ‘tools’ which can be accesed immediately from the homepage.  When clicking the first time here button, you will arive at a three step wizard which is easy to use and a good way to select your desired product.

• Quick links in the footer to different options. On nextdayflyers.com, you are able to design your prints online with a useful tool. It is also well documented with videos how it works. After selected a certain print product (having a digital design finished) you can easily upload it online. They can even mail prints for you, which is a bonus to the services they already have. The help center link is also present and if you have questions or need help it is very easy to find.
• It is good to see the ability to track your orders or see your order history.
• When viewing a certain print product, as shown below, it comes with a very useful cost calculator. Also the next step (design online or upload your design) is shown so you know as customer what is ahead of you. With steps it is often confusing when, in what order and how many steps to take but on this website it is clearly communicated.

The Blog

The blog is like an extra. Especially for designers it is interesting, because there are many tips on printing, trends, marketing and there are even freebies! Besides it makes the relation with the company closer, because you can follow what their interests are, how they write and learn from their expertise. Looking to the rate new posts are written, they take the blog very seriously as well. It is not just an extra to keep in touch, but it is updated regularly as well.

What do others say?

While reviewing, it is also good to view the perspective to see how genuine the review is. The source of information used is  google.com and maps.google.com.

Final Judgement

Next Day Flyers is an excellent printing company which has a good price quality ratio and is very capable of doing all your printing work in different sizes.  Their website is clear and gives a lot of information about the different print services they deliver and their prices. Besides they have a nice blog with tips which is interesting for designers. Shortcommings are that they apparently do not ship international and print very very large prints. My final judgement is 4.5 out of 5 stars, which equals excellency.

Some years ago I got a present from my neighbours: some old psalm and songbooks. At that moment, they were only usable for begin in the museum or as a decorative item in my room. However, these books have some excellent old paper surfaces which provided some pretty neat old paper textures. Here on this post, 47 textures from old paper and psalmbooks, shot with my camera.

[Show as slideshow]

123►

Download the Zip File

Download .zip file here.

This year I was in a church service, and I brought my camera with me. The perfect opportunity to take some pictures from the old dutch bible: 11 free to use stock photo’s of this old bible can be found in here…

[Show as slideshow]

Download as Zip Package:

Download Old Bible Stock Photo’s

In this post you can findold map brushes, made by m-sign.nl. They are free to download, and this category might be updated regularly with new brushes. The brushes are available for Photoshop: they are in .abr format.

Old-Map Photoshop Brushes Pack

Download them from here:

Old Map Brushes

The brushes were made out of images that were shot by m-sign.nl. The accompanying Old-Map Textures can be downloaded from Textures.

Extra Notes

For users of other graphics programs, there are several resources on converting brushes, e.g. to gimp:
Tutorial 1
Tutorial 2
Tutorial 3

Finally, another post. I had really busy days with schools, but now the holidays started. In this post you can find an overview of wallpapers made by m-sign.nl. This post will be regularly updated as new wallpapers find it way to m-sign.nl. Not all resolutions are available for each wallpaper, but we strive to deliver as many as possible!

Beautiful Wallpapers

(Click on the resolution to download, clicking the image will bring you to the original resolution)

Light of the World 1280 x 1024 1024 x 768 320 x 480	Love will find a way 1280 x 1024 1024 x 768 320 x 480	Velocity 1280 x 1024 1024 x 768 320 x 480
Eli 1280 x 1024 1024 x 768 320 x 480	Ring 1280 x 1024 1024 x 768 —	Allah Mahabba 1280 x 1024 1024 x 768 320 x 480
The End 1280 x 1024 1024 x 768 320 x 480 — — —	Number Seven 1680 x 1050 1440 x 990 1280 x 800 1280 x 1024 1024 x 768 320 x 480	Free 1680 x 1050 1440 x 990 1280 x 800 1280 x 1024 1024 x 768 320 x 480
Hearts in Grass 1680 x 1050 1440 x 990 1280 x 800 1280 x 1024 1024 x 768 320 x 480

For original high resolution photographs, e.g. for wallpaper use, I refer to the Photography Portfolio

Although the city I live in is not the most entertaining city in the world, it has enough spots to obtain textures. This resulted in the outside texture pack which contains several textures which were shot around the house. Take a look inside and download the outside texture pack!

Outside Texture Pack (grass, pavel, bricks)

Contains 45 textures shot outside: grass, ways, paths, dustbins, brick walls, etc.

Download Outside Texture Pack (138969kb)

Download