20 Valentine’s Day Photoshop Tutorials For Your Inspiration

Posted by Harshad

20 Valentine’s Day Photoshop Tutorials For Your Inspiration

20 Valentine’s Day Photoshop Tutorials For Your Inspiration

Posted: 04 Feb 2014 07:01 AM PST

It’s that time of the year again, where excitement builds in the hearts of lovers everywhere. Valentine’s Day is indeed a time for many to try their very best to make their better half feel special. The usual way is to get them gifts, which is nothing to complain about – who doesn’t like getting flowers or a new pair of earrings?

After a while though, things get stagnant, which is why perhaps you are reading this. Feel like designing something special for your partner? We have here a collection of 20 lovely Valentine’s Day Photoshop tutorials that you may find useful for creating unique Valentine’s Day cards, wallpapers, or even Valentine-themed decorations for dedications on your personal website. Good luck!

How to Create a Chocolaty Valentine's Day Card for Your Girlfriend. In this tutorial, you’ll get to learn how to create a "sweet" Valentine’s Day card with a giddy background for your significant other. You can customize the design by adding pictures as well.

Create a Valentine's Day-Inspired 3D Text Effect Using Filter Forge and Photoshop. An in-depth tutorial with step-by-step illustrations on how to use Photoshop and Filter Forge to design a wood-textured 3D text effect that even comes with a semi-transparent heart.

How to Create Colorful Valentine's Day Card with Shining Heart in Photoshop CS5. A tutorial that will show you how to use Photoshop CS5 to design a colorful Valentine’s Day card with a brightly colored heart on it.

Photoshop Pro: Create a Cloudy Text Effect. A quick guide on how to create a cute Valentine's Day collage with your own images.

Valentine’s Day – Photoshop Style. An awesome step-by-step Photoshop text effect tutorial you can use to add a romantic touch to your Valentine’s Day card design.

Heart in Envelope Icon PSD Tutorial. Use this tutorial to learn how to make a fantastic Valentine-themed envelope icon that has a heart encased in it. You can use the icon as part of a contact form or as an RSS feed icon for your personal website on Valentine’s Day.

How to Create Elegant Valentine's Day Card with Ornamental Heart in Photoshop CS5. A short Photoshop tutorial on how to design a lovely Valentine-themed background by using Gradients, Custom Shapes, and Layer Styles.

Basic Tutorial: Create a Stylized Valentine’s Poster. A short tutorial on how to use Photoshop to design a simple but classy Valentine-themed poster. This tutorial is especially useful for beginner Photoshop users as it features some basic Photoshop tricks.

Love Me Photoshop Manipulation for Valentine’s Day. In this tutorial, you’ll get to learn how to achieve awesome photo manipulation results by using some lighting, shadow, and color matching techniques.

Chocolate Text Effect in Photoshop for Valentine's Day. A cool tutorial with an accompanying video that will show you how to make a cool text effect with chocolate waffles and sweet pink frosting on it.

Valentine Photoshop Wallpaper with Jeans Heart. A simple tutorial on how to use Photoshop to make a jeans-inspired Valentine-themed wallpaper that has a broken heart with stitchings.

Quick Photoshop Tutorial: Dreamy Bokeh Effect. Add a touch of romance to your everyday photos with this quick Photoshop tutorial on the bokeh effect.

Amorous Wallpaper. You may find this tutorial handy for using Photoshop to create simple yet elegant Valentine’s Day wallpapers with romantic text.

Photoshop Tutorial: Create a Stitched Valentine Heart Effect. In this tutorial, you will learn how to make a jeans-textured Valentine-themed design that even comes with stitching effects.

Love Roses Text in Photoshop for Valentine’s Day. Learn how to use Photoshop to make a cool 3D text effect that involves letters filled with red roses.

Photoshop Tutorial – Colour Adjustment Using Blending Modes. Play around with blending modes to add a romantic touch to a photo and turn it into a Valentine’s Day card for your special one.

3D Valentine’s Day Typography Exclusive Tutorial. Need more help with creating 3D text effects in Photoshop? Give this tutorial a try.

Design a Beautiful Valentine's Day Wallpaper. In this tutorial, you will learn how to create a lovely Valentine’s Day wallpaper with the bokeh effect.

Valentine's Day eCard – Photoshop Graphic Design Tutorial 16. A short but useful tutorial on how to create a simple but lovely Valentine’s Day poster/card using Photoshop.

How to Create Abstract Valentine's Day Illustration with Hearts in Photoshop CS5. With this tutorial, you will learn how to create a multi-layered Valentine’s Day design with pink heart shapes on it.


Combine Internet Connections To Stream Videos Faster With VideoBee [Android]

Posted: 04 Feb 2014 02:01 AM PST

Have you ever been in a situation where you’re watching online videos on your Android device but your Internet connection just isn’t quite fast enough? Maybe your mobile connection is a little on the slow side, and the WiFi connection available to you isn’t that much faster either. Wouldn’t it be great if you could just combine your mobile and WiFi connections to get a faster Internet connection so that you can watch online videos seamlessly?

VideoBee App

Well, with VideoBee you can make that a reality. VideoBee is an Android app that enables you to combine your WiFi and mobile connections to boost your video streaming speed. As long as you have 2 separate Internet connections, you can use VideoBee to combine them – be it WiFi + mobile or WiFi + WiFi. You can also pair up with a friend and go with the mobile + mobile combination. What’s more, you don’t even need a rooted device to use the app.

Start Using VideoBee

First, download the app here. Then, decide on the network that you want to use for streaming online videos. If you are using a device that has a mobile connection (e.g. a smartphone or 3G tablet), you should select the WiFi and Mobile option. If your device has no mobile connection, then your only option is to select the WiFi option and connect with another device that has a mobile connection.

Networks Used to Stream Videos

To take advantage of VideoBee’s features, you will need more than one Internet connection, be it mobile or WiFi. You will also need to make sure that both the Internet connections are stable. Once those requirements are met, you can use VideoBee in either solo mode or group mode.

Solo Mode

If you have both a WiFi and Mobile connection, you can take advantage of this app even in solo mode. Just select the Wifi and Mobile option, and try streaming a video using VideoBee to see how much faster your streaming speed has become than it usually is. For a clearer illustration, take a look at our example below, where we combined a WiFi connection (3.3 Mbps) and a mobile connection (2.7 Mbps).

Solo Mode

Group Mode

You can also create a group to automatically boost each other’s video. To do that, select the Create a new group option and turn on your Bluetooth connection to make your device visible to other devices for 120 seconds. Once the new group has been created, your friends can join the group by selecting the Join an existing group option on his or her device.

Manage Group

To use VideoBee in group mode, make sure at least one friend has already joined your group. Group mode supports the following combinations: WiFi + Mobile, WiFi + WiFi, Mobile + Mobile.

Group Mode

If you want to share a video with your friends, you can tap on Local (top right corner) to share the video locally with whoever you have paired with in the group. You can also share videos via Facebook and Twitter.


At the time of writing, VideoBee is still in open beta and as such, the app only supports YouTube, Metacafe, Vimeo, and NBC. Also, the app only allows a maximum of 2 members/devices per group for now. But rest assured that updates and more features are on the way, according to the developers.


Creating Animated Tooltip Easily with Hint.css

Posted: 03 Feb 2014 11:02 PM PST

Tooltip is a great way to display extra information on a website without taking extra space. The tooltip generally appears upon mouse hover, and there are probably of hundreds of jQuery plugins to include fancy tooltips on your website.

However, some common downsides of using jQuery plugin is that it comes with a set of useless options, and bloated with codes that slow down website performance.

So, today, we are going to take a look at an alternative of creating tooltip. With a bunch of new features in CSS3, it is now possible to create a comparable fancy tooltip only using CSS. Let’s get started.

Using Hint.css

In this post, we are not going to build it from scratch. We will be using Hint.css. Hint.css is a collection of classes and style rules, allowing us to create a simple tooltip more quickly. To use, simply add the stylesheet to your HTML document, or copy all the style rules to your own stylesheet.

 <link rel="stylesheet" href="hint.css"> 

Now, in your document text, wrap the piece you want to insert a tooltip with an inline element, like using a span or anchor element. And add the tooltip content with the data-hint attribute, like so.

 However, because the freelance <span data-hint="The arena of commercial dealings">marketplaces</span> across the globe are filled with freelance contractors all tendering for a limited amount of jobs. 

Technically, this is all you required. If you preview your document in the browser and roll over your mouse, you should see the tooltip pop up.

This tooltip is displayed with pseudo-element, and using CSS3 Transition for the animated move.

Give it a clue

Unless you are using an anchor element that comes with distinctive styles by default, there is no indication showing that the particular word will show a tooltip like what you see in the screenshot above, and thus, users, will most likely be clueless.

So, for the sake of better user experience, we can add some extra styles to give it an indicator, for example:

 span[data-hint] { border-bottom: 1px dotted #aaa; } span[data-hint]:hover { cursor: pointer; } 

These styles will give the span element with data-hint attribute a dotted border bottom. You can adjust the styles to meet your design requirement.

Tooltip Direction

We can show the tooltip in four different directions: top, bottom, right, and left using the provided classes.


 <span class="hint--left" data-hint="The arena of commercial dealings">marketplaces</span> 


 <span class="hint--right" data-hint="The arena of commercial dealings">marketplaces</span> 


 <span class="hint--top" data-hint="The arena of commercial dealings">marketplaces</span> 


 <span class="hint--bottom" data-hint="The arena of commercial dealings">marketplaces</span> 

Or keep showing the Tooltip

 <span class="hint--always" data-hint="The arena of commercial dealings">marketplaces</span> 

Final Thought

With more advanced properties in CSS3, today, we are no longer solely rely on JavaScript or jQuery to create a fancy UI, like creating a Tooltip, and using Hint.css, we can create one in snap. But as stated early in this post, this technique only allows us for creating a simple text-based tooltip.

If you want to create a more advanced tooltip, say, a tooltip with image or showing the tooltip upon mouse click rather than on mouse hover, using JavaScript or jQuery is still the better way to go.



Post a Comment