Step 1

Create new document 1280px x 1000px 72dpi. Background Color #fff(white)

Step 2

Now select the type tool color:#a90000, and write out any word you would like. Text size dosen’t matter but make it big as possible for this tutorial.

Step 3

Create a new layer then select the rounded brush tool color:#a90000. The brush size varies according to your text size so choose the approiate size. Now create a circle by the end of one of your letters. I’m going to start with the W.

Step 4

This is the part where we will create the drip. Make the brush tool slightly smaller and draw out a drip.

Step 5

Now create 3 circle. Make all circles different sizes and put them around the main circle and drip so that they look like paint splatter.

Step 6

Repeat the steps above for every other word or so then you should have a completed paint splatter. I’ve decided to add a black background to my text. HEHE! You are all done.

Create an Image Rotator with Description (CSS/jQuery)

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

jQuery Image Gallery/News Slider with Caption Tutorial

A really cool News Slider that uses two scrollers to create very slick effect. It uses scrollTo to scroll both description and image items and it comes with previous, next, play, stop and mouseover events.

Create a Slick and Accessible Slideshow Using jQuery

In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.

Create Beautiful jQuery slider tutorial

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

Supersized Full Page Image Slider

So, what exactly does Supersized do? Resizes images to fill browser while maintaining image dimension ratio, Cycles Images/backgrounds via with transitions and preloading, and Navigation controls allow for pause/play and forward/back

Jquery Coin Slider

The coin slider is a featured content slider that can be used in many different ways. It’s fancy transitions and unique effects makes this slider worth while.

Jquery Nivo Image Slider

Nivo slider is another awesome jquery plugin that allows you to create a dynamic image slider with style.

GalleryView: A jQuery Content Gallery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

Making a Slideshow with jQuery

I’m going to walk you through how to apply jQuery to an ever more common development scenario, animating a home page slide show.

slideViewerPro

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.

Things you need

• sansserifexbflfcond Font

Step 1

Create a new document width:1000px x height:631px background #000000

Step 2

Select the type tool font:sansserifexbflfcond(medium), size:200px, color:#ff9700, smooth. Now select the Character Panel or go to Window>>Character and change the text Tracking to -60(Text tracking goes from left to right). Then write a word that you would like to use. I’ve chosen Webdevtuts.

Double click on the text layer or right click>>blending options. Select color overlay and change the color to #1b1b1b. Then select stroke, size: 1, position: outside, blend mode:normal, opacity:100, fill type:color, color; #b4b4b4

Step 3

Duplicate the text layer then right click>>blending options. Now click on gradient options. blendmodenormal, opacity:100, Gradient(Double click on the gradient bar, left color:#adadad, right color:#ffffff), style:linear, angle:90, scale:100

Step 4

Select the rounded rectangle tool color:#5f5f5f then draw a circle under your typography.

Then go to Filter>>blur>>Guassian blur 90px.

Step 5

Select the rounded rectangle tool color:#151515 and draw a rectangle under your text(Make sure it goes into the black on both sides). Then go to Filter>>blur>>Guassian blur 5px.

Step 6

Duplicate the text layer then create a new group then add the text layer to the group. Right click on the group>>merge group. Go to Edit>>transform>>Flip Vertical. Then drag the vertical text downward until its under the original text.

Now select the rounded blur eraser tool and erase the bottom text until you have that reflection look. Might take of couple of tries but you’ll get it.

Step 7

Select the rounded rectangle tool color: #ffffff, and create a circle on top of your text leaving some of the bottom area untouched.

Now change the layer opacity to 10%.

Step 8

Select the custom shape tool>>Triangle and create a triangle over the text. Try to have it so the triangle is within the glow with just did in the previous step.

Now go to filter>>blur>>Guassian blur. Set the blur to 80. Then change the layer opacity to 80. You’re now done and should have a nice elegant glass looking text typography.

More Content Management Systems Websites, Less HTML

When It comes to designing and developing for the web I have notice that more and more users are turning to CMS’s(Content Management Systems) and less towards HTML/static web pages. I can not remember the last time I’ve coded a HTML website for a client and that was final. With the functionality of CMS’s and the ability to manage everything via the control panel, what’s the need to edit an HTML page via a code editor? Many people use content management systems for the following.

• Blogging – With the tremendous growth of blogging I can see there being over a millions blogs throughout the world in the near future. I mean its 2010 and who doesn’t have a blog? From a designer point of view we will all be running and designing websites for people who want or would like to start a blog.
• CMS – Unlike most people others like their websites to have the functional as a CMS. I can see designers developing more CMS’s for companies/personal projects and the near future.

More Website builders

With the rise of technology I can see many people turning to website builders. Website builders gives users the ability to update and manage their website without having any knowledge of code. Many normal people have no knowledge of HTML, CSS, PHP, JAVASCRIPT and etc. Also many people are not willing to come out of pocket and pay developers for the work they are willing to do so offering clients a service that is too much will lead to website builders. Website builders are also becoming very complex and are allowing users to do things that might take developers 3 days to do really fast.

Less Freelance, more corporate/personal work!

The fact of many people being cheap will cause the rise of freelance work to drop. Many designers will say that freelancing will be around for good but in my opinion the fail is coming very soon. With others countries willing to do work for less many designers will decide to either go get a job at a firm or company or work on personal projects. The Great part about freelancing is being able to be your own boss but the con of freelancing is not having a stable income and having to find work from month to month.

This is just a fourth of my opinion on where I think web design will be in the near future. I’m not sure if I’ll be right or wrong but I know change is coming to the web design community and am not sure if we’re ready. All I can say is time will tell and its just a matter of time before well know. I hope you’ve all enjoyed this article and would like to know your inputs on this topic.

Call Css Externally

The method below is the normal method for calling a stylesheet via HTML document. Place code inside of the head tags.

<link rel="stylesheet" type="text/css" href="style.css" />

Call Css via stylesheet

The method below is the normal method for calling a stylesheet from a css document. Place code inside of your stylesheet. @ Import tells the css document to import another stylesheet.

 @import url("import.css");

Call Css Internally

The code below is a way for calling a stylesheet within a HTML document. Place code inside of the body tags.

<style>
/*Insert Style code here*/
</style>

Things you need

• CSS Image
• VIEW THE DEMO

The HTML

When creating rollover images/ css image sprites(Same things) all that is needed in the HTML are the div tags. We used the div tag to define the rollover image later in the css file. So inside of your newly open HTML document create a new div.

<div id="image-sprite"></div><!--end image-sprite-->

The CSS

The CSS is the most important part of creating rollover images because this is where we tell our HTML document to look for the styling of our images. So you’ve downloaded the example image that I’ve created for you all to use while during this tutorial. So as you can see we have an image that is 336px in height x296px in width. The width doesn’t really matter considering they’re are the same. The height is what we care about. So earlier I created two separate images in Photoshop. One of the images equal 168px and height. So I created 2 images and put them together which is how we got the height of 336px(168+168=336).

So lets style of rollover images. Copy the css code below in I will explain it.

#image-sprite {
	background:url(sprite.jpg);
	width:296px;
	height:168px;
}

So above I have called the HTML div tag using css. Then I called for the css to grab the background image. The trick to the css rollover image is when you define the height you only put the height of one image. So the height of one image was 168px and the width like I said before doesn’t really matter because they’re both the same.

The Rollover Effect

Now it’s time to create our rollover effect. Copy the code below and I will explain it.

#image-sprite:hover {
	background:url(sprite.jpg);
	width:296px;
	height:168px;
	background-position:0 -168px;
}

So I applied a hover effect to our css file which tells the HTML document that when ever someone hovers over it to change the image. Everything is the same as our first div except I used the css tag background-position: to change images. The first zero in the background-position tag tells the css to move left or right and we did not want that because are images are stacked vertical. The right numeral -168px tells the the css to move up or down. I told the css to move down -168px which created our rollover effect. Now you’re all done.

There are many ways you can create css rollover images. The technique I showed you guys today is the very simple but can be used to create very
complex rollover images. I hoped you learned something from this tutorial today.

I live with a disability

Better Codes

kodingen

Irrational Games

Solo Practice University

H-Mag

Ride Oregon Ride

Tasty kitchen

Gigaom

VW TankWars

Androinica

New York Blogs

Ooizit

Fisher Book

Kevin Jumba

HTML 5 Cheat Sheets

Smashing Magazine has release a great HTML 5 cheat for designers and developers who looking forward to learning more about HMTL 5. This Cheat sheet will help you familiarize the latest HTML 5 tags,and new tags that are being brought into HTML .

HTML 5 Canvas Cheat Sheet Vol 1

Check out this HTML 5 Cheat Sheet via Webmastersucks. Has a great layout and can teach you a ton. Check it out.

• Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 – HTML5 is the future of web development but believe it or not you can start using it today…
• Coding A HTML 5 Layout From Scratch – HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project….
• How to Make an HTML5 iPhone App – You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn.
• Have a Field Day with HTML5 Forms – ere we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.
• Designing a blog with html5 – Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages…

Javascript

Creating a Slick Auto-Playing Featured Content Slider

Create a slick auto playing featured content slider with Chris Coyier from Css-Tricks. Slider is great and can be used for many things.

• Starbox Rating – Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework
• Using CSS and Mootools to simulate Flash horizontal navigation effect – I had a new “conversion” from FLASH to HTML when I discovered the CSS beauty. In particular using Flash I loved this kind of layout/effect: follow mouse sliding content.
• Coda Slider Effect – Create an amazing coda slider using Jquery. The code slider can be used for many things such as image galleries, content sliders, and much more. Go check it out.
• Sliding Top Panel – This tutorial explains how to realize a simple sliding top panel (top/down) using mootools, some line of css code and JavaScript.
• Scrollable – The main design goals of this tool are to provide visual customization, ease of use and programmability. The first version of the library was released on January 3, 2008. Since then, this tool has come a long way and it is now a stable and mature product.

WordPress

WordPress Cheat Cheet

The number of WordPress functions can be dauntingly. Why not print a helpful cheat sheet for future reference? This one will do the trick!

• How To: Create a Theme Options Page for Your WordPress Theme – Theme Options pages are growing in popularity among quality WordPress themes. They provide the user with greater customization control over their website without having to know a hint of HTML or CSS.
• WordPress 2.7+ User Link Feed Submit Form and Widget – In this article tripwire magazine provides a mini-tutorial on how to setup a User Link/News Feed solution in WordPress 2.7+. I really think it is a nice feature as it gives a blog dynamic content and it it may actually drive traffic from bloggers looking for sources to get some easy and free traffic for their own site.
• WordPress Multi-Level Drop Down menu using jQuery – As WordPress theme designers, we’re often faced between the choice of going for purely CSS drop-down menu or javascript drop-down menus in our struggle with cross-browser compatibility.
• PSD to WordPress Series Part 1 – I know there are many developers and normal people who want to know how to design a wordpress theme from scratch. Well today is your lucky day. In this series, PSD to WordPress we will design a Mockup in Photoshop, then code it for wordpress.
• Stylizing Threaded/Nested Comments in WordPress 2.7 – One of the features I love in WordPress 2.7 is the ability to have threaded (nested) comments up to 10 levels deep. While viewing comments on this – or any WordPress 2.7-powered – site, you’ll notice a Reply button (assuming nested discussions are enabled). Clicking that will enable you to reply directly to that comment,

Drupal

Drupal Cheat Sheet

I put together a Drupal Theme Developer’s Cheat Sheet that includes some of the most handy reference information for themers. The cheat sheet is specific to PHPTemplate, the most common theme engine for Drupal. The two page cheat sheet includes information on available variables, file naming conventions, sample code, and more.

• Drupal 6 & 7 Theme Guide – This handbook is about customizing the look and feel of a Drupal site. If you are developing a module that outputs presentation data, then please read the module developer’s guide Using the theme layer section.
• PSD to Drupal Theme Conversion – This tutorial will show you how to take an existing design in either Photoshop or Illustrator to XHTML to a working Drupal theme.
• Building a multi-language site – The following steps are for those who want to have a simple site available in different languages. The goal is to have content translated to two or more languages and the visitor to be able to choose any of them.
• Building a Website with Drupal 6 – – I have decided to keep that website in Drupal 5 and create a whole new website in Drupal 6 for these series of tutorials because there is still sufficient interest in using Drupal 5. I will tag the tutorials “Drupal 6″ and “Drupal 5″ so that you can choose which ones you’re interested in
• Organizing content with taxonomy – You can set up a taxonomy that allows users to add terms (also known as tags or metadata) to content. The taxonomy for a site contains one or more vocabularies and each vocabulary contains a set of terms.

CSS 3

CSS 3 Cheat Sheet

In this post we present a printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.

• Border-image: using images for your border – Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element.
• How to achieve cross browser font face support/ – At the moment, web fonts are all the buzz. Unfortunately, achieving cross browser support is not easy. In this tutorial, I’ll show you how to get custom fonts working in all of the major browsers.
• Awesome Buttons with CSS3 and RGBA – I never thought the day would come where you could create nice looking buttons without images. Well in this tutorial CSS3 is put to use to make a dream come true.
• Creating a Polaroid Photo Viewer with CSS3 and jQuery – Ever wanted to create a cool image gallery but you didn’t know flash? Well in this tutorial Mark creates a phenomenal tutorial on how to create a Polaroid photo viewer. Javascript is the new flash.
• How To Create Depth And Nice 3D Ribbons Only Using CSS3 – CSS3 is great especially when you do not have to use images or css sprites to achieve the depth boxes technique.

PHP

PHP Cheat Sheet (V2)

The second version of the PHP Cheat Sheet, a quick reference guide for PHP, with functions references, a regular expression syntax guide and a reference for PHP’s date formatting functions.

• Build a phpBB Forum in 5 Steps – If you’re thinking of setting up a forum for your Website, you need not start from scratch. The open-source script, phpBB, can easily be installed on most Web servers. This article will describe how to do it right, from downloading through to customisation.
• PHP Login script tutorial – Learn to create a simple login system with php + mysql script, this tutorial easy to follow, teach you step by step.
• Simple PHP Website tutorial – If you ever tried making a simple website with only a handful of pages, you probably noticed that once you need to edit some menu element, you have to edit all of your pages, which can be very irritating.
• Creating a Mail Client, Part 1 – This tutorial is Part 1 of a series on creating a Mail Client. In Part 1, I will show you how to send mail. You may download and print this tutorial as necessary.
• How to keep your website secure from hackers and attacks – Such as server “which are always on” is designed as a system for security is an important issue. Web servers are the backbone of the Internet. The basic services and functionality across the world billions of websites and therefore everyone’s personal information store that serves as the journey.

Other Resources

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.

CSS3 Dropdown Menu

While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow.

• Halftone Navigation Menu With jQuery & CSS3 – Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
• Nice CSS3 Gradient Buttons – There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some javascript.
• Creating Modules for Drupal – This tutorial describes how to create a module for Drupal 6. It is an update to the tutorial for Drupal 5.
• Delicious Recipes for WordPress Page Menus and Page Listings – There are so many awesome ways to display your WordPress pages. Out of the box, WordPress provides two different template tags for displaying lists of your site’s pages.
• Drag and drop HTML 5 – As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature.
• Making a Mosaic Slideshow With jQuery & CSS – Today we are making a jQuery & CSS mosaic gallery, which will feature an interesting tile transition effect when moving from one slide to another.

Bidding Sites

Many of you may have already heard or have not heard about bidding sites such as Elance, Freelancer, and Odesk. Those are bidding type of websites where you would go and bid on a project with other designers or developers. Many freelancers claim they never or will never used a service of such because they want you to work for peanuts. My personal opinion is these sites are great if you know what you’re doing. When first starting these sites might be great for you. As a designer/developer you often do not need as much as you think. In the design world people charge what they think they should be charging when they really should be charging clients prices that will get them by. If you’re just starting off do not expect to take on large projects because most likely you will not get any considering you have nothing to show.

Winning Bids

It’s very easy to send proposal to a client on these sites but can be very difficult to win if you do not think out your plan. Many times clients want to hear words from the designer that sound more realistic to them. Like if you send the same proposal to every client there going to ignore your email. Make yourself stand out and approach the client as if you were talking to them via phone. Make them feel comfortable with you. After winning a bid try to meet your deadline so clients can give you a good review.

Building your Reputation

Building your reputation on a bidding site can be very hard if you do not have the correct mindset. When first approaching these sites try to think how you can build your profile from 0$ to $1,000 projects. Starting off small and working your way up to the top is the way to go. Yes you might have to work for small amounts but in the long run it is very worth it considering the more reviews you have the larger projects you can take on. Once you have a couple of reviews projects should continue to come your way and it goes up hill from there.

Conclusion

What I am basically saying in this article is that you can actually make good money from bidding websites. Many designers deny the fact that this is where they get some of their work and major leads from. I myself have tried out Scriptlance, Elance, and Freelancer and have gotten a project on there before. I now do not bid for projects but when I was in need of money I did what I had to do to get by. If you’re starting off freelancing or feel your income is not stable take time to join a freelance site and try to keep your income rolling in. Everyone
experience is different so giving it a try won’t hurt.

The Code

Copy and paste the code below where you would like for your latest twits to show.

<div id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/yourtwitternamehere.json?callback=twitterCallback2&count=Number of twits you want to show goes here"></script>
</div><!--end twitter_update_list-->

This is a quick and easy solution for those who are searching for ways to add twitter feed to their sites using pure code and not a plugin. I hope this worked well for you all as it did for me.