For this we need your help. You can assist us by answering our survey. After the survey period we will randomly draw 3 respondents and feature their website on our sidebar for a month. Wow! That’s $400 worth of advertising and you’ll have the chance to get it for your website for free!

Just to be clear about placements, those 3 ads will be little smaller than 150x150px, to make it able to put all banners on one line in sidebar.

A few things you need to know before answering the survey.

1. The survey will take only about 10 minutes to answer.
2. We will use your answers to improve 1stwebdesigner and its upcoming products.
3. Only individual web designers, web developers, marketers, social media experts, and writers may answer. No companies.
4. The majority of the questions will deal with how you promote/market your website. Which means you’ll need to have a website to participate and win the Grand Prize:  Your website will be featured on the 1stwebdesigner sidebar for a whole month! This is a $400 value, and your site will be seen by hundred of thousands of people.

Click to start the survey

What is it for?

We are currently working on some great products that you will definitely love. But we need your input on things so that we can focus more on your needs and wants.

For now all we can say is that we’re expanding our reach!

1stwebdesigner Survey Answer To Win 1 of 3 1WD Sidebar Ads For A Month

Final result

Open image_01.jpg in Photoshop, copy and paste image_02.jpg.

Add or erase unwanted part from image, only keep left mountain as shown in the image.

Add image_03.jpg (cloud) on the top and change the blending mode to “Luminosity” and opacity to 80%. Erase bottom part with soft brush to merge with the composition as show in the image.

 By using Lasso selection tool or pen tool make a selection of the statue, to merge with the composition use “Grass brush” to eraser bottom part.

Select brush tool and paint some shadow to the bottom left of the statue.

River painted with the brush (I draw the shape with Lasso tool and painted over that with brush) composition will look something like this -

Create new layer and use Elliptical marquee tool to draw moon, duplicate the layer and add Gaussian Blur (as per the requirement) I keep 8 radius. Change the blur layer mode to Linear Dodge (Add) and decrease opacity to 80%.

By using soft big brush I added haze. For waterfall I choose small brush and painted on new layer.

Time for using Adjustment layer, rather than explaining each of them following image will tell you in detail.

Composition will look like this -

Painted some birds to add life in the composition -

Press CTRL+A and then CTRL+SHIFT+C for Copy merged, press CTRL+V for paste on the top of every layer.

Press CTRL+J twice it will add two duplicate layer.

Select top layer then go to Filter – Blur – Gaussian Blur, keep radius 8.0 pixel. Change blending mode to Soft Light and decrease opacity to 40%.

Select bottom layer (2nd in stacking order) go to Filter – Other – High Pass

Create a new blank layer add white color then go to Filter – Lense Corrections and keep the value as below. Change blending mode to Multiply and opacity to 50%.

Final result will look something like this!

Let me know if you have any query and please do let me know your suggestion and feedback on my tutorial.

Perfect Desktop Wallpaper – Photo Manipulation in Photoshop

Step 1

First, we must separate the woman from the background, so that we can later put in between the color effects.

That is, first, the young lady be exempted. We can do this with the path tool or the Extract filter.

Important: Work on the duplicate copy of the image.

It is not necessary to release the hair meticulously, because we will duplicate the exempted image and later put on the background layer.

That is to say: Cut hair shine through the background and by the loss does not fall on too much.

Here the final result after post-crop:

Step 2

After we released the woman must be checked whether it lies above the 1:1 woman from the background level. In general, this is the case if you have not accidentally move it.

Now we can start with a few brushes (color: white) to create between the background level and one woman contour.

The brushes that I used in this tutorial come from deviantart.com

Brushes can be loaded via the Edit> Preset Manager.

Selection Brush (Brush tool [B]) and right click on the image, then opens the corresponding window.

Diverse set of brushes in white, each brush to the next level (if it is to be revised later).

Step 3

Not too much background color , otherwise the effect seems fake and overloaded

At this level, it also uses the Brush tool and paint with the desired color on the areas of the underlying brush layer.

Color redraw:

Here is a before/after view with white brushes and later with the color overlay:

Before:

After:

The level must be set the layer mode to Overlay.

Step 4

The rest is basically a matter of taste, I mean: Use the brushes and paint as you may think of harmony. The star was placed directly behind the woman and not in color.

Photoshop Color Background Effect

Now this global landscape of talent popping out everywhere, and everyone competing for the same goal, is exactly how the freelance industry has become. It’s actually quite funny considering that many bigger name companies would always say that outsourcing their work projects to someone from another country was never even a consideration, are probably making up most of the names who do this now as a regular practice.

So let’s take some time to see what the top tennis players in the world are doing to stay on top, and how you can apply their methods to your freelancing.

1. Not having a Signature Weapon/Skill will Leave You Flat

*Image Credit: digitalnoise

Look at the careers of two current young players considered to be as good as, if not possibly better, than everyone else, but is simply missing that one undeniable attack to get them over the hump. These players being Andy Murray and Caroline Wozniacki. Both are talented players with great all around games, but that doesn’t translate over into dominating the ATP and WTA respectively. Andy Murray has reached Grand Slam finals multiple times only to lose, and Wozniacki made it to the top of the WTA rankings only to not be able to win one Grand Slam during her reign.

What can Freelancers Learn from This:

We all, for the most part, come into freelancing with the idea that offering as many skills we have some good level of skill in will provide the most revenue. Funny thing is, that is as far from the truth as thinking all clients are nice and pleasant. The truth is to have a successful freelancing career with plenty of room for growth, you have to first niche yourself and be awesome at it. Then add other skills your’e comfortable with to add some side revenue.

2. Plan Properly for Your LONG Season

*Image Credit: Digitalnative

Saying the tennis season is long is an understatement. The season starts at the very beginning of January, and ends in the middle of November. During this time there are constant back to back tournaments going on, so this is no easy grind. Once you also add in the unpredictable events, like last year’s US Open for example, it becomes clear how well these players handle it.

What can Freelancers Learn from This:

Unlike our full-time employed counterparts, there really isn’t a lot of downtime associated with freelancing as many would hope. There are probably plenty of stories about freelancers going years without vacations, missing plenty of quality time with friends and family, and of course the crowd favorite, staying up all night to finish some project with a crazy deadline of like yesterday. A good way to fix this is proper planning, and understanding your own limitations. Working nonstop will only end up burning you out so you end up losing more time than you would have, had you taken some time off to recharge. Make sure your schedule includes daily breaks, and monthly day(s) of pure relaxation.

3. Backup, Backup, Backup, and Backup some more

*Image Credit: adamwilson 

Ever look at a tennis match and not see the players with at least five other racquets in their bags? Even though there is a top-level racquet stringer on board at the events? There is an easy answer to this, it’s because they always have to be prepared! Anything can happen on the court, and a racquet could pop a string at any moment. Getting your racquet restrung by someone other than whom you’re accustomed to may mean they can’t get it exactly how tennis pro’s specifically like their racquet, which may cost a match.

What can Freelancers Learn from This:

If you are not backing up all your files somewhere, then you are just asking for disaster. Anything can happen! Nobody ever knows when suddenly the app you’re in will crash, or you’re going to have sudden serious computer problems, or anything else that may lead to you not being able to access your files. So make sure to BACK UP EVERYTHING THAT IS NECESSARY!

4. Have a Great Supporting Cast

*Image Credit: hewy

Doesn’t matter how anybody looks at it, behind every incredible player is some pretty darn good coaching to match. It is impossible for any player to get the top of the sport without having a strong coaching staff there to help improve their game throughout the duration of their playing career.

What can Freelancers Learn from This:

No this doesn’t mean go out and email everyone in your industry who you view as successful asking for advice or to be your mentor. It just means network and form genuine bonds with others in similar professions. Each person can learn and grow from the experiences of the other, and maybe you’ll luck out and be in good with someone you’ve always highly respected or is in good regard in their professional community for their talent.

5. Practice

*Image Credit: Daniel Dionne 

Any tennis player who has made it to the professional level definitely had to learn this lesson back when they were a rising junior. This lesson being that constant practice is the only way of ever being able to reach the top, no shortcuts, just a constant practice routine.

What can Freelancers Learn from This:

In this high pace life of freelancing, there really isn’t enough time spent emphasizing the importance of setting aside some time to better your skill set and hone your craft to a higher level. It’s understandable considering how fast things change in the web industry, add to that the workload, or lack thereof, that may be affecting you. Despite all this, only positive results come from just simply practicing and learning regularly.

In Short

There a lot of things that can be learned, and applied, from tennis players to your freelancing life. Both for the most apart are solo gigs that when it’s time to actually put the work in there really won’t be anybody but yourself to praise or blame. So remembering the tips discussed above can take you to new heights in your freelancing career, or help you get that strong kickstart to finally make progress in a positive direction.

Grand Slam Freelancing Tips Learned From Top Tennis Players

Sweet Farewell Presentation Illustration Tutorial

Step 1:

We are having a JPG image "meerab.jpg" alt="img" with 500px width and 400px height.  This will appear in Photoshop as Background layer.

Background Layer is locked by default. Some features are disabled like move and some can apply like filters. In this tutorial no need to unlock this layer otherwise if you need just have a double click on the layer then New Layer dialog box will appear with name "Layer 0". We can use other options as well. For example Right Click on layer and choose the option "Layer from Background". Then you can have simple raster layer.

Step 2:

Add New Layer by using "Create a new Layer" button at the bottom of the Layer palette.  Or you can use shortcut key "Ctrl + Shift + N". Give any suitable name by double clicking on layer name which is Layer 1by default (DM, in this tutorial).

Step 3:

Fill this layer with white color. Shortcut key is "Ctrl + Backspace" to fill Background Color.

Tip: If Foreground and Background colors are not default one, just press "D".

Step 4:

Select Rectangular Marquee Tool, Shortcut key is "M". Important point is selection inside the working area with balanced spaces with outsides.  So select whole area.

Go to "Select" menu, choose Modify then contract and I have used value 40px. You can have accordingly. The result after 40px contract will be like this

Step 5:

Fill inside this selection with Black Color. Shortcut key is "Alt + Backspace".

Step 6:

Convert this (DM) layer to Smart Object. Right Click on Layer and select "Convert to Smart Object".
The benefit of this conversion is to get easily editable "Smart Filters".

Step 7:

Apply "Gaussian Blur" by choosing Filter Menu and then Blur Option. I have used 12px value.

Step 8:

Apply "Color Halftone" Filter by choosing Filter Menu then Pixelate Option. I have used "Max. Radius" 11px and "Screen Angels" for all channels 45.

Step 9:

Set Blending Mode for the Layer "Screen" then you will get your final result.

Variations:

You can have some variations by changing the values in Smart Filter section under layer which is converted to Smart Object. Some examples are here

In Step 8, Maximum Radius 5px will give this result.

In Step 8, Maximum Radius 20px will give this result.

This will be the result with angel 90 and Maximum Radius 20px

Pretty Photo Border by Using Color Halftone Filter in Photoshop

Step 1

Start by creating a new document (1000X1000px).

Paste in the Taj Mahal image from the resources section for this tutorial.

We want to improve the colors and contrast of our backdrop image, so apply a levels and color balance adjustment layer. Be sure to apply a clipping mask to all adjustment layers in this tutorial, unless otherwise specified, as we only want our adjustments to effect the underlying layer.

Levels Adjustment Layer Settings:

12 / 0.94 / 255

Color Balance Adjustment Layer Settings:

Highlights: +1 / +2 / -5
Midtones: +4 / +8 / -16
Shadows: -11 / +2 / -1

Step 2

If you look at our backdrop photo, the distance is very sharp, but the bottom area of the photo gets slightly out of focus as it gets closer to us.

I’ve highlighted this area in red below:

To fix this, select your backdrop photo and both adjustment layers (hold shift to select more than one layer). Hit option+g to place these three layers within a layer group.

Duplicate this layer group.

Then, with your duplicate group folder selected, go to filter>convert for smart filters. This way you can non-destructively apply filters to an entire layer group, which contains multiple layers.

With your smart filters in place, go to filter>sharpen>unsharp mask. This will allow us to precisely sharpen our backdrop image.

Unsharp Mask Filter Settings:

Amount: 240%
Radius: 0.7 pixels
Threshold: 0 levels

You can see below that this has sharpened our entire image. However, we only really wanted to sharpen the bottom corners of our image, in order to focus them. The rest of our image is now too sharp:

To fix this, apply a layer mask to your duplicate backdrop smart object. Use a large, soft black paintbrush to mask off all of this sharpened layer apart from the bottom corners (which we want to sharpen).

I’ve shown where this mask is applied using a red area below:

And here is the result. Now the entire backdrop is nice and sharp, including the bottom corners, which were previously out of focus:

Step 3

Download the ‘snake’ image from the resources section for this tutorial.

Cut it out from it’s background (this should be easy as it has a plain white background). Paste the snake into the bottom right of your canvas, keeping it really large, as we want this to be a giant sized snake!

Apply a levels and color balance adjustment layer in order to blend the snake better with our backdrop:

Levels Adjustment Layer Settings:

20 / 1.00 / 230

Color Balance Adjustment Layer Settings:

Highlights: +13 / +1 / -29
Midtones: +25 / +5 / -23
Shadows: +8 / -5 / -12

You can see the result of this below:

We want to extend the snakes tail to the left corner of our canvas, so simply copy/paste part of the snake’s body and position this in the bottom corner. Use the same adjustment layers to blend this area.

Don’t worry if there’s a gap in the middle, we’ll be covering this up!

Step 4

Download the ‘rocks’ image from the resources section for this tutorial.

Paste the rocks roughly into the bottom-center of your canvas, after extracting them from their background:

Apply a color balance and levels adjustment layer to your rocks layer:

Color Balance Adjustment Layer Settings:

Highlights: -4 / +5 / -4
Midtones: +9 / +6 / -12
Shadows: +1 / +4 / -12

Levels Adjustment Layer Settings:

45 / 1.05 / 236

You can see the result of this below:

Step 5

Paste in your ‘moss’ image from the resources for this tutorial.

Duplicate this ‘moss’ layer, hiding the original. You can see keep this original layer though as we’ll be making many more duplicates.

Select your visible duplicate moss layer and resize it to fit over one of the lower rocks. Then go to edit>transform>warp. Warp your moss to fit more to the shape of the rock, thus making it less flat:

Apply a layer mask to your moss layer, and then use one of the roughly, grungy default brushes that come with photoshop (ensuring it’s set to: black) and mask off the edges of your moss area. You want to smoothly blend your moss into the rock surface.

To help blend it further, reduce the opacity of your moss layer to around 90%.

Now apply a color balance adjustment layer:

Color Balance Adjustment Layer Settings:

Highlights: +22 / -13 / -8
Midtones: +19 / +32 / -26
Shadows: -1 / +6 / -12

This is the effect:

Step 6

Repeat the technique of applying moss, applying it to the rest of your rock surfaces:

Step 7

Create a new layer called ‘bottom shadow’ and use a large, soft blackpaintbrush to paint in a shadow along the bottom of your canvas.

Reduce this layer’s opacity to 10%:

Step 8

Paste in your snake charmer image, positioning him so that he’ll be sat roughly on top of the rocks in your main composition:

We want to get rid of his background, so use your preferred extraction method. Personally, I love being non-destructive, so I used a layer mask to mask off his background.

Now apply a color balance adjustment layer to blend your man better with the rest of your piece:

Color Balance Adjustment Layer Settings:

Highlight: -13 / 0 / -8
Midtones: +4 / +13 / -15
Shadows: 0 / 0 / 0

And here’s the result:

Step 9

Create a new layer called ‘shadow under man’.

Use a soft black paintbrush at around 10% opacity to paint in shadow between the man and the rock. Make it look more natural, as if the man is sitting on the rock and casting a natural shadow:

Step 10

Download the ‘small snake’ image from the resources for this tutorial.

Extract it from it’s background and then paste/position it to appear to be coming out of the end of the man’s pipe:

Set this layer’s blend mode to screen:

Now apply a hue/saturation and levels adjustment layer:

Hue/Saturation Adjustment Layer Settings:

Hue: 0
Saturation: -100
Lightness: +23

Levels Adjustment Layer Settings:

53 / 0.77 / 198

You can see the result of this below:

Step 11

Our snake is looking a little too solid to pass as smoke right now, so grab your smudge tool, set to around 25% opacity and smudge areas of your snake to blend outwards like smoke.

This should create a much softer looking effect:

To add a little additional smoke, download the ‘smoke’ image from the resources for this tutorial.

Position it over your snake image:

Change this layer’s blend mode to ‘screen’ to hide the black background for the smoke and just let the smoke show through:

Step 12

Download your ‘jewel’ image from the resources for this tutorial and extract it from it’s background.

Go to edit>transform and use the distort tool to resize the jewel to rest on the front of the man’s turban. Make it much thinner than the original to give the impression of it being part of the man’s profile.

Then apply a hue/saturation adjustment layer to this jewel layer:

Hue/Saturation Adjustment Layer Settings:

Hue: +95
Saturation: 0
Lightness: +2

Step 13

Create a new layer called ‘lens flare’.

Fill your canvas with black and then change it’s layer blend mode to ‘screen’. This will hide the black fill, but allow you to apply a lens flare effect non-destructively.

Go to filter>convert for smart filters. Then go to filter>render>lens flare. Apply a 50-300mm Zoom lens fare at 100% Brightness, trying to position your main flare over the end of the man’spipe:

The image below shows this lens flare layer at ‘normal’ blend mode:

This shows the ‘lens flare’ mode at ‘screen’ blend mode:

Step 14

Create a new layer called ‘dodge/burn’. To dodge/burn your image non-destructively go to edit>fill>50% gray. Change your layer’s blend mode to ‘overlay’ to hide your 50% gray fill, and then use a soft, low opacity (around 10%) black paintbrush to burn your image, and a soft, low opacity white paintbrush to dodge your image.

You want to try and create a more unified light source. In this image we can see that the main light source is coming from the right of your canvas. So try to add highlights to the right edges of your objects, and shadow the left edges.

The images below show your dodge/burn layer at ‘normal’ blend mode and then ‘overlay’ blend mode:

Step 15

To accentuate the highlights cast on your rocks by the sun, create a new layer called ‘rock highlight edge’.

Keep this new layer active, but in your layer’s palette option+click on your original rocks layer. This will create an active selection around the shape of your rocks.

This will allow you to paint just inside the edge of your rocks without leaking out onto the background.

Use a soft white paintbrush to paint in a highlight along the right edge of your rocks:

To make this highlight effect more subtle change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 30%.

Step 16

The left edge of our rocks is looking too light considering the lighting of the overall piece.

To fix this, create a new layer called ‘rock shadows’.

Use a soft black paintbrush (around 20% opacity) to paint shadows over this area of rock:

Step 17

Apply a final couple of adjustment layers, but this time DO NOT create clipping masks for them as you want your adjustments to effect your entire composition.

Gradient Overlay Adjustment Layer:

Gradient: Default purple to orange gradient
Blend Mode: Normal
Opacity: 10%

Levels Adjustment Layer Settings:

9 / 1.00 / 238

Here is the result of these adjustments:

Step 18

Finally, to finish we want to sharpen our image just a little to make it clearer.

Go to layers>flatten image. Select your entire flattened canvas and then hit ‘copy’.

In your history panel undo this flattening, as of course we want to retain our original layers.

Then paste your copied flat image in as a new top layer.

Go to filter>convert for smart filters. Then go to filter>sharpen>unsharp mask. Apply these settings:

Unsharp Mask Settings:

Amount: 35%
Radius: 0.5 pixels
Threshold: 0 levels

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome.

Photo Manipulate an Exotic Snake Charming Scene

We will use photoshop cs5 for this wallpaper tutorial but you don’t have worry you can follow along with any other older version.

This is how the final result should look like.

STEP 1 – Creating the Cubic Abstract Shapes – abstract wallpaper photoshop tutorial

STEP 1A – Create a new document 2000 px in width and 1200 px in height.Then click OK.

STEP 1B – Create a square shape 400 px by 400 px. Fill the shape with this color (R:66,G:154,B:229). Now Duplicate the layer.Change the color of the layer to this color (R:100,G:178,B:245).Make sure that your MOVE Tool is active.Select the new duplicated layer and by holding the Shift Key move the layer in 45 degree angle to the left.The distance is not relevant.The 2 shapes that we have created are one shape element.

STEP 1C – In order to speed up the creation of the abstract wallpaper photoshop tutorial you will have to repeat the STEP 1B – 2 times.But every time you repeat the process make the distance of the moved layer smaller and smaller.At the end you should have 3 shape elements. This final result should look like in Image 1B.

STEP 2 – Creation of the Cubic Abstract Shape’s 3D look – Abstract photoshop wallpaper tutorial

STEP 2A -In this part of the wallpaper photoshop tutorial we will give a 3D look of the shapes.Now pick one shape element,it doesn’t matter which one. Create a new layer and name it Bottom_Cube_Side.Pick the P key on your keyboard to activate the PEN Tool and draw a shape similar to the one shown in image 2A. Switch from the LAYER tab to the PATHS tab and load the shape as selection. Make sure that the Bottom_Cube_Side layer is selected.Fill the shape with this color (R:38,G:126,B:200)

STEP 2B – Now you have to do the same for the right side of the cube.Repeat STEP 2A.The only changes you have to do is set the name of the layer Right_Cube_Side and fill the shape with this color (R:129,G:193,B:246).The result is shown in image 2B.

STEP 3 – Adding shadows to the Cube element – abstract wallpaper photoshop tutorial

STEP 3A – In order to make the photoshop abstract wallpaper tutorial more realistic we need to add shadow to it.Now Turn of the visibility of all layers and leave the square that is the bottom part of the element.It will be used as a guide to help us draw the shape for shadow of the cube.Now create a new layer and set it to be at the bottom of the other layers and name it Shadow Element. Now pick the P key on your keyboard and draw a shape similar in the image 3A.After that load the shape as selection and fill it with gradient from black to transparent.

STEP 3B – This step is all about refining the shadow.Pick the P key on your keyboard and activate the Pen tool. Draw a shape similar to this one shown in image 3B. After that load the shape as a selection and inverse it so the outside parts are selected. Then pick the Eraser tool and start erasing the outer side of the shadow. You should get something similar shown on the image 3B.

STEP 4 – Enhancing the Cube by adding gradient – abstract wallpaper photoshop tutorial

STEP 4A – In this part of the abstract photoshop tutorial we will soften the cube with a gradient to give the cube a more realistic look.Turn the visibility on for the layers that we turned off in STEP 3A.Add gradient to the top, bottom and right side of the cube. Use the colors that we have on the cube as dark colors of the gradient and from those colors chose a tiny lighter color as light side of the gradient. The result si shown in image 4A.

STEP 4B -Repeat from STEP 2 to STEP 4 for every other Shape Element. What you should get can be seen on image 4B.

STEP 5 – Grouping the elements in to forms – abstract wallpaper photoshop tutorial

To give the wallpaper a realistic 3D look we need to group the elements in to forms.We have created the 3 cubes that we needed.Now fist thing you have to do is put every cube in separate groups. I named the groups Big,Medium and Small Box.Now you can start your creativity and start grouping the 3 Cubes in to Forms by duplicating and transforming them.Here are the group elements i have created shown in image 5A.

STEP 6 – Creating the final composition of the wallpaper – abstract wallpaper photoshop tutorial

STEP 6 – We have created the base for the photoshop abstract background.Now we have to add some photoshop background effects to it.This step takes a lot of time because its a creative design process and in order to make it right you have to spent all the time you think its neccessary.It took me around 1 hour to setup the elements as they are shown in the image below.There is no right and wrong you just need to transform the elements till you get what you need.This is what i came up with.

STEP 7 – Separate objects in to areas – abstract wallpaper photoshop tutorial

STEP 7A – In this step we will build the base for the background designs by separating the background in 3 groups.First thing you have to do is separate the objects in 3 major areas. First area will be the objects on the outer side. Then in one area you are going put the objects that are in the middle and on a separate area will be the inside center objects. You can see how it should look like in images below.

Take the elements on the outside,duplicate them and then merge them so they will be on one layer.Name the layer Outside.

The same goes here to.Take the elements on the middle,duplicate them and then merge them so they will be on one layer.Name the layer Mid_Side.Set this layer on top of the Outside layer.

Here the inside area takes a shape like the letter P as a starting letter for Prodezen. Again duplicate the elements,merge them in to one layer and name the layer Inner_Side. Set this layer on top of the other 2 layers.

STEP 8 -Adding blur to the area elements

Here is the part where we will use some amazing photoshop effects like the Radial Blur that will enhance our design.

STEP 8A – Select the Outside layer and go to Filter -> Blur -> Radial Blur. Set Amount to 19 , Blur Method to Zoom, and Quality to Best and then click OK.This is what you should get.

This is what you should get with this photoshop cool effect.

STEP 8B – Repeat STEP 8A on the Mid_Side layer. When you come to the Radial Blur window change the Amount to 12 and click OK. Here is what you should get.

STEP 8C – Make sure that the Mid_Side layer is selected.Pick the P key on your keyboard to activate the Pen Tool and draw a shape around the right block. Make an active selection and go to Layer -> New -> Layer via Cut. Name the new layer on the right Upper_Mid_Side and the other part on the left side Bottom_Mid_Side.

STEP 8D – Set the layer order to be like in image 8D.

STEP 9 – Add additional elements

STEP 9A – Go to Layer -> New Adjustment Layer -> Hue/Saturation. Make sure to apply it to the Inner_Side layer. Set Hue to -180 and Saturation to to 14. This step is by choice.You can set any color you think its good with any value.This step is a personal choise. The values i have chosen gave me this result.

This is what you should get at the end.The creative design and inspiration comes from you and you can shape it as you like.Thats why i encourage you to spent some time and create something like this.

Amazing Abstract Cubic Wallpaper Photoshop Tutorial.

Taking advantage of wonderful new CSS3 properties we can create some amazingly elegant and stylish buttons styles without so much as the whiff of an image and have perfectly adequate fall back styles for older browsers. You may like to create your buttons straight in CSS, or you may like to head for your layout tool of choice, but it’s important to think carefully about how your button design lives in context.

It’s all too easy to simply reach for a pre-designed ‘UI Elements PSD’ that some generous soul has shared for free (and no doubt contains Apple inspired buttons). But why not take a moment to consider whether said button style is appropriate in the context of your design and consider if there’s room to create something a little more original?

Recycling someone else’s buttons is fine, it saves time, but there’s no harm in taking a moment to understand the design and composition of your (or someone else’s) buttons in a little more detail. How are they designed? Do they fit the interface/context/brand? Is there an opportunity to create something unique? Are my buttons prominent enough? Do I need primary, secondary, tertiary buttons? Do they differ substantially enough from each other? Do they look slick?! (Why not, we all want to design cool looking stuff right?!).

Here are ten quick and simple things that I always think about when designing buttons. I’m not going to share ideas on how to use layer effects in Photoshop but some simple, general design principles that can go a long away in optimizing the design of your buttons and other UI in general.

1. Matching Brand

It’s important that your buttons match their contextual style. This could mean fitting in with a color palette, graphical style or taking a lead from some form of brand guidelines or logo. Perhaps there are some prominent shapes, textures or design styles that you can pick up on. Maybe a logo has a circular aspect to it and you could pick up on this in your buttons or other potential calls to action.

If an interface predominately uses flat color then perhaps big shiny Apple-like buttons aren’t the way to go. If you can, take the opportunity to experiment with extending the brand through to the interface by using appropriate shapes, effects, coloring or other forms of embellishment.

2. Matching Contextual Style

Following on from above, stop for a moment before opening the ‘UI Elements PSD’. It’s easy to reach for grads, shadows, bevels etc. but take a moment to think whether it’s the right choice not just to match a brand but also the interface in which the buttons sit and whether they need to feel overly ‘buttony’.

Buttons may need to feel particularly button-like within an app and on mobile, for example, but with websites maybe there’s room to do something a little different with your buttons or calls to action.

3. Ensure Buttons Have Enough Contrast

With so many interface designs being inspired by Apple OS styling, particularly in a lot of the UI Element PSD’s out there, buttons can get a little lost amongst other elements being used in the UI, diluting their potentially important power. Try using color, size, whitespace or typography to ensure your buttons have the visual weight they need to stand out from the rest of the interface.

4. Consider Rounded or Shapely Buttons

Following on from the above, if there are lots of other rounded corner UI elements in your design, consider using circular  ended buttons or perhaps some other change in shape. This could give you an extra bit of contrast that ensures your important calls to action have the prominence they may need.

5. De-emphasise Secondary UI Elements

If you’re striving for an OS inspired style or you’re working with a predesigned elements PSD then it’s likely your UI elements will predominantly be rounded corner rectangular in shape. Consider reducing the level of embellishment on elements that can afford to feel less ‘buttony’.

For example, bespoke select menus, segmented controls, custom menu triggers might all be the same rounder corner shapes but using less shadow, border, bevel, gradient or other effects can help to reduce their richness and in turn promote button styles.

6. Color Match Strokes/Borders

Most buttons we see out there have some form of border or stroke on them. Loosely speaking, if your button is darker than the background on which it sits use a dark stroke of the general button color. If the reverse is true then go for a stroke that’s a darker shade of the background color. If you stick with the former and use it on a darker background I find it can make the button edges a little ‘dirty’. Using the latter can also help make your button really pop. I consider this to be a general design principle when dealing with strokes/borders in web design.

7. Be Careful With Blurred Shadows

Over the years I’ve always sworn by my ‘Shadow Law’. The ‘Shadow Law’ states that drop shadows work best when an element is lighter than its background. If an element is darker than its background then drop shadows should be used very subtly. Similar to color matching strokes and borders, I very much consider this to be a general design principle that applies to all UI elements.

8. Subtle Iconography Can Give Affordances

As well as being another small detail that can further differentiate your buttons from similar UI elements, the use of simple iconic elements such as arrows can give some sense of action and a small affordance as to what happens when a user clicks.

For example, an arrow pointing right after the text on a button maybe gives the user some sense of moving on or leaving the page. An arrow pointing down might suggest that some content will be progressively disclosed below, or perhaps some kind of menu will open.

9. Consider Primary, Secondary and Tertiary Styles

If you’re designing an interface where there are consistently lots of actions and functionality on display it may be important to establish some visual language with your buttons by establishing primary, secondary, tertiary and potentially more styles.

Consider reserving the strongest and boldest color for your primary buttons and using progressively less strength or saturation as you reduce importance. As well as color and shade, consider reducing size, whitespace, text size and level of embellishment to further reduce the visual weight of buttons that aren’t primary.

10. Always Make Feedback States

This is a no brainer really, but is often something considered toward the end of the design process. Always work through the core states required for your buttons to ensure they provide the user with sufficient feedback in their context. Users will likely have a mental model of how a button works in the real world as they use it through its various states. Some simple CSS tweaks with shadows, border and gradients and the like can give the user some simple feedback and a touch of eye candy!

Conclusion

As designers you’ll all have your own process you go through. I’ll bet a lot of the time that can involve moving your head back from the screen, tilting it slightly, squinting and saying ‘Yeah that’s about right!’. That’s part of the fun of designing of course and talented designers tend to get it right doing just that, but I think it’s always good to run a bit of internal commentary, interrogating and reasoning over the design decisions you’re making.

There’s no harm in re-using or leaning on pre-designed styles and UI elements, they can obviously save a lot of time. It may even be the case that someone has pixel-perfectly crafted exactly what you were looking for and is offering it for free. However, I don’t think there’s any harm in having a deeper understanding of the design process and craft behind what you’re creating and informing your design decisions going forward.

Principles for Successful Button Design

Mobile is the new trend and most of the businesses are recognizing it. Having a fluid and responsive website will not only make you cooler, it’s the new way of increasing conversions and engaging your visitors.

Not sure where to start? Responsive design might not be as big a mystery as you’ve imagined it. Indeed, there are frameworks and plugins that will make it much easier for you to create responsive designs. Continue reading and check out useful tools for creating responsive web design as well as 35 stunning examples of responsive web design.

Tools

1. Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

2. Gridless

Gridless is an optionated HTML 5 and CSS 3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

3. Mobile Boilerplate

Mobile Boilerplate is your trusted template made custom for creating rich mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

4. Skeleton

5. 320 and up

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

6. Fittext

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

7. Media Query Bookmarklet

The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.

8. Responsive testing

A quick and easy way to test a website design in multiple screen widths.

9. Media Queries

A collection of inspirational websites using media queries and responsive web design.

10. inuit.css

Inuit.css is a CSS framework built to work on small screens. Inuit.css has a custom grid system builder for creating fixed or fluid grid system igloos.

11. PhotoSwipe

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

12. Adapt.js

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page.

13. Adaptive Images

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. No mark-up changes needed.

Tutorials

We know that not everyone learns through reading, for some its all about actually getting up and doing it. That is why below, we are going to take a look at some good tutorials on responsive web design for those just itching to start playing with it.

1. Responsive Design with CSS3 Media Queries via Web Designer Wall

Media queries are the backbone of responsive web design, and this function of CSS3 will definitely up your ante if you’re familiar with. In this tutorial, Nick La does a great job of introducing and explaining media queries while offering a tutorial for using them.

2. Fluid Images via Unstoppable Robot Ninja

The early adopters of responsive web design were mostly text-based sites, with very few images. This is easy to understand because the one question a lot of people had that made them wary about this new practice was how images would render. Well after going through this article by Ethan Marcotte, you won’t be one of the latter.

3. How To Design a Mobile Responsive Site via UX Booth

This is a great tutorial written by Elaine Simpson, going into great detail and giving a great process to follow when going about a responsive design.

4. Responsive Data Tables via CSS Tricks

Data tables are an important aspect of showing results, or grouped information on a website. With this tutorial, you’ll learn how you can keep this aspect with style.

More Tutorials

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website via Smashing Magazine

Context Aware Image Sizing via Filament Group

Awesome Tutorials To Master Responsive Web Design via Cats Who Code

Experimenting With Responsive Design via Lee Munroe

Optimizing your email for mobile devices with the @media query via Campaign Monitor

Publications

Trying to learn new material is always hard when first starting out, which is why having great written work on the subject is a great way of easing the learning curve. That is why before going any further, we’re going to take a look at some very useful books and blog articles on responsive design.

1. Responsive Web Design By Ethan Marcotte

It is only right to start off our listing of great resources on responsive web design with this thoroughly detailed book written by Ethan Marcotte. In this book, Ethan guides an exploration of understanding and appreciated what is responsive web design. Honestly, this book very well may be all you need.

2. Responsive Web Design: What Is It and How To Use It via Smashing Magazine

This article written by Kayla Knight for Smashing Magazine is probably the best, at the very least one of the best, published articles in the blogosphere on responsive web design. This will give you a good explanation of what exactly responsive web design is, how it works, and how you’ll leave knowing some cool ways of implementing it.

3. Beginner’s Guide to Responsive Web Design via Think Vitamin

If you’re looking for something informative, and more so straight to the point, as a good introduction to responsive web design then Nick Pettit wrote the article for you. Nick did a good job at offering a very easy to follow explanation of responsive web design for the less experienced web designer or developer trying to get their feet wet in this new practice.

4. Introduction to Responsive Web Design via 1stwebdesigner

This is a solid offering by Christian Vasile at introducing those new to this topic, while also doing it in a brief manner.

More Reading

Responsive Web Design via sitepoint

Responsive Web Design via A List Apart

Responsive Web Design Demystified via Elated

Seven Lessons Learned From Responsive Web Design via .Net Magazine

Responsive Web Design Techniques, Tools and Design Strategies

Inspiration

1. Briangardner

2. Notloremipsum

3. Fortysevenmedia

4. Brace Yourself

5. Osvaldas

6. Thegregthompson

7. Studiopress

8. Food Sense

9. 255creative

10. Paperstreetinteractive

11. Raewynbrandon

12. Gonzoblog

13. Zync

14. Techdept

15. Pelicanfly

16. Marijazaric

17. Raymacari

18. Handsomecopy

19. Jaypegams

20. Joshuasortino

21. 36creative

22. Whitelotusaromatics

23. Forefathersgroup

24. Dentsunetwork

25. Upperdog

26. Teehanlax

27. Weareduo

28. Unfold

29. Builtwithmomentum

30. Glorm

31. Quazarwebdesign

32. Agenciart

33. Apgdesign

34. Createdm

Gathered and Arranged by: Jamal and Daniels

Ultimate Guide to Responsive Web Design 55 Stunning Tools, Tutorials, and Examples

This is something that should we get in the final result.

For this photoshop cs5 text effects tutorial you can use the image with the shapes that you can find right below.All you have to do is right click and save the image to your computer. Scale it to the size you like and start the tutorial from STEP 1.

STEP 1 – Blocking the shapes of the letters for the 3D Text Photoshop tutorial

STEP 1A – Create a new layer and name it text_dark_color. Now make sure that you switch from layers to the paths menu. This is show in image 1A. Click on the button create new path. Rename the path to text_dark_color. After that click the P key on your keyboard to activate the Pen tool and draw a shape similar to image Step 1A.

NOTE : Most of this tutorial is going be creating shapes load them as selections and fill them with color or gradient so plz pay a lot of attention to STEP 1 and STEP 2.

STEP 1B – Now what you have to do is to repeat the STEP 1A. You are going to repeat the step another 2 times. Create 2 new layers named text_mid_color and layer text_light_color.For those 2 layers you create another 2 paths and name them accordingly to the layer names. All of this should like on image 1D. The shapes that are going to be drawn should look like in image 1E.

STEP 2 – Blocking the letters with color

STEP 2A – Make sure that your text_dark_color layer is selected.After that select the text_dark_color path.With that done you have to be on the Paths tab and then click the button Load path as a selection. Its shown in image 2a.

STEP 2B – Now with the active selection made press the G key or just mouse click over the Gradient Tool. Make a gradient with this values (R:40,G:128,B:189) on the left side and (R:94,G:180,B:247). This is shown in image 2b.

STEP 2C – With the active selection still on make a gradient from the bottom of the letters to the top. The result of this action can be seen in image 2c.

STEP 2D – Now what you have to do is go to Paths and select text_dark_color path. Click the A key on your keyboard to activate the Direct Selection Tool. Now select the path in the inside of the P letter that we have created and load it as a selection. After that go to layers and make sure that text_dark_color layer is selected and press the Delete key on your keyboard. This will delete the inside of the P letter. The result is shown in image 2d.

STEP 3 – Finishing the blocking of the letters with color

STEP 3A – Now what you have to do is repeat STEP 2 for the other 2 layers.For the text_mid_color layer use this gradient (R:57,G:143,B:202 on the bottom ) and (R:123,G:193,B:248, as a value that is going to be on the top),you can see the shape for the text_mid_layer is colored with red color.And for the text_light_color use this gradient (R:87,G:167,B:223, at the bottom of the gradient) and (R:159,G:208,B:246, at the top of the gradient),you can see that the shape for the text_light_color is with green color.This is how the result should look like – image 3a.

STEP 4 – Start adding highlights to the letters

First thing you have to do is to create a new layer and name it highlights.By selecting the paths that we already have created select them and use them to add some highlights to the the letters.

STEP 4A – Make sure that the layer highlights is selected. Go to Paths Tab and select text_light_color path. Press the A key on your keyboard and select one of the shapes on top of the U letter. Load that path as a selection. Now pick the Gradient Tool and pick the white to transparent gradient.

Now repeat STEP 4 to more areas of your choice. You can see where i have picked the places for highlights in image 4c.

STEP 5 – Adding shadows to the letters

STEP 5A – First of all create a new layer and name it shadows.Set the layer to be on top of text_dark_color.You have to know that adding shadows to the letters is the same process of adding the highlights. So STEP 5 is repeating STEP 4, but this time instead of a white to transparent gradient, we will use black to transparent gradient. The result is shown in image 5a.

STEP 6 – Adding dark shadow at the bottom of the letters where they meet the ground

Create a new layer and name it Bottom_Dark_Shadow.The layer should be place right beneath the text_mid_color. That means that it will be placed at the bottom of the layers with the color and just above the 3D scheme layer. Now press the P key on your keyboard to activate the pen tool and draw lines as shown in image 6a. You can place them in a new path if you like it doesn’t matter.I have named my path Letter_ground_dark_shadow.Now load those paths as active selections and fill them with black color.The result is show in image 6a.

STEP 7 – Adding highlights casted from the ground to the letters

STEP 7A – The ground always reflects part of the casted light.This light hits some bottom areas of the letters and makes them just a little bit brighter then other areas. Create a new layer and name it Bottom_reflected_light. Set the layer to be just on top of the shadows layer.Now press the P key on your keyboard to activate the Pen Tool and draw a shape similar to the one shown in image 7a.In the Paths tab name the path as Bottom_reflected_light.Load it as an active selection and with the Bottom_reflected_light layer selected, fill the selected layer with white color.

STEP 7B – This step is a personal choise.You can leave it like that but its to strong for me. So what i did is lowered the the opacity of the Bottom_reflected_light from 100% to 30%. This is the result that i got (image 7b).

STEP 8 – Adding ground shadow to the letters

STEP 8A – Create a new layer and name it ground_shadow.Now switch from Layers tab to Paths tab.In the Paths tab create a new path and name it ground_shadow. With the new path ground_shadow layer selected press the P key on your keyboard to activate the and start drawing some shapes.Then after the shape is created, activate the Gradient tool and and apply a black to transparent gradient to the 2 ground shadow shapes.The path shape is shown in the top of image 8a and the gradient applied is shown in the same image at the bottom.

STEP 8B – Now with the same ground_shadow layer selected pick the Dodge Tool by clicking O on your keyboard. With the Range set to Shadows and Exposure set to 15 dodge a little bit the shadow shown as in image 8b at the top.The effect can be seen in image 8b at the bottom.

STEP 8C – Pick the P key on your keyboard to activate the Pen Tool. Draw a shape similar to the one shown in image 8c at the top. Now go to the Paths tab and load the shapes as active selection.This will allow to us to make the shadow lighter at certain areas.WIth that done pick the O key on your keyboard to activate the Dodge Tool and Dodge the shadow with more intensity.Set the Range to Highlights and Exposure to 15 %.Now Dodge a little bit.The result of the Dodging can be see at the bottom of image 8c.

STEP 9 – Adding brightness on the letters

STEP 9A – Create a new layer and name it Brightness.As before pick the P key and draw some shapes and fill them with white. You can see how it looks like on the image 9a.

STEP 9B – Now with the Brightness layer selected go to Filter -> Blur -> Gaussian Blur. Set the Radius to 47 px and click OK.Instructions are shown on image 9b.

This is what you should get.From this point you can make some tweaks that you like or enhance this 3D text with more design ideas you have.

I have tweaked it just a bit just to show you that if you have any idea you can make it by trying to improve the design.

Up – Cool 3D Text Photoshop Tutorial

Along the way, we will practice some pen tool selection technique, image adjustments, layer mask and filter effect.

Here is a preview of the final effect I have for this tutorial: (click to enlarge)

Step 1

Create a new document with black background (size doesn’t really matter here, I used 700px * 700px). Load the portrait image into Photoshop, use Pen tool to select the face area:

Make this path a selection, copy an paste the selection onto our document, resize and place it in the centre:

Use a soft eraser to remove the edges of the face in order to blend it into the background:

Step 2

We will manipulate the face in this step – firstly, use the downloaded grunge brushes as eraser, erase some part of the face off as shown below:

Use the Burn Tool (Shadow, 15% exposure) on top of the following areas to prepare for the later adjustment layers:

Add the following 3 adjustment layers as clipping mask to this face layer:

Black and White

Levels

Curves

and here is the effect so far:

Step 3

Create a new layer under the face layer, use a soft orange brush to paint some fire shape as shown below:

Create another layer on top and paint some yellow colour with a soft brush:

Go back to the black and white adjustment layer in the previous step – on its adjustment layer, use a soft eraser to remove some parts around left eye:

Step 4

Now we will add the roots into the photo. Load the roots image into Photoshop and select a piece as shown below:

Copy and paste the selection onto the canvas, then apply this reduce noise filter to this texture:

Use a soft eraser to tidy up the edges, you will have the following effect:

Add the following 3 adjustment layers as clipping mask to this texture layer:

Black and White

Levels

Curves

and you will have the following effect:

Put all these layers into a layer folder, duplicate this folder a few times and scatter them around the face, as shown below:

You can also use the liquify filter to add some flowing effect around the edge of the roots, as shown below:

Step 5

Now we can add some overlay highlights around the eye and forehead area: use a soft brush with overlay blending mode to paint to the area shown below:

We can add some flying lines around the canvas: firstly we can draw a blue line with 1px hard brush:

Then use the liquify filter to warp this line as shown below to add some flowing effect:

Then, create a new layer on top of this blue line layer and set it clipping mask , use a soft white brush to paint a dot on the front tip of the line, change the blending mode of this white dot to “overlay”. This will add some highlight to this line:

Put those two layer into a folder, duplicate this folder a few times and scatter them around the canvas, as shown below:

You can also paint some lines over the left eye to add some motion into the picture:

Step 6

We’re almost done! In the final step, we can further add some grungy texture with the grunge brushsets we downloaded around the face area:

Use a colour balance adjustment layer around the left eye area to enhance it’s yellow colour:

Hint: draw a selection around the eye using a 20px feather lasso tool, then add a colour balance adjustment layer. This way mask will apply automatically on this adjustment layer.

I then further added some colour and light adjustments and here is the final effect I have: (click to enlarge)

That’s it for this tutorial! Hope you enjoy it and find it useful! Till next time, have a great day!

Design an Interesting Human Face Manipulation with Tree Roots Texture in Photoshop

Why is responsive web design crucial? Because there are so many screen sizes out there, that designing a solution for each one of them is too costly and there is no real reason to do this. Responsive web design offers us the solution to designing for all screen sizes in the same time back in 2010 and since then it became a trend. Responsive web design is brilliant and the results are more than satisfying.

Back in 2011 many websites started to be coded responsively and while the concept is still young, it is already well known and popular. Media queries are a great invention and only show how web designs keeps running just behind technology evolution. Having a version of your website for a mobile phone is something everybody needs to have today, because let’s face it, who doesn’t (or will not) have a smartphone or a tablet?. Now we have internet wherever we go, 24 hours a day, 7 days per week.

Images courtesy of mediaqueri.es.

Besides making websites work on all screen sizes, building websites responsively taught us something else as well: that content is as important as ever. Content is also in focus when designing responsively, because we need to cut back on too many design elements and make the content easy to read and clear; fonts have a very important role here as well.

If you thought 2011 was the year of responsive web design, I think you are wrong. Buckle up, 2012 will bring even more exciting things.

Grid systems are also partially involved in responsive web design. More and more of them appear on the web and people have started using them more frequently. Now that they’ve been out for a long time designers are starting to trust them and this only makes the web better. Frameworks were very popular in 2011 and will continue being so in the following years. They offer fluidity and give a sense of discipline to every design built on them.

designinfluences.com/fluid960gs/

cssgrid.net/

960.gs/

Typography is not something that just appeared last year, it’s been out for a long time. Steve Jobs said himself that he studied calligraphy back in college. That was more than 30 years ago. Typography started as a discipline on the web around 5 years ago, when people realized how powerful it can be and the effects it has over how people perceive content. Typography continues to grow, people continue (or start) to read books about it and get better at combining typefaces and using them properly in order to create the desired effect.

However, for the last year something is worthy to note – people started realizing fonts are made to be read and likewise the content. Using too many fancy fonts that were difficult to read disappeared and this will continue in 2012. Education happens really fast on the internet nowadays and people tend to learn about common sense in design more than everything else. Emphasizing content is still something people have to learn more about, but this is exactly what is going to happen in 2012.

englishworkshop.eu/

kantt.dk/

The fold’s importance has been played down a lot in the past couple of years since smartphones emerged. People now think it is OK to scroll. I debated this topic one month ago here. People can have their own opinions and this made some of them start realizing scrolling isn’t a problem for users. And let’s face it, nothing is a problem until you make it a problem. If scrolling is not an issue for you, then the fold’s importance is minimal.

Now that smaller screens have become popular, scrolling is something that people just can’t avoid, so we will have to embrace it. The ones trying to play down the fold’s importance managed to do it thanks to the technology and gadgets which emerged on the market in the last years. With this trend set to continue, it’s clear “the fold” will be history by the end of this year – or at most by the end of the next one.

However, if there is something we will see a lot of during the next years, then this is the parallax effect. It is at its bottom scrolling, but not by using the wheel or the trackpad. You simply scroll to another area of the page by clicking the buttons in the menu. The parallax effect is something I simply love and I can’t wait to see more of it – it is just such a great way to make peace between the fold-lovers and the other people. The only issue is that it doesn’t fit with the responsive web design at all, so this is something that developers will try to sort out during 2012.

Using modular interfaces is also something that has become quite popular lately, although it is still a debatable practice. There is not much research behind it and we are still not sure how well it works – but this is why we have 2012. This year we will see how successful the modular interfaces will get.

Google Web Fonts

People will also keep it minimal. Minimalistic design has been the most popular throughout 2011 and this style will continue dominating the industry – although not very easy to design because of its multiple theories, it is quite easy to code and is very pleasant to the eye. It is simple, gets right down to the point and doesn’t waste anybody’s time – just what everybody looks for – information given as fast as possible.

Simple, eye-catching and elegant designs will emerge even more and will continue to stand out in 2012. People with inspiration and imagination will turn their designs into huge hits. With minimalistic web design being very simple, there are not too many ways of finding something new that nobody thought of before. The designers that manage to do it this year will definitely be the key people of 2013.

wearepropeople.com/

freshness.hu/

Otherwise I don’t see too much new stuff coming in 2012. I see designers and developers continuing on the same track and improving the concepts and tools they use right now. I also see web designers digging motivational articles even more, because this is something that keeps them running.

Until next time… what do you think I missed? Is there something else you consider important enough to mention? Do you have a prediction for this year?

What is the Trend for Web Design in 2012?

As I have learned more about the complexities of light, I have begun to appreciate to a greater extent the magical experience of shooting just after the sun has set, utilising the fading ambient light to create some of my favourite work.

What’s so special about dusk?

So often in photography you will hear that it’s all about the light and who am I to disagree. The fundamental element of photography is the light used within the shot as it dictates the outcome of the photograph.

Twilight offers a unique lighting scenario, within which ambient light (sunlight) gradually fades, creating a sparse but magical effect that is almost impossible to create artificially. It fades into the artificial light being emitted by street lights. Houses and offices and can sometimes create an ‘un-real’ feel as the shortage of light diminishes the eye’s perception of distance.

Photo by Subadei

Portraits before the sun goes down

So before we get on to the hours of twilight photography within which the sun has set, I just wanted to highlight the opportunities offered by the hours just before sunset, often referred to as ‘The Golden Hours,’ along with the hours around sunrise.

This natural formation of light offers extremely beneficial photographic conditions, as the low golden light from the sun is projected sideways. It delicately warms the subject matter with enough light to work with, without having the over bearing brightness of direct sunlight closer to midday.

This can be extremely useful for landscape photographers, but is also utilized by portrait photographers looking to conduct a shoot outdoors as it offers a very welcome warm glow to their models features.

Photo by Sean Molin

Timing the magical light

So when do you find this inspiring lighting effect? Well, timing is everything. So head out well before the sun has set, at least half an hour and find a suitable location for your shoot. Set yourself up and start shooting. Be sure to peel your eyes away from your viewfinder to appreciate the changing light around you. The ethereal atmosphere will be present as the ambient light fades into darkness.

I like to continue shooting as the light changes, often leaving the camera on it’s tripod in the same spot, so I can see the changing light through the series of shots.

Photo by Aigle Dore

What settings are required for shooting in low light?

You’ll find that you need to keep adapting your settings according to the amount of ambient light available. However, I’ll try and fill you in on what would normally be required for shooting in low light.

First up, you’ll be using long shutter speeds, anything longer than 1/60 and I’d use a tripod. It will be essential for keeping your camera steady and getting sharp shots after the sun has gone down. When working with landscape shots a narrow aperture is required to ensure a deep depth-of-field.

As you are using the shutter speed to control the light, this won’t need to be adjusted according to the light available, but purely to ensure the correct depth-of-field. You can also afford to select a low ISO, as you do not need to increase the sensitivity of the sensor as you have enough light coming in due to lengthened shutter speed.

As far as white balance is concerned, when working in tricky lighting conditions, I would always shoot in RAW and adjust custom white balance in post-processing. As the sun goes down and the light fades, the temperature of the light will change as you move from capturing purely ambient light, through a combination of ambient and artificial light to purely artificial light. This way, you can alter the custom white balance settings according to the type of light within each shot.

Photo by Alternate Words

Working with landscapes in the evening

My favorite type of shot to take during the twilight hours are landscapes. The warm, colored light breeds an other-worldly atmosphere which only seems to enhance the breathtaking scenery before you. As always with landscape work, finding the best vantage point is essential. Once you’re there, it’s a case of letting the light work it’s magic. Be patient.

Look for particular highlights with the scene before you that might add interest to your shot. Foreground elements are always welcome. When working in mountainous terrain, look to capture the distinction in depth between the mountains closer to you and those further away. As the light fades the tones of further away objects will become more faint, highlighting their distance.

Photo by Simon Bray

Stunning sunsets

As I admitted earlier, I’m a sucker for taking photos of sunsets, but many photographers get tired of seeing endless sunset shots as they can all get very predictable. It’s essential to try and be inventive. Utilizing the colors in the sky is obviously essential, but try and compose your shot in a way that adds more interest and depth to the scene than purely the colors on show.

Add some foreground interest or find a line that the eye can follow through the shot to add some depth. Try using a filter, such as a graduated neutral density filter, to enhance the color in the sky.

Photo by Simon Bray

Getting great urban shots

It’s not only landscape shots that can benefit from evening light, you can also get some great city and urban shots. Try working in amongst the architecture before the sun has set. The low sun will cast ambient light over the buildings and can create some really attractive contrasted scenes alongside the shadows.

Later in the evening, as the sun sets, try to find a vantage point to get a cityscape shot. The fading ambient light and glowing artificial lights will offer the perfect city scene to capture with a long shutter speed.

Photo by Simon Bray

Subtle silhouettes

With the fading light, it’s not always possible to light subject matter adequately, but do not worry, these twilight scenes are the perfect time to try some silhouette photography! Look out for opportunities to work with interesting corresponding shapes. It’s important to utilize the available light as the back drop for your silhouettes to enhance their form, particularly if there are attractive colors in the sky.

Photo by Luz

Dealing with practicalities

It always pays to travel prepared, and when you’re heading out into the night to take photographs it’s even more important. Always take a torch, just a small pocket sized flashlight, it will not only help you find your way but will also aid you when trying to adjust settings on your camera.

Make sure you dress for the cold and account for the fact that it’ll be a lot colder once the sun goes down! Tell someone where you’re going and when you expect to be back.

Photo by Ed Yourdon

Now it’s over to you!

Hopefully, you are now equipped and prepared to go and take some of your own twilight shots. The difficulties of ensuring that there is enough available light is easily outweighed by the magical quality of light that can often occur (depending on the weather).

You could choose an area or specific subject to work with, or just go on a photo walk and shoot as you explore your surroundings, it’s up to you. As always, please feel free to share any shots you’ve taken in the comments below.

Photo by Mgermani

An InDepth Look at Dusk and Twilight Photography

This discussion will cover some basic pointers that you must keep in mind while hunting for the best font for your upcoming design. Remember, at the end of the day, the end result must be aesthetically pleasing. 

NOTE - My examples and my text in this discussion might look overly simple but it has been done with a purpose. The whole idea is to provide you with an explanation using the simplest possible style. (Was this a disclaimer?)

Analyze Your End Result

Isn’t that obvious? You can’t start searching for the best font unless you are sure of the end market for that font. Jot down the kind of viewers that you are expecting. Will the readers of your website be night life lovers or white collar employees? All this depends on the type of content and your niche.

See, it is very easy to just decide on a font and go with it when your readership isn’t huge and you’re just starting out. It is later on that you will understand how much the wrong font selection can effect your site (after you’ve finished this article, there will be no reason for you to make bad font decisions). Once you understand your goals these tips will be more meaningful.

The White Space

Those who smiled after reading “The White Space” know exactly what I mean. A font that does not care about the spacing between two letters can mess it up big time for you. Tightly placed letters can confuse an eye and result in visuals that aren’t actually there. Properly calculated white space helps the eye to run as fast as the mental skills of the reader permits.

I don’t mean that white spacing must be taken care of all the time. There will be niches where the abrupt spacing of letters will give a high to its readers. But, such cases are rare.

Don’t Over Experiment

It will be weird if you opt for a font with uneven shapes and sizes just because they provide the artsy look you want for your text. If you end up with fonts that have artistic deformations then the reader’s brain will take more time to process the information. Like, the below image I tried to over experiment with fonts and you can see the end result. Total confusion!

The delay in time might just be enough for the reader to move on to another window. Something that you don’t want! Do you?

Headline Fonts aren’t Meant to be Paragraph Fonts

Get it? C’mon! Wasn’t that simple to understand? There are fonts that are designed for a specific purpose. Fonts that are specifically designed for headings. You use them for headings and the reader will be in awe of your choice of font. But, just because a font looks good as a header or paragraph font, that doesn’t mean the opposite is true.

A font designed for headings will never fulfill the purpose when used in paragraphs. Now get it? Huh!

The Classic Choices

Times New Roman might not provide your design with an over-the-top edge but it also won’t look terrible. These good old fonts have been around for ages and they have been used over and over whenever designers were confused about the right font.

It might not give you the high that you are looking for but sometimes these fonts are just enough (like the font selection in New York Times). Perhaps, they are the high quality font that will complete your design. You just don’t know yet!

Avoid High Contrast

So, how does contrast apply into the world of fonts? Wasn’t this supposed to be inclined towards the world of photography?

Enough kidding! By contrast I mean the difference in design of two fonts. It is suggested that you don’t use two completely different fonts on the same page and, moreover, next to each other. Please understand that it is the gradual change which is soothing for the reader’s eye. If you end up confusing the reader’s mind by drastically changing fonts at short intervals then it might just kill the purpose.

Designers have to choose fonts that merge with their design and not fonts that pop out and kill the design. Make sure you help the reader save time instead of wasting their time while they try to understand what is happening.

But, do get a Little Cheeky

Some of my above tips might prevent you from getting cheeky, but that does not mean that you are not permitted to experiment. Though you got to stick with the standard decision throughout the design yet there can be these occasional texts that will stand out and leave your readers wanting for more. Experiment!

The Magic Formula to Wrap this up

I guess we have already done plenty of reading over here so I thought why not submerge my traditional conclusion with the last (and the most obvious) tip. See, at the end of the day it will be your choice that will prevail so instead of thinking too much just follow the basic steps that you would follow in any situation (which is nowhere related to fonts):

• Look for familiar fonts and create a list.
• Look out for fonts that you haven’t seen before. You will have to dive into forums and various typography websites but the research will be worth the time spent.
• Start playing with each font in your end result and see which suits your design the most.
• Increase/Decrease the size of font and make them uppercase occasionally. See how they look.
• Choose with your gut feeling.

Remember, if you like it then you will be able to represent it too. But, if you aren’t confident with your choice then you will find 10 critics killing your hard work. Be confident (and vigilant)!

How to Choose the Perfect Font for Your Needs

Networking Guide for Bloggers Making a Good First Impression (Part 5)

In this tutorial you’ll learn how to give your photos a darkroom look by adding light leaks in Photoshop.

Click on the Adjustment Layer button at the bottom of your layers panel, and choose Hue/Saturation.

The Hue/Saturation layer will appear above your photo layer.

Click on the layer to make the Hue/Adjustment settings appear.

Take the Saturation down to -20, and take the Lightness up to +15.

This dulling of the photo will have given it a faded look.

Next click on the New Layer button at the bottom of the layers panel.

The new layer should appear above the Hue/Saturation layer, you can name it ‘light leak 1? by double clicking on the text.

With this layer selected choose the Marquee tool and make a rectangular selection over the left side of the photo.

Next got to Edit>Fill, and for the Contents choose Color, then select a bright red.

This will have filled your selection with red, and you can now go to Select>Deselect, to remove the selection.

Next go to Filter>Blur>Gaussian Blur and take the Radius up to 130 pixels.

Now click on the blending modes dropdown list and choose Color Dodge, then set the Opacity to around 90%.

This leaves you with a red light leak across the left of your photo.

Next we’ll add some yellow.

Add a new layer above the first light leak layer, then use the Marquee tool to draw a rectangular selection about half way across the first one.

Again, give it a Gaussian Blur set to 130 pixels.

Set the layer’s blending mode to Color Dodge and the Opacity to 90%.

Next we’ll add a different light leak, this time with a streaked effect.

Choose the Oval shape tool and draw a vertical red oval on the right side of the image.

This time got to Filter>Blur>Motion Blur and set the Angle to 90 degrees, and the Distance to the maximum amount.

This will have vertically blurred the shape, but made it loose some visibility.

So duplicate the layer, then right click again and choose merge layers.

Change the layer’s blending mode to Color Dodge, and it’s Opacity to 60%.

Next give it a Gaussian Blur set to 8 pixels.

Finally we’ll add some dust to the photo. You can find some great dust textures here.

Once downloaded, drop the texture into your document above all the other layers, and change the layer’s blending mode to Screen, and it’s Opacity to 90%.

Below are a couple more examples of the effects that can be created using this technique.

Creating Digital Light Leaks

How to Design the Clineo Portfolio Template

Five of our lucky readers will have the chance to win 1 of 5 Business Subscriptions worth $99 each. But that’s not all, winners can access all existing icons and upcoming ones for THREE YEARS!

That is a big WOW!

What is Web Icon Set?

Web Icon Set provides professional and quality royalty-free stock icons for designers. By being a member, you can have access to over 1,000+ premium icons including Pictograms, Stock Icons and Mini Icons with for a very affordable subscription fee. All of the icons are perfect for websites, web applications and wireframes. Feel free to check out Web Icon Set’s Free Icons too!

If you have a blog, website, email list or Twitter account then you can join the Affiliate Program and earn a 40% commission per sign up!

The Giveaway

• Several hundreds of Icons
• Over 700 Pictograms
• 400 Stock Icons
• 500 Mini Icons
• Unlimited download
• FOR THREE YEARS!

The numbers will keep on growing!

Pictograms

Stock Icons

Mini Icons

How to win:

All you have to do is share, like, tweet, and comment for a chance to win one of the 5 Business Subscriptions of Web Icon Set worth $99 each!

When you tweet or +1, don’t forget to post them on your comment.

Note: when you comment, be sure to include your email address on the form (we won’t spam you!) or we’ll just contact you via your social media accounts.

Winners will be announced next week. Until then, keep on sharing!

Web Icon Set Giveaway 5 Business Subscriptions for our Loyal Readers

Even if most people consider the motivational articles a waste of time, they actually offer solutions to problems more important than color theory, typography or web usability. The inner problems can stop freelancers from finding the right balance between work and personal life and, at some point in time, can even force them to retire or change careers.

The issue with having bad moods or difficulty getting into a working mood is that it seriously affects your results. It can make you miss deadlines, deliver poor-quality products and even break agreements before being done with them. If you are interested in being efficient, then this article is targeting you. If you don’t know how to be, then pay attention to this advice

Lack of motivation

Most of us have a goal in life. It can be a job you always dreamed of having or something that will bring you lots of money. It’s totally up to you. When you’re still going after the goal, you motivated are most of the time . However, when there is nothing more to achieve (or no more goals to achieve), lack of motivation appears very often and damages your work. Working in the same position for a long time may also be another why you lack motivation.

Let’s face it, few of us would work if we didn’t need it to survive. Sometimes it just gets boring to work, it’s highly unlikely that it you aren’t nodding your head in agreement yet. The good news is that there are many ways ways to cure a lack of motivation.

Image by DonnaGrayson.

Steve Jobs said it himself: “Stay hungry, stay foolish!” By always wanting more, there is always enough motivation. Regardless of where you are right now, always wish for more. This way you will always work in order to achieve that goal you set for yourself. You also need to find a balance between work and personal life. Having too much free time can affect your productivity while spending too much time at work can damage the relationships with your family and friends – and maybe even more importantly, your health.

Lack of clients

If you work freelance, you are most probably delivering the work and finding clients. This can be overwhelming and with no work there is no money. It is something every freelancer is afraid of, especially the ones who are inexperienced.

Some solutions could be saving money for back-up. Lack of clients might be something all of us will encounter sometime and it is very good to have some savings. Not having clients is worse than getting fired from your 9-to-5 job, because if you get fired there, you are probably entitled to some kind of financial aid; there is no such thing while you freelance (it might, however, depend on the country). Therefore always be wise and have some money for the rough periods.

Another good way of solving this problem is maintaining contact with several clients. Having your income come from only one client is dangerous, but working with more at the same time is likely to feed you for some months to come.

As I always say, when you deliver a project make sure to check on the client once or twice afterwards. Make sure you maintain a good relationship with your former clients, otherwise there is no chance you will ever get hired by them again. However, if you convince them you are more than just “the guy who designs websites”, they will even further recommend you to their clients.

Family issues

Let’s face it, none of us are working machines. We provide good results based on external factors (skills) and internal ones (inner behaviour, trust, confidence, motivation etc). Both are important. If we have problems at home, how will we be able to focus on work? Our relatives and friends have a huge influence on us and one of them being sick or going through other difficulties is surely going to damage your motivation and self-belief. Any issue you have at home will affect your work life more or less.

I know it is something very difficult to work with, but making a clear difference between personal life and work will solve these issues in the end. However, this is not something you will achieve very easily. It might as well be the most difficult problem you will encounter during your freelance career. While clients and motivation come and go, family problems usually just come and will only disappear after long periods of time.

Image by auroneurotica photo.

Talking to your family about your work might help. Letting them understand what you do and why you spend so much time on even small projects, but also telling them that their behaviour affects yours and the monthly income will probably solve the problems you have. By trying to show you are the busy boss you will not solve too much – but you will do it by talking. Communication is important in today’s reality.

Fights with bosses

Although not all of us have a boss on paper, all of us have one, even freelancers. If the client is the one paying  you, he is most definitely your boss. You probably won’t last long at an agency if you’re always arguing with your boss. Bosses are usually disregarded by employees, but having a good relationship with them will help you along the way. Web design agencies work usually as a team and having a weak link in your team will decrease the chances of success.

Sometimes it might be just too difficult to agree with your boss. Most of the time in this case it is easier to just try following their advice – even if it is something you do not agree with. In the end, you can always hold them responsible for your poor work if they just push ideas down your throat.

I, however, prefer to use dialogue. I always prefer to communicate before making any major decision. And most of the time there is a reason behind someone being my boss – so I respect that. Remaining frustrated is never going to solve your disputes with your bosses, so try to free yourself and follow his advice. And let’s face it, it’s never nice to have a boss who wants to take revenge on you for something.

Difficult clients

We all encounter, at some point in time, the so-called “client from hell”. People who only know the basics at best and think they know better than us  – this is when we start calling them clients from hell – when they think they know better.

Image by Filippo Venturi.

It is very difficult to work with them because they will do everything to convince you they know better. And while they pay, there is not very much you can do other than try to discuss things with them. Some of them can even get aggressive and instead of just giving some feedback, actually force you to do something. It is very difficult to maintain a good relationship with this kind of client. Although some say communication works, I doubt it. These people are not willing to listen. They just want a product, know how they want it to be and that’s it.

In my opinion not dealing with this type of client at all is the way to go. When you feel one of your potential clients might be a difficult one to work with, just avoid him. It might sound weird – we are all designers and look for work, but we need to avoid these guys. Well yes, it is weird and it shouldn’t be like that, but think that some of them don’t even pay. Some of then will knock your moral down to the ground. After working with two or three of those, you will need a break. It is not worth it. Drop them and move on!

Bonus: lack of inspiration - a whole article about it.

Bottom line

Freelancing is something very challenging and now and then you will encounter these difficulties, but the quicker you get past them, the quicker you will be able to get back to work and earn some money. As said earlier, all these motivational articles are good for you and your work process in general, although in the beginning they might seem like a waste of time. If you find yourself surrounded by all these kinds of problems, it is best to even spend some money and buy books about how to solve them – there are hundreds of them out there and they can’t do any harm.

Until next time… which of these problems do you encounter most? How do you solve them?

How to Overcome the Bad Moments of Your Career Like a Boss

Along the way, we will mainly talk about how to use layer blending mode and adjustment layer to apply texture onto the text.

Get your creative juices flowing by checking out some of the inspirational business cards created by top notch designers.

Here is a preview of the final effect I have for this tutorial: (click to enlarge)

Alternative version with cooler colour:

Step 1

Create a new document with 1200px * 700px with black background. Let’s start by preparing the background – load the paper texture image into Photoshop, select a piece of it as shown below:

Copy and paste the selection onto our canvas (resize to fit if necessary), add the following 2 adjustment layers on top of it:

Black and White

Levels

Use a soft eraser (set opacity and flow to be 40%) to remove some parts of the paper texture, you will have the following effect:

Step 2

We will add some metal texture onto the background – load the metal texture into Photoshop, select a piece as shown below:

Copy and paste the selection onto our canvas, then change the blending mode to “overlay”, you will have the following effect:

Add the following 3 adjustment layer as clipping mask to this metal texture layer:

Black and White

Levels

Curves

and here is the effect so far:

Step 3

We will start making the text effect – load the font and type some texts onto our canvas:

Apply the following layer blending mode to the text layer:

Drop shadow

Bevel and Emboss

Then add a layer mask to the text layer, erase the lower part of the text with a soft brush:

Then paint some shadow under the text with a black soft brush to add some depth:

Step 4

Now we will add the metal texture onto the text – go back to the metal texture and select a piece with the text layer selection:

Copy and paste the selection onto the text, you will have the following effect:

Add the following 2 adjustment layers as clipping mask to this text metal layer:

Black and White

Curves

Then, go back to the text metal texture layer, use a soft eraser to remove some part of the texture, as shown below:

Hint: make sure you set the eraser flow and opacity to be around 20%, and gently erase the texture. This will add variety and depth for the text.

Step 5

We will add some fire texture onto the text. Load the fire image into Photoshop, and use a 30px feather lasso tool to select a piece:

Copy and paste the selection on a layer below the text layer, so it appears behind the text:

Hit Ctrl + L to bring up the levels adjustment tool, apply the following setting:

Change the blending mode of this fire texture layer to “Screen”, you will have the following effect:

Duplicate this fire layer a few times, resize and rotate them, scatter them around the text:

Step 6

We’re almost done! To add some more details, I flatten the image and applied some “Reduce Noise” filter effect as shown below:

Add a new layer and use a soft white brush with around 40% flow and opacity, paint some highlights for the text:

Add a curves adjustment layer on top with the following settings to bring out more contrast:

I then further added some colour and light adjustments and here is the final effect I have: (click to enlarge)

Alternative version with cooler colour:

That’s it for this tutorial! Hope you enjoy it and find it useful! Till next time, have a great day!

Create a &quotReal Steel&quot Film Poster Inspired Text Effect in Photoshop

How to give a Glass effect to text? Here we tried to show you in simple steps.

Lets get started…

STEP-1

Let’s start by creating a new document. Set the dimensions of the canvas to 900×1200 px.

STEP-2 (Creating gradient background)

Double click on the Background layer to access Layer Style and  add Gradient Overlay as I shown

Arrange colors in gradient Editor as shown and click OK

Background will look like this after adding Gradient Overlay

STEP-3 (Adding cloudy texture)

Create a new layer and set the background color BLACK and foreground color WHITE in the bottom of tool palate, then go to Filter > Render > Clouds. Change the blend mode to Overlay and reduce opacity to 50%.

STEP-4 (Creating glassy effect)

Create a new layer and Type your text with Horizontal Type Tool (T). I have chosen font Cooper Std. Size 225 pt.

Double click on the text layer to access Layer Style and  make changes as shown

Then add inner shadow as shown below

Next add Outer Glow

Next add Bevel and Emboss

Next add Gradient Overlay

Then add Stroke

After adding all above styles the effect will look like this.

STEP-5 (Arranging text)

Duplicate the text layer and place it in such a way one overlays the other to witness the glassy effect

Now add your own text, I go with “GLASS”

STEP-6 (Create shadow)

Create a new layer, draw oval shape and go to Select > Modify > Feather (Alt +Ctrl + D) give feather radius 10 pix then fill it with BLACK color and keep this layer below the text layers.

STEP-7 (Creating mirror effect)

Duplicate all the text layers and merge them. Then with transform selection (Ctrl +T) flip vertically and place it below the original text as I shown.

Erase slightly at the bottom part using Eraser Tool (E) and reduce the opacity of the layer to 50%

STEP-8 (Adding special effect)

In a new layer using default brush Crosshatch4 with 50 px. Create star glow effect on text with white color as I shown.

here is how our final effect looks.

Final Image:

Make an Awesome Glassy Text Effect in 30 Minutes

Okay, so who are the winners?

The Lucky Winners:

1. Igor Nikitenko
2. Gorkii Baksim (baksimgorkii)
3. Vincent (commenter #55)
4. Chucky (commenter #59)
5. Kamil Burek (Mestiso)

Congratulations everyone! We will be contacting you shortly on how you can claim your prize. In the meantime, don’t forget to tell your friends about TN3Gallery.

Winners have been randomly selected.

The Prize:

Winners will get a single domain license containing all of the image gallery’s features.

Horizontal Thumbnail Carousel

Vertical Thumbnail Carousel

Want it too?

There is a free version that you can try, and upgrade to Pro license if you want to explore more.

What are the features of the Free version?

• Search engine ready
• Image preloading
• Supports mobile browsers
• Transition effects
• Fullscreen option
• Cross-browser support
• Optional captions
• CSS skinning on default skin
• Works with Cufon and @font-face
• Document-wide linking
• Horizontal thumbnail carousel
• Slideshow
• Powerful API

What is in Pro license that isn’t on the Free version?

• Fullscreen keyboard navigation
• Option for additional skins
• Multiple albums
• Vertical thumbnail carousel
• XML support
• Multiple galleries on same page
• Flickr support
• Picasa support
• Mouse wheel navigation
• Permalinks for images
• Dynamic image sizing
• Unbranded
• Support and Updates for 1 year

If you’re an affiliate marketer looking for other products to promote, then TN3Gallery is for you. TN3Gallery offers 50% commission for their affiliates for every sale.

Congratulations!

TN3Gallery Giveaway Winners Announcement

Tags

• daily inspiration

This post is part of our daily series of posts showing the most inspiring images selected by some of the Abduzeedo’s writers and users. If you want to participate and share your graphic design inspiration, just send us, via email, the image with the link from where you found it, also use “Daily Inspiration” in the subject, and don’t forget to send your Abduzeedo username; or via Twitter sending to http://twitter.com/abduzeedo.

If possible use the HTML code: <p class="imgC"><a href="Link to the page you found the image"><img src="Link to the Image" /></a></p>

Do you want to see all images from all Daily Inspirations? Check out http://daily.abduzeedo.com

You can also submit your images and inspiration to RAWZ via http://raw.abduzeedo.com/

Alen Lipuš

Ariel Vicioso

Arjun

Artem Mukhin

berkaydaglar

blackdreamer

Bogdan Sandu

Casper Biemans

Cédric Léonard

cuded

designaemporter

Gabor Kerekes

Giovanni Giaquinta

gustando

humza

jenpique

jesuislelit

Joachim Beyrowski

krzysiek

ktcify

Let me be inspired

Luis Arenas Ortiz

Magyar Peter “MEDOKS”

marcopuccini

max

Mushcube

nenuno

Pascal Meyer

paydencobern

Petr Mika

rebins

sawasdeekarn

sea-graph-x

solemone

thaeger

thefreedomclub

Tobia

UCHEUGO

Visuall

weiting06

Daily Inspiration #1061

Note - My initial way will be more or less generic and will depend on how much you practice the same. You will have to scan your typeface multiple times and experiment with the steps that I will list. The second way will help you understand a hidden Windows tool that can be used to create characters that can be used over and over using your Character Map.

Create Your Own Font Using Paid Software

This method is going to be a bit boring and might just force you to give up on it while half way through. But, I will suggest you stick around as the end results will be amazing. I don’t promise that after your first try itself you will be the Fontographer that you want to be, but sooner or later you will be swimming in the river of your own fonts. Who knows someday 1WD might just list your font in its showcase. #Dreaming!

So, lets start with the usual steps that will teach you how to create your own font. But, remember that you will have to inspire yourself to create your own thing.

• Start Consuming Information - You might have been a designer all your life or may be a writer by birth, but creating your own font is a different theory altogether. Issues like spacing, bends in letters, curves, angles etc. become so important that overlooking any one of them might just kills the whole experience. I won’t be jotting down all those concerns as understanding the science behind fonts is a different story and one can write multiple articles on that itself. Let me jot down some articles and books that will help you gain insight into the mechanics of fonts:

1. A Short Course On How To Improve Your Site’s Typography on 1WD.
2. Fonts and Encodings by Yannis Haralambous.
3. The Complete Manual of Typography by Jim Felici.
4. Thinking with Type by Ellen Lupton.

• Learn To Sketch - This is very important. I have this cousin of mine who loves logo designing. I saw that he was designing logos directly in Photoshop. I helped him understand the importance of sketching before moving on to Photoshop. Today, he thanks me for the push that I gave him. It is important for designers to understand how sketching on paper is a lot different from what they do directly on computer. You will never be able to get the real feel of curves and angles unless you have a pencil in your hand. Later on, the pencil sketch will act as the much wanted skeleton that will be the backbone of your digital font. Keep it clean and see the magic. Remember that sketching on paper will give you the liberty to understand the quality of lines and their exact geometry. Spacing will be taken care of by your software later on once you go digital.

• Scan Your Sketch and Convert to Vector Art - This is it. Time to go digital! Once you are done with your sketch and you are sure that the end result is exactly what you want your font to look like then it is time to scan your sketch and clean it up a bit. Use Photoshop (or any other image editing tool for that matter) and clean up your sketch. Let go the smudges and stray lines. Covert the sketch to vector art before you proceed.
• Time to Pick Your Font Software - This is the point where most of the readers might just give up. The reason being that most of the good font software out there will cost you some cash. Buy one and start learning them. One of the best in the business in Fontographer. I will suggest that you go ahead with Fontographer as it has a lot of resources on the web that will help you understand the software and create your very first font. Stick with the adrenaline rush and don’t stop until you have your own typeface!

[image via Soft Pedia]

• Lastly, let us know once you have your own font up and ready for use.

Create Characters Using Secret (and Free) Windows Software

Private Character Editor! Heard of it before? Well, PCE is Windows-based software which is already installed on your machine. You just don’t know it yet. Those looking to create their own fonts or characters real quick can use this tool and start rolling in no time.

PCE can help you create around 6400 characters which can be used on your documents using “Character Map”. Now, let us quickly understand how PCE works:

• Click on Start button and then click Run (or Windows key + R). Now in the dialog box type C:\WINDOWS\system32\eudcedit.exe (considering that your Windows is installed in C: drive) and hit enter.

• You will be greeted with PCE’s “Select Code Window”. Basically, this window will be your map using which you will use to map the characters that you create in the Windows character library. You can use any of the boxes that are blank. Choose any one of these and click Ok.

• A grid measuring 50×50 pixels will open. You can use the tools on the left to create your own character. Take your time and edit your character as much as you want. The drawing area is overly simply for anyone to understand what is happening. Though, you will have to be a calligraphy expert to come up with a really attractive design. As you can observe in the image below, I ain’t one!

• You can even copy and paste the bitmap selection between PCE and paint.
• Also, you can use an existing character as a base for your new design. Copy the existing character to the grid by using Edit > Copy Character. Change it with the available tools and have fun.
• Once you are done with your design then either you can map your character to all the fonts in Windows or to selected ones as per your choice. Go to File > Font links .. to understand what I mean.

• Lastly, save your character before closing from Edit > Save Character As.

• Now, it is time to use your character. Again, open the Run dialog box and type charmap.exe and hit enter.

• From the Font drop down menu opt for All Fonts (Private Characters) and voila!

• Select your character and click the Copy button. You can paste your selection anywhere including the notepad.

Conclusion

As you can see, creating your own font isn’t an easy task but there are options available. Creating your font will require a lot of concentration and commitment. Remember that you won’t be able to create your font if you give up on yourself. Also, for those who don’t want to go through the process of scanning or for those who don’t own a scanner, PCE is always there for help!

Create Your Own Font and Kill Comic Sans

Well, a website is nothing more than a creatively designed collection of different sections put together to create something aesthetically pleasing. A wardrobe is a collection of different articles of clothing that you put together as fantastic outfits. In short, both are a combination of different items that make a visually pleasing whole. If you’re still a little unsure about this comparison, don’t worry. By the end of this article, everything will make much more sense.

Breaking Things Down First

*Image Credit: hellojenuine

The best, and most practical, thing to always do is to break things down first. So we are first going to relate the basic structure of a website (header, body sections, sidebars, footers, and misc.) to the typical items of clothing one wears everyday. Let’s get started, shall we.

The Header

In any website, there is something about the way the header is designed that decides how well the website as a whole will turn out. If its looks messy, unorganized, wild, and like little thought was put in, the conversion rate for a website with a header like this won’t change at all. It should be pretty obvious where this is heading. In a UX perspective, the header of a website relates directly to ones headwear (which in this discussion can include hair styles).

Everyone has had a bad hair day. Maybe you’re balding or you got a bad haircut and you need to hide it for a while. Well the silver lining to that is the invention of the hat. The proper headgear can make it all better in the blink of an eye.

The Body Sections

Now the body sections of a website are the largest part. This is the area where all the content in a website goes, which is pretty much the whole reason anyone visits a website, at least in an ideal world. Moving on, the body sections connect everything together and the rest of the website is built upon. So with that in mind, the body sections of a website relate to the torso and leg areas. This is like the website version of t-shirts, blouses, tank tops, jeans, skirts, or whatever else is suitable attire for your style and gender.

The Sidebar

The sidebar(s) is the area that sees the most influence from other parts of a website. This is because the size and importance of a sidebar is derived from how the rest of the website is designed. Since the sidebar is the main dependent aspect, and is not always a necessary section but always adds a little something whenever in use, it correlates directly to outerwear(coats, jackets, etc.).

The Footer

There have been studies that show the type of footwear a person wears says a lot about them. The footer and footwear have a stronger relationship than just their names, positioning, and functions. Like the shoes on one’s feet, a footer needs to strong, durable, and stylish all in one. That is a lot of pressure for something at the bottom of a website, but considering that in most cases a footer can make or break a design, it’s quite understandable.

The Miscellaneous (Popups, Overlays, etc.)

The miscellaneous areas of a site are best described as the areas that aren’t really necessary and can hinder the experience of a website if not properly incorporated. However if done correctly, they add to the overall experience of the site. The idea is to keep these unnecessary areas to a minimum and only use them when needed. For this reason, the miscellaneous sections of a website are like jewelry.

In Summary

Since all the sections have been broken down, labeled, and classified, let’s just do a quick review to make sure that everything is understood. The header is the headwear (which for this case includes hair), the body sections are the torso and leg areas (shirts, blouses, sweaters, jeans, skirts, etc.), the sidebar(s)  your outerwear and the footer is the footwear area, and the misc. area is the jewelry.

Deciding Factors

*Image Credit: cmozz

The basic wardrobe structure has been broken down, and the understanding of this relation is pretty much set. There is only one thing missing. What about the deciding factors that determine the wardrobe combination of said broken down sections?

Region

By definition, a region is defined as being an area or division having definable characteristics, but not always fixed boundaries. With this definition in mind, it is safe to say that different industries and/or markets are distinctive clientele regions. Correct? Well for that very reason, the industry (government, education, healthcare, business, etc.) the website one is hired to aid in building will be defined as the region.

Climate

After figuring out the region, there is another important step to take. This of course being finding out the weather of said location. Once the region is identified, finding this out is a breeze. For the most part, every area within a specific region has a general climate characteristic that relates with other areas at all times. Of course there will be slight timely variations for each area, but for the most part what is to be expected can easily be generalized. Isn’t safe to assume that most companies and/or organizations within the same industry will have the same type of content, but with personal variations? For this reason, the content/copy a site showcases is considered the climate.

Applying

*Image Credit: Fuschia Foot

Okay now the relation is understood, the deciding factors are determined, all that is left is to put this new information into practice. To help guide you along applying your new knowledge, take some time to look at this easy to follow example.

Example: The Photographer

So a new client, a freelance wedding photographer, approaches you to design their new portfolio site. From this profession description the deciding factors are quite easy to find. The region in this example is of course weddings, and the climate is wedding photos. Next you need to decide how the design of the website will be handled, or dressed.

Since content wise this site will be nice and breezy, any heavy wardrobe needs shouldn’t be brought here. Below, a sample breakdown is provided:

• Header: Since the weather is pretty fair, going heavy anywhere on the site is not a priority. All that is required here is a definitive style featuring of course the information we have come to know for a header. This being simply the name/company logo and the navigation menu.
• Body Sections: It may be good weather, but this area can’t just be blank. This section is reserved for your content of course, things like information about the photographer and photos of their work.
• Sidebar(s): In this weather situation, adding any extra clothing would just make the wearer uncomfortable if it’s too heavy. So this section is not needed, but can be applied if kept very light.
• Footer: With everything here going down the minimal path, it only makes sense to continue that here. A strong footer here can include something as simple as a line of bottom links, copyright info, and some social links.
• Misc.: Although the rest of the clothing currently being worn is leaning toward minimal, a little something extra will really make everything stand out. In this case, things like lightbox overlays in the area showcasing the client’s photos, implementing jQuery to tag the photos by year, part of wedding, and/or angle so that once clicked on only that section shows up, or other things of this nature.

Have any more thoughts? Can the wardrobe strategy you have help?

Why UX Design is like Your Clothes

5 Simple Steps to Fight Spam

Tags

• daily inspiration

This post is part of our daily series of posts showing the most inspiring images selected by some of the Abduzeedo’s writers and users. If you want to participate and share your graphic design inspiration, just send us, via email, the image with the link from where you found it, also use “Daily Inspiration” in the subject, and don’t forget to send your Abduzeedo username; or via Twitter sending to http://twitter.com/abduzeedo.

If possible use the HTML code: <p class="imgC"><a href="Link to the page you found the image"><img src="Link to the Image" /></a></p>

Do you want to see all images from all Daily Inspirations? Check out http://daily.abduzeedo.com

You can also submit your images and inspiration to RAWZ via http://raw.abduzeedo.com/

8beats

adamchoobi

adekunleGOLD

aesonb

al b sure

António Peixoto

Artists Inspire Artists

Best Bookmarks

Bogdan Sandu

Casper Biemans

Cleber Carvalho

Cosmin Sandu

cuded

disenyolebogarte

Email Inspiration

ewelinarosinska

fksd

Giani

Glipty

gnarledbranch

hptoy

inspirationfeed

j-irai-pisser-chez-vous

Jimmy Vega

John Ical

Jonathan Hasson

Jo On

Let me be inspired

LuizcomZ

Lucas Bonifacio

Markus K.

max

mibstudio

Mihis Design

nenuno

Omnia Ali Amer

onat öktem

pk

Puglisi Gabriel

raid71

royal-nightmare

Sara Baccin

Sascha Hahne

sea-graph-x

SpEEdyRoBy

thaeger

thecompanionbook

Tobia

Vinko Jovanovac

Daily Inspiration #1060

Tags

• daily inspiration

This post is part of our daily series of posts showing the most inspiring images selected by some of the Abduzeedo’s writers and users. If you want to participate and share your graphic design inspiration, just send us, via email, the image with the link from where you found it, also use “Daily Inspiration” in the subject, and don’t forget to send your Abduzeedo username; or via Twitter sending to http://twitter.com/abduzeedo.

If possible use the HTML code: <p class="imgC"><a href="Link to the page you found the image"><img src="Link to the Image" /></a></p>

Do you want to see all images from all Daily Inspirations? Check out http://daily.abduzeedo.com

You can also submit your images and inspiration to RAWZ via http://raw.abduzeedo.com/

Aaron Randall

Abhilash

adamchoobi

al b sure

anideaeveryday

anonimus4me

Artists Inspire Artists

bananabun

Best Bookmarks

bryan pickens

chrisblissdesign

cuded

doubbled

Edward McGowan

element media

esotericmindzet

ESTEBAN BERMUDEZ

Franz Ferdinand Kubin

gian piero

hagbarth

heartbreaks

Heitor Kimura

hptoy

inspirationfeed

j-irai-pisser-chez-vous

Jason Jeffery

Jonathan Baranowski

Josh Archer

Jo On

Let me be inspired

majofo

marvelgd

matthias-ragossnig

Mihis Design

Nacho Umbral

nenuno

nostalgiavenue

onat öktem

photomusiclife

pk

positivepill

Rafael

Rafael Fonteles

Robin Lakowitz

Sebastian Haus

St.Nikke

thaeger

theextasis

Trevor Williams

Visuall

WhatAnART

zayar lynn

Daily Inspiration #1059

It’s time to get real, and come to terms with the fact that social media networks are not just for teenagers anymore. Even setting up something as simple as a customized Facebook fan page can enhance your brand online. Studies show that socializing is important for maintaining a happy and a healthy lifestyle. So it kinda makes sense that the same holds true for businesses, no?

Read on for some cold hard facts about why social networking is a must for you and your company.

Shared by our friends from Wix!

Via: Wix.com

Why Your Business Must Go Social [Infographic]