This tutorial will show you how to create a twitter message form that counts down the 140 characters and also allows you to input a message within the URL of the webpage as well. What’s cool about Ruby on Rails is instead of writing javascript to recalculate the message length, we’ll use Rails to automatically generate the correct javascript so that each time the field changes, the count is recalculated all through the controller object.
The first tutorial I published on CSS was a “trick” to essential hide the text generated from the HTML file and replace it with an image. Let me clarify what I mean by “trick” because its not meant to decieve anyone. It’s a non-obvious way of achieving two competing goals: displaying graphical representation of text while not compromising the HTML text mainly for Google.
Its been a while folks. Almost a year now. But its time to start to get the wheels moving on this great site, because you need it! Now even though its been almost a year since the last tutorial was published, Tutorial Dog has seen traffic continue to come at a steady rate which makes a comeback all the more necessary. The site also has stayed relevant with many commenters (thanks) giving input on many hot button articles of the site.
This tutorial is the second part of a tutorial that will build a javascript carousel that imitates the Mac OS X dock. In part one, we build a mock up in Photoshop and exported the nessecary images. In this part, we’ll take those images and build it into a HTML & CSS. Then we’ll use javascript to make if interact.
This tutorial will take you through creating the initial mockup in Photoshop, and creating a usable carousel that imitates the Mac OS X Leapard dock. This tutorial we’ll acquiant you well with creating a slick button, and using the shape tools. We want to deal with shape layers instead of pixel because of the non-destructive nature of shapes. Non-desctructive shapes means you can edit and scale without distortion.
In the Hip-Hop edition of the Design Video Roundup, we’ll be diving deep into the world of hip-hop and design. Also, we dive into more animated typography, and Photoshop tutorials.
In this Photoshop tutorial, we’ll dive into a pattern inspired by the artwork in the Stephen Colbert book “I Am America (And So Can You)” (the book has some very good illustrations). The tutorial will cover creating vector artwork from a photograph, taking the vector artwork and making a repeatable pattern and then creating a groovy wallpaper that utilizes the pattern. For the pattern, we’ll pit Barack Obama versus John McCain. As one reader pointed out in the last tutorial which featured only Barack Obama, we’ll feature both canidates in the upcoming Presidential election.
This Photoshop tutorial will guide you through creating an effect in the vein of the most recent Coldplay iTunes commercial. The Coldplay commercial uses colorful backdrops, with various textures, smoke and lighting effects. For this tutorial, we’ll take a photo of Barack Obama, mask it, create a silhouet and create the colorful background. This tutorial includes a download to the PSD file so you can see how the layers are set up.
You know, sometimes I just don’t like to read. Sometimes I just like to sit and watch something rather than dig myself in text. This article hopes to fulfill that video thirst in you life in the matters of design. In our first installment, we’ll take you from lectures on mootools to moving text to time lapse art creation. Hope you enjoy, and if you have a video you know is good, please leave a comment.
The most important tag in the head of a web page is the title tag, but the link an meta tags can tell a lot of information about your content. These tag can tell important information to search engines, and provide a handful of usefulness to a visitor. HTML is not simply intended to hold content, it contains data to describe itself and reference more content. Text on the web is not just linear, its hypertext. It wants to quickly branch off like a textbook with chapters, pages, indexes and glossaries. The web is intended to be consumed in different ways by different people. The link and meta tags tell how a web page fits in the hierarchy of a website.
Have you’ve been stuck on designing your site using Dreamweaver or some other WYSIWYG (What You See Is What You Get) web page maker? If you’re ready to step out of the shadows of table based layouts, and discover CSS design then this article is for you. This article doesn’t aim to give you CSS code that you can copy to put on your website, instead teach you about the nuances you wouldn’t find in a general CSS tutorial or code.
A graphic tablet allows you to take Adobe Photoshop to a new level. You can take advantage of the brush tool and it’s powerful ability to imitate different traditional mediums of art and human input. In this Photoshop tutorial, you’ll learn how to set up Photoshop so that it can use the tablets input, create an outline from a photo, color and shade all using the tablet. The tutorial includes a time lapse of the process I took to creating the final product.
