This is an extremely easy tip to clear floats in CSS, making use of a html element with barely no use (if you use it, you can choose another one you don’t use at all). In this case, I’ll use HR. I guess the last time I’ve used the HR tag must have been in 1997 or so. Hey, that’s from another century, even another millenium!

Anyway, on to this easy time saver

1) in your CSS sheet define the HR. It’s a wise move to do it within your element reset list (if you don’t know what this is, you really should learn CSS first). We’ll do it as follows:

hr{clear:both; margin:10px 0;}

done. Did you expect more than that? Now you can use the hr tag any time you need to clear floats in CSS.

by the way, do you see that margin thing? well, you really don’t need it. But I use it to add some vertical space as well. So, instead of opening and closing divs, I just use the hr tags and clear floats and get the space by adding just…. 4 characters!

This is an extremely simple tutorial that will give a pretty interesting touch to your photos and designs. What we are going to do is to give more depth to photos, in an almost 3D-ish way.

1 – First of all, we’ll get our image. I chose the following one from a Paris Hilton ad (click on images to enlarge):

2 – Now create a new layer (Ctrl+Shift+N). Fill it with black. Adjust opacity to 45/50%.

3 – Using the lasso tool, loosely outline the figure trying to be quite away from the borders. (click below image to enlarge):

4 – Now go to Select > Feather and choose a value as you see fit. In this case, I chose 30px.

5 – With this new feathered selection, simply delete it and you’ll have a new image with great depth. Use a very soft brush to delete certain parts (I used it for the burger, small portions of hair and one of her bracelets)

6 – Done. If you want to go further, simply enhance the image. I used a very little airbrush and a level adjustment layer on top of everything and voilà! here’s the end result:

Alternatives

You may think this is all cool and dandy with dark backgrounds, but what with cleared backgrounds? The short easy answer is “cut the figure and apply it over a dark background”. But check another option you can do:

I took this beautiful hippie girl in a forest picture

and converted it into this:

How did I achieve this? I just did exactly the following I said before, only that this time the feathered layer has its blending mode set to overlay and opacity in 36%.

Experiment, try different settings and the may the force be with you!

For those of you using WordPress as a CMS or TMS (as opposed to just a blog), whether it’s designed by us or not, you’re squeezing the juice out of this great system. However, you’re nowhere close to be using it at full potential. In example, take a look at this tutorial about using WordPress as a Marketing Tool.

First of all, let’s not turn all philosophic about it, since one could argue that any site could be used as a Marketing tool no matter how it looks. Which is true, of course. What I mean is to turn your existing WordPress CMS in a distribution center for dynamic marketing tools. Now it sounds more interesting, huh?

So, the whole tutorial is extremely easy and although some PHP knowledge could come handy, it is not necessary at all. Let’s create an adult gallery with dynamically updated content using your existing WordPress database. Just follow the instructions below:

1. Create a folder in your server, with any name you want, ie marketing. It could be inside your WordPress folder installation or totally outside (ie if your WP installation is in its own folder)
2. Now, let’s create our gallery. You could use a gallery you already have to promote your site, we’ll do just some editing on it
3. Open your gallery with a text editor (such as Notepad or Notepad++) or use the edit source option of your web page builder program (Dreamweaver, NotObjects, CoffeeCup, etc)
4. At the very top of your page, place the following code:
   
   <?PHP require_once('yourthemefolder/wp-blog-header.php'); ?>
   
5. Want an example? Check our main page: we added the code at the top, and then at the bottom simply added
   <?php get_footer(); ?>
   and that’s it, our footer (which includes a widgetized sidebar code) updates every time we add more content!
6. And basically that’s it. Now you can include whatever part of your WP theme you want to include. In example, an obvious easy one would be to include your header and/or footer, but you can call the latest updates, show them as thumbnails (or text), you can show the new WP 2.9 post thumbnails, you can show a ranking of posts, or if you’re using model names, a ranking of models, you can show comments…. your imagination is the limit!
7. Before I finish, I’m sure you’ll be able to think some nice SEO uses for this technique!

As you may see, as everything WordPress, this is easy, fast and bullet-proof. In a future tutorial I’ll teach you how to create GeoIP banners on the fly using this technique (plus other neat tricks, of course). This is just one of many reasons why WordPress CMS is taking the world by storm and is the smartest choice for webmasters

Please comment below if you have any question or need any help

So this is a mini tutorial that will help you (I hope) to achieve the dreaded CSS thingy in just… 10 lines of CSS. And to make it more fun, I’ll use some techniques that will help you to achieve things that most people is afraid of: same height columns!

So, you can see the sample at here

The sample has a header, a 3 columns body and a footer. If you want more or less columns, simply add/delete the column as you want it (and be sure to change the width for each column). In 99% of cases, you won’t want anything more complicated like this.

Are you seeing it? Cool. The html code for the page (without all the lipsum stuff) is as simple as this:

let’s analyze this: first of all, there’s something that jumps to the view at first sight: COMMENTS! . Yes, they jump to the view because I wanted that and because that’s what comments are for: to help you visualize everything at first glimpse. USE COMMENTS, LOVE COMMENTS, EMBRACE COMMENTS. If you think the 2kb they may add to a page are a bandwidth problem, well… you’re in the wrong business.

Then you have the header (with h1 tag) the cols (named in a way you’ll recognize what they are at first sight) and a footer. You’ll also see some “strange” code, and styled HR, but don’t worry, I’ll go to it later.

Once you have your html, you need to start define elements. I’ll make it sweet and simple: using px instead of ems or percentage, this one uses a container with 960px width, side columns are half of what the main column width is. Here goes the CSS code:

<div style="text-align: left;" dir="ltr">* {margin:0px; padding:0px;}

body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}



#container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}



#header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;}

#header h1{color:#fff; text-align:left;}



#leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; }

#midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;}

#midcol p{margin-bottom:10px;}

#rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; overflow:hidden; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;}



#footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}</div>

let’s go line by line (or 2 at most)

<div style="text-align: left;" dir="ltr">* {margin:0px; padding:0px;}

body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}</div>

Nothing strange here, just defining the colors and font and reseting all margins and paddings

<div style="text-align: left;" dir="ltr">#container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}</div>

now, we add some flavor. Everything is quite straight, but we’ll use position:relative, z-index:1 and overflow:hidden. You won’t normally need them most of the times, but we need it for the 100% height columns and the footer.

<div style="text-align: left;" dir="ltr">#header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;}

#header h1{color:#fff; text-align:left;}</div>

The header uses another of my tricks: padding:16px; margin:-16px; This makes sure the width is 100% overriding any margin or padding I may add to the container box. Tricky but effective.

LET’S GO WITH THE COLUMNS!!!!

The columns are extremely simple in their layout, but you’ll see those 4000px values and will ask yourself WTF! . That’s another of my tricks. By applying a huge padding value to the column and then a huge negative margin, the overflow:hidden we used in the container makes sure all columns are 100% height. Neat, huh? Everything else is just styling (width, bg, color, whatever)

and finally, the footer:

<div style="text-align: left;" dir="ltr">#footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}</div>

Here, the overflow:hidden I used in the container box, makes its work again and avoids anything goes “out of the box”. The only special thing I had to keep in mind is to add a z-index higher than the container, or it would be below the columns.

Finally, the misterious HR thing: I use that to add a little space when going wild with positive/negative values and clearing all floats. Dirty, but lovely.

And that’s it! The “impossible to make” in just 10 lines of CSS code. Now you can add divs inside the existing divs or whatever, try new things, experiment and learn!

Unless you live under a rock in another planet with no intelligent life, you must be aware by now that Mobile Content is the “next big thing”. There’s a lot to say about this conception, personally I find it very difficult to understand. While computer and TV screens are going bigger and bigger and then even bigger, mobile content is going a million steps back. Then again, many people, especially younger people mesmerized by “coolness” likes this way of content delivery, and there’s money to be made off. So… time for some Mobile issues.

First of all, if your site is well done, you won’t need many changes. When I say well done, I mean proper XHTML with both HTML and CSS validating. If you went with a cheap designer that provided some half made product… well, now you have to pay again for a whole new content delivery tour. If your designer used tables… well, whole new tour. If your designer can’t make proper CSS (even if validating), well… whole new tour. Take it as a learning, pay twice for the ‘cheapo’ (hopefully cheap) and continue reading.

Design for Mobile is a whole new different thing. it’s easy and simple but it has to be made TO THE “A”. Content organization and logical flow is key, and so is CSS. As you may imagine, there are not much options with mobile design since its screen doesn’t allow it. However, you can be as complex as you want. And…. fail. Mobile design is about simplicity, in essence it’s like 94/95’s design, only that without the tables.

Once you have a logical structure (you can draw it on paper or make a graph flow for visual help), you can apply the CSS. Personally, I’d use 3 or 4 style sheets and offer them as options. Since my html has to be PERFECT and I’ll use DIVs, I can change everything in a snap via CSS, hence your mobile customers will be able to choose whatever they like.

An idea for organization would be something like this:

the size of this screen is the one you should aim for since it’s the most common: 240×320. However, you can serve different style sheets and detect screen sizes or be smart and use liquid layouts. The choice is yours.

As you may see, this very basic design uses logical semantyc XHTML. It’s simple and to the point, yet it uses some content display that allows you to maximize content delivery using as little space as possible

Another thing to note: Don’t rely on fonts! NEVER! Most mobile devices won’t include any of the fonts you usually will rely on, like Times, Verdana and such. The user has to install them.

For devices using Windows Mobile, it’s a great idea to offer the fonts you want to display in your site so the user can download them.

Obviously, you can use something as Facelift, Flir, AnyFont, whatever, but it’s always a nice idea to deliver the regular fonts for your site as well.

So now we need to display content.

In adult business, you’ll want to display photos and videos rather than text. How to do it AND DO IT WELL is a very tricky question. Personally, I’d use any kind of tool based on JQuery or Prototype to build AJAX apps, but you can do it with php or simply with HTML. The better you do that, the better you’ll do with your mobile site. As a tip, think about this: most people doesn’t have an Iphone, yet everybody loves it. So… why not serve your site emulating Iphone? It’s relatively easy for someone that knows what is he/she doing, and your members will love the slick modern design

Finally, something so basic that it’s borderline ridiculous yet many people doesn’t do: add a bookmark link.

Of course there’s a lot more to mobile content delivery, but for now, I hope this helps to any one willing to enter this competitive market

For those looking for rounded corners for their designs, there’s a lot of techniques throughout the ages, so to say. At first, web designers started with tables, and the only resource was to make several cells to contain rounded corners images. Pretty hideous but it does the trick.

Now, with CSS you can make rounded corners by using only CSS and no images. You may ask yourself “what is this wacko talking about?” since there’s no rounded corners properties in CSS nor CSS2. So the wacko gives you a warm welcome to the kingdom of… CSS3!

Before going further, CSS3 isn’t “oficially” alive, however, a bunch of the new CSS3 properties are available in most browsers, so it’s quite safe to use them (we’ll go further on how to display CSS sheets depending on browsers).

One of the most sough after properties for web designers is the rounded corners property, since it’s one of the main components of so called web 2.0 design (as we’re at it, after 20+ years as a designer, I still have no idea what web 2.0 design is)

So, without further ado, let’s start with the tutorial: 60

One of the things I saw many people fails at in Photoshop is to create convincing cigarette smoke. It’s just a matter of observation, so it’s really simple when you think about it. Most people thinks about smoke like fluffy clouds. That’s OK… for fluffy clouds. They’re made of steam, while smoke is a very different thing, and cigarette smoke has its particularities. I won’t enter on the physics behind it, but let’s say that cigarette smoke is made of threads of smoke rather than clouds of smoke. And it’s white, almost 100% white.

So without further ado, let’s enter the tutorial

Creating cigarette smoke Photoshop tutorial

First, let’s open a photo with someone smoking. For this example, I took a pic of Lindsay Lohan which also needs some work, so I’ll create the smoke, manipulate it to look as letters and work on enhancing the picture, all in the same tutorial. You can’t complaint, huh?

This is my picture, feel free to choose any other you like

Now that we have the pic to work with, let’s start by the very basic:
1- Open the document
2- Press Ctrl+J to duplicate the background so you have a backup just in case
3- Name the new layer as you like

Creating the smoke
1- Press D to set your foreground and background colors to black and white
2- Create a new layer. Name it smoke
3- From the cigarette, draw an inverted triangle with the lasso tool
4- Go to Filter > Render > Clouds
5- Press Ctrl+F until you get around 70% of white and 30% of black

by now you should have something like this:

6- with the lasso area still selected, make sure you have black set as foreground color and go to Select > Color Range. Make sure you have these values: Select: Sample Colors / Fuzziness: 200 and the Selection ratio checked. Press OK and it will select a little area of your smoke. Delete it (press Del) and you’re done with this step.

7- Press Ctrl+D to deselect everything

8- Now duplicate the layer using Ctrl+J

9- Go to Filters > Distort > Wave and use the following on any one of the layers (click on the image if you don’t see the values):

10 – Select the other layer and change values slightly. From top to bottom I’ve used 5 – 10 – 137 – 15 – 20

11 – You’ll probably need to arrange the layers, maybe flip them horizontally, do it as you see it fits

12 – now set the blending options to Hard Light 100% for the lower layer and Linear Dodge 45% for the upper smoke layer (or play with the blending options as you like). If you need it, adjust curves on any of the layers to make it look as you want.

13 – That’s it! This is what I ended with so far (click to enlarge):

let’s add some pizzaz! This photo needs some retouch, so we’ll do a very fast but nice retouch in a few steps

Fast Photo Retouch

1 – Press Ctrl+A to select everything, then Ctrl+Shift+C to copy all layers combined. Then Ctrl+V to paste it (as you may notice, I use mostly keyword macros, it makes your work really fast, so be sure to learn them!)

2 – Now go to Filters > Blur > Surface Blur . Use the following values: Radius 7 / Threshold: 23 (it may be different for larger or smaller images so those are just guideline values)

3 – Set that layer to Hard Light and 60% (or adjust as desired, those are the values I used)

4 – Duplicate the layer using Ctrl+J

5 – Set the blending options to Screen 45% (or adjust as desired, those are the values I used)

6 – If you need it, create an adjustment layer on top of all layers. You can do so by going to the layers window and you can find it at the bottom. Click on that semi-circle you see with the red arrow and you’ll see a menu. Select Curves and adjust as needed

7 – Done!

Playing with this Photoshop Tutorial

Now I’m sure you can think on many ideas and usages for what you learned in this tutorial. I did something like the following by using a curvy font letter by letter, rasterized it and from there did the same steps I told you previously. It may look like a lot of work but if you learned the key macros, it’s a 3-4 minutes work, check it out!

Hope you liked it, please comment and make as many questions as you want. If you link to this tutorial, give me a shout