Xguiden

In this tutorial I will show you how to make a vector butterfly using the blending mode from transparency box and the gradient mesh. The techniques shown in this tutorial will help you make shades on objects and liquid transition of colors. Believe me it is very easy.

Step 1

Let’s start with creating a butterfly wing. Open up a new document and select the Polygon Tool, and use it to create a triangle. Apply the settings you see below. I usually use simple shapes and then transform them into complex ones; you can also use the Pen Tool (P) for creating the shape of the wing.

In this tutorial, we’ll learn how to make a spattered photomontage in Photoshop using brushes and some filters. Layered PSD file included. Let’s get started!
 

Final Image Preview

Create a new document (Ctrl+N) in Adobe Photoshop with the size 800px by 1068px (RGB color mode) at a resolution of 300 pixels/inch. Use the Paint Bucket Tool (G) to fill with the next color #4A4B41 the new background layer.

Add some noise on this background layer by applying the next filter: Filter>Noise>Add Noise

We’ve got the next result:

Set Fill to 57% and Blending mode to Hard Light for this layer in Layers panel.

Sexy CSS+JS Form

I was working on our new open source project that i think you will like and I was working on the registration page. This is what I got in the end and i will walk you trough the process with me. This new tutorial is about styling the forms of your website, I find it very good looking and very simple to implement. We will use simple CSS and some JavaScript.

When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem. However, to make a lasting impression to your visitors, you need to present them with something they have not seen before.

Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

jQuery is not always as it appears. There’s a lot of cool stuff going on under the surface, and there are many methods just waiting to be discovered, and many potential usages of jQuery’s API that you may not have considered before. In this article I’ll be taking you through a few of the not-so-obvious things I’ve discovered about jQuery.

1. Understand jQuery!

When you call ‘jQuery’ what happens?

The jQuery function itself is very simple:

PHP

Place the code bellow inside your theme’s function.php file. Don’t forget to change the “TwitterProfileName” with your twitter profile name.

function parse_feed($feed) {
    $stepOne = explode("<content type=\"html\">", $feed);
    $stepTwo = explode("</content>", $stepOne[1]);
    $tweet = $stepTwo[0];
    $tweet = str_replace("&lt;", "<", $tweet);
    $tweet = str_replace("&gt;", ">", $tweet);
    return $tweet;
}

function getTweet(){
$feed = "http://search.twitter.com/search.atom?q=from:TwitterProfileName&rpp=1";
$twitterFeed = file_get_contents($feed);
echo parse_feed($twitterFeed);
}

Now wherever you like to show the twitter status just call the getTweet() function.

jQuery

$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
     $("#theIdOfTheElement").html(data[0].text);
});

Change “#theIdOfTheElement” with the ID of the element you want to show the twitter status in.

In this tutorial you will learn how to draw the front and the back side of a pocket watch from scratch. This tutorial is detailed and by the end you will know how to draw all kinds of shapes, like cog-wheels and small screws. You’ll learn to create the scatter brushes used for the designs on the watch and how to use some of the existing patterns and gradients in Illustrator’s library to your advantage.

In this Quick Tip I’ll show you how to examine the way visitors are using your websites, widgets and games. Then we’ll look at how to improve them based on this info!

Introduction

Building nice looking websites is great; building websites that have a high Return Of Investment is priceless.

Recently I joined the web team of a Brussels based communication agency, a team with expert knowledge in the fields of user experience design, content strategies, software development, and interaction design. We spend a lot of time on wireframes, storyboards, and prototypes, which guarantees that the functionality and the content of the websites are optimal before any graphical design takes place. This means our websites have a solid base to be built upon, which results in a higher ROI with less time spent on development.

Today will show you how to create another eye catching hosting layout. In this tutorial I will use only 2-3 colors, with small variations, and you can use this layout for any internet business you have. of course you need to make small changes.

For start we will need to create a new document. the size is as always 1000×1100 pixels, and I will create this document with a white background.
I will select Rectangle Tool, and I will create two shapes. For the top shape I will use the following color: #393e43, and for the bottom one I will use another color: #373a3e

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

HTML5 isn’t here just yet, but the Working Draft is complete enough for us to play around and get to grips with the exciting new elements we can use in our code. To learn how a few of these elements can be used, let’s put together a simple website for say, a fictional iPhone app.  This tutorial covered the process of building an interface just like the awesome apps from Tapbots, so head over and check it out, then we’ll be ready to build an accompanying website for our PKE Meter application.