Creating grass in Photoshop

3
1360 days
by in General talk

A very beautiful resource for web designers is drawing grass, although it is usually hard. I've come up with this great tutorial on how to create grass, of any size, color, or anything.

This is the result you can get:
Grassy field:
Grassy field

Grass in a website header (This is actually a design I've done to add to this blog)
Grassy design
(Click to enlarge)

Step 1

In this tutorial we will be creating the first image, a grassy field.
So open up a new document (A medium size will do, I'll be using a 500x500) and fill it with a nice blueish gradient:
Step 1

Step 2

Download this set of brushes, which contain 5 different styles of grass, which will create the illusion of variety.
(To install this set copy the .abr file and go to C:\Program files\Adobe\Photoshop x\Presets\Brushes\ The x is your installed version of Photoshop )

Step 3

Select some tones of green, try to chose a light one and a dark one to start (And ones that look sort of natural) and with the fourth brush from the grass set (The one that looks darkest in the preview) create a sort of base with the darker color.
You'll end up with something like this:
Step 3
Now that you've got the base, switch to a more spaced brush, and with a bit lighter colors cover the base. I used for this the third brush.
It now looks like this:
Step 3_1
After this you'll have light green grass, but in the places closest to the bottom it is supposed to look bigger and darker, to look ok, so with the same brush (Or another one if you prefer) and darker colors paint in the bottom and corners specially, creating a more realistic feel.
It will look like this:
step3_2
And finally switch to a brush a bit more condensed and with medium greens fill in the blue spots, retouching and finishing up some details. This is just for a great result, and after all this tweaking it will look like this:
step3_4

Final steps

You can now add some text over the grass, as if it was standing on it. To do this simply type in the text and put it between two layers of grass. If you didn't separate the grass into layers just create a layer above the text and draw some more grass covering a bit the bottom of it. Then duplicate the text, distort it to cover the bottom and change the color of it to black, then use the gaussian blur and you'll have a shadow (Which should go also under the grass that covers the text)
It will look like the grassy field I showed at the beginning:
Grassy field
Here is another example of it:
Grassy Ad
Other uses are the ones I also showed at the beginning, for headers and footers in websites.

Enjoy,
Alex

How we became web developers…

3
1362 days
by in General talk, Tips

Evolution of web developersI normally write to those web developers/programmers who are already good, experienced, and thus the articles are somewhat advanced.
But today I got up feeling nostalgic I guess, or I just felt like remembering back on my www birth, on my first impression of the Internet, my first site online, my first steps in w3c standards, the day I discovered CSS, my first table-less layout, the day i realized IE was total crap... In a few words, I wanted to talk about all the special events in a web designer life.

So first you realize you want to do something that you think will make you rich and famous, and you realize that millions of people go in Internet everyday, so you believe that if you learn how to design a website you will have those millions of visits. Come on, all of us once believed that was true ;)

So from here some take on an html/Dreamweaver course or they buy a book. I'm more of the book buyer, but I know many signed up in a class. It is now that you learn the basics, and you design a table-based website, which is about... Your favorite computer game! (Or pet, or music group, but it is always of that sort... ) And from there you start Your Own Website! which is about you, and you make it sound "professional", and you show it to your friends and they are totally amazed!
By now you feel like you are a genius, and suddenly, as you are in Dreamweaver doing some crappy tabled design, you look into the source code for any reason, and you find something that astonishes you, CSS styles at the top!
You are feeling surprised, and when you start playing with it Dreamweaver pulls down this enormous drop down of available things to do, and you are totally overwhelmed by the new capabilities you've found! So you just experiment for a while.
If you haven't done so already you get your own free domain, which always looks like "alexwebdesign.freewebsites.com" or something of that sort...
Either now or before CSS you find those "Cool JavaScript snippets" sites, and you fill up your site with "snow falling" and "mouse trails" and the weather, and the time, and all sorts of totally stupid things you think are cool... But don't blame yourself, we all did it...

You are starting to feel quite an expert, but you want to do one of those "Contact forms" that are so cool and different from your "mailto:..." hyperlinks, and you go into a forum and ask how they actually send the email, and they will probably tell you "PHP does it", and of course your next question is "php?"

And yet again you seem to see a new horizon appear in front of your eyes, full of new paths to explore, new ways of discovering the boudless capabilities that web development is opening for you.
At some point here you find that there is something called Databases, that you can use to dynamically store and display data, and you want to test them right away.
Your first dynamically generated pages take you about a week to get them to work properly. You struggle to do a simple INSERT query, but you are happy, of course.

If you felt like an expert before you now think that you could even create a replica of Google if you wanted, and in your high, you take on a dynamic website, with user registration and all of those cool things you've seen so many times. That website has your name on the footer of every single page, and it is usually about Gaming, Books, Music, Tutorials, or Animals. When you think you are done you are astonished to see that not even one user registers! And you suddenly find out that for the world you don't even exist...
You try to find yourself in Google a week after you make the website public, and it isn't there... You know nothing about SEO, you think that Google "magically" finds the websites, until yours is listed.
Once that happens you start asking how and why, and you dive into the world of SEO, PR, rankings and stats. You install Google Adsense and Google Analytics or similar software, and you check both everyday...

It is at this point where you either continue and become a good web developer (After lots, and lots, and lots of practice and reading), or you quit and remember it as an interesting adventure for the rest of your life.

If you chose the first alternative (Which I did, although I missed the "being good and practicing a lot" ;) ) you'll start to get clients, and work, and you suddenly realize it has become tedious, having no freedom to chose when and what to do... But well, it is now a job so...
Most of us also start a blog now, and here I don't know about the rest, but I was TOTALLY surprised to see the stats... I have to say it has been incredibly amazing and all thanks to you guys, so yea, check out where you are in the line, and see what you've got ahead :S

Enjoy,

Beautiful tab design:

0
1364 days
by in CSS, Layout/Styling

This article is not on how to create tabbed menus, is just about how to style them!
I completely forgot who was the source, so if you happen to be the author comment your URL and I'll put up a link :S

Anyway, I found that this is by far the easiest and probably most beautiful design for liquid rounded tabs out there, that requires absolutely no tweaking or adjusting.
It uses only one background image, which contains at the same time the normal state, hover state, and active state. In this case the image is a png image in white, and grey tones, but that can be easily changed in photoshop.
Here is the image in question:
Tab image

As you can see it has the three tab states on it. We will use CSS background position abilities to make it look as if we are changing the image.
Now to make the tabs have liquid width we will use an a element for the left corner and a span for the other one.
Here is the CSS source:

@charset "utf-8";
/* CSS Document */
ul.cftab,ul.cftab li{border:0; margin:0; padding:0; list-style:none;}
ul.cftab{
border-bottom:solid 1px #DEDEDE;
height:29px;
padding-left:20px;
margin-bottom:20px;
}
ul.cftab li{float:left; margin-right:2px;}
 
.cftab a:link, .cftab a:visited{
background:url(tab-round.png) right 60px;
color:#666666;
display:block;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;
}
.cftab a span{
background:url(tab-round.png) left 60px;
display:block;
height:30px;
margin-right:14px;
padding-left:14px;
}
.cftab a:hover{
background:url(tab-round.png) right 30px;
display:block;
}
.cftab a:hover span{
background:url(tab-round.png) left 30px;
display:block;
}
 
/* -------------------------------- */
/* ACTIVE ELEMENTS */
.cfactive a:link, .cfactive a:visited, .cfactive a:visited, .cfactive a:hover{
background:url(tab-round.png) right 0 no-repeat;
}
.cfactive a span, .cfactive a:hover span{
background:url(tab-round.png) left 0 no-repeat;
}

To have it working you must use html code in the following way:

Notice that the ul has the class cftab, you can change that to anything you want, but remember to change it also in the CSS. The prefix cf is just used to avoid collisions with other styles you might already have.

I haven't set up a demo page, but it is so simple that if you want to test simply copy the codes and paste them on an html page and try it...

Enjoy,

In/Famous Google searches

0
1367 days
by in General talk, Web-related

Google has recently made public their listings of the most popular things on the net in 2007, and I've decided to put it up here:

In general:

The terms that were searched suddenly a lot: (Fastest gainers)
Fastest gainers

News and media:

Most searched-for candidates:

Candidates

Most searched for rumors (RIP):

RIP (or rumors of)

  1. anna nicole smith
  2. travis barker*
  3. vince mcmahon*
  4. chris benoit
  5. fidel castro*
  6. michael jackson*
  7. ryan sheckler*
  8. bob barker*
  9. criss angel*
  10. kurt vonnegut

Shows:

Hollywood:

Hollywood

On field

On Field

On tour:

On tour

On the tube

On the tube

New tech:

Games consoles

Games consoles

Key players

Key players

TV Screens

TV

P2P/Music Sharing

Music p2p

Who/What/Where questions:

Top of mind

Who is...

  1. who is god
  2. who is who
  3. who is lookup
  4. who is jesus
  5. who is it
  6. who is buckethead
  7. who is calling
  8. who is keppler
  9. who is this
  10. who is satan

What is...

  1. what is love
  2. what is autism
  3. what is rss
  4. what is lupus
  5. what is sap
  6. what is bluetooth
  7. what is emo
  8. what is java
  9. what is hpv
  10. what is gout

How to...

  1. how to kiss
  2. how to draw
  3. how to knit
  4. how to hack
  5. how to dance
  6. how to crochet
  7. how to meditate
  8. how to flirt
  9. how to levitate
  10. how to skateboard

In conclusion...

I was totally shocked by some of those what is.. how to.. or Who is questions... :D

So apparently people are most interested in learning how to kiss, followed by drawing and just next by knitting! Are those the three most important things someone might want to learn?
Now I looked down and I saw hack... lol, poor geeks trying to learn to hack :)
And then you'll see crochet, well I searched to see what was that and it turned out it was something you have to do to knit!

Now just look at who is... They ask who is god to Google! As if the answer was somehow on the Internet!
And well, you can just take your own conclusions out of this... ;)
Source: Google Zeitgeist 2007

Enjoy your day

If browsers were like…

4
1369 days
by in Browsers, General talk, Web-related

How many times have you seen those great "If browsers were like... boats/women/cars/houses..." articles? I always wanted to make one of those, but I don't know exactly which "technology" to use, so I'll do one that basically says almost everything:

  • Firefox:
    • If Firefox was a car: It would probably be a BMW or a Porshe, something elegant, with lots of extras to add, fast and secure.
    • If Firefox was a woman it would be that great woman you thought it didn't exist, that knows how to do everything and does it perfectly, she's hot, and you finally found her
    • If Firefox was a house it would be a complex empty two story house plus a basement with a great core. It would have the option to customize it as wanted, and almost every single person that knew about houses or contruction would own one like yours.
  • Opera:
    • If Opera was a car: It would be one of those tiny "sport" cars, fast, two seats, almost no room in the trunk for anything else, a very good engine and very slick.
    • If Opera was a woman it would be a simple woman, pretty, with not much makeup, wearing normal clothes, you would probably be with her because you don't need/want anything better, although from time to time you always think of going back to your Firefox woman.
    • If Opera was a house it would be a small one story house, beautiful, simple, modern, and classic, almost casual.
  • Safari:
    • If Safari was a car: It would be one of those lovely Minis, or a Smart. Quite nice, stylish although with some "retro" design combined greatly with modern curves. A fast engine, lots of extras and for only a few people.
    • If Safari was a woman it would be stunning, hard to find and to get used to, but once you are accustomed to her you'll probably stick with her for a long time. She's stylish, looks like a model, always following fashion in a very discrete way.
    • If Safari was a house it would be "modern art" designed. A bit weird at first and only a few people would now how to live in it and enjoy the experience.
  • Internet Explorer:
    • If IE was a car it would be some sort of common car. A family car, a standard design, for people that don't understand cars it would look great, but inside it it would be a disaster. You would have to go to the garage every month to fix something. It would have a standard engine that at first would look nice, although in reality it wouldn't follow any standards at whatsoever. It wouldn't be a car made to drive on the road, the road would have to be built for the car.
    • If IE was a woman it would be your first "love", she'd be quite hot, and easy too. And you would be feeling great until you found out that everyone "used her" and that she "carried" lots of "viruses".
    • If IE was a house it would be the first house you bought for yourself, the first time you walk in it would seem great, easy to use, nice. After a while using it some cracks would appear on the walls, and you would find out that there were water leaks, broken pipes, and all sorts of failures, and you'd switch to a better house...

And that'd be basically it. If you are reading my blog using IE I really discourage you to do it again. First get a good browser, like Firefox, and then yea, come read my blog as much as you want.
You'll also notice that the design improves greatly when you switch. It is my way of protesting against IE I'll never fix my CSS to look nice in IE!

And I personally think that this should be done by all serious web developers on their blogs. Come on, we write for proffessionals, and proffessionals don't use IE! ;)

Enjoy,

« Previous
Next »
Go to Top