Browser detection

Some days ago I finished a site but it was only coded (CSS) for a perfect view in Firefox 3 and IE 6. I’ve neer had a CSS file for IE 7 since I dont use it but when viewing the site on a computer that had IE 7, it had some minor problems…so I decided it was time to create the IE 7 CSS file.

Searching the web, this is what I ended up with:

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
< ![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
< ![endif]-->
< ![if !IE]>
<link rel="stylesheet" type="text/css" href="firefox.css" />
< ![endif]>

The only problem is that it is not XHTML standard…

Bookmark and Share
Posted in CSS Tutorials | Leave a comment

Alexa rank updated/changed

Today I noticed that Alexa rank was updated/changed. So congratulations if your Alexa rank was lowered or keep pushing your site traffic if didnt move or got higher.

What is Alexa rank?

Is a rank that measures mainly your site traffic. If you have a low rank, lets say 350,000 then you receive like 1,000 unique visits per day and so on, if you have a high rank like 6,000,000 then you receive around 40 unique visits per day.

How do I know the Alexa rank from a site?

There are two ways:

First way, you can head to http://www.alexa.com/data/details/main/miligraf.com (change miligraf.com for the site you cant).

Second way, you can install their toolbar at http://www.alexa.com/site/download/

I recommend the second way because while you are navigating the internet and visiting different sites, the toolbar loads their rank and show it (like the PR tollbar).

Whats the use I can give to this rank?

When you are looking for a site to affiliate, you can know how many unique visits per day (aprox.) they have and that will help you decide with which site you affiliate. It also helps when you want to advertise on a site and the most important thing…to know how many unique visits per day your competitor has.

Bookmark and Share
Posted in Web Development | Leave a comment

Simple 3D Text Tutorial

Simple 3D Text Tutorial from CoreGFX.com

Outcome

Simple to do and a great outcome, it is for beginners+. The only problem is that photoshop always pixelates when you change the shape of something and you will notice it on your outcome.

A good layer style and a reflection will make it even better, try it.

Bookmark and Share
Posted in Outsider's Turorials | Leave a comment

Electric text tutorial

Electric text tutorial from GekoGFX.com

Outcome

The only thing i can say about this tutorial is: a very simple tutorial and a great outcome!

Bookmark and Share
Posted in Outsider's Turorials | Leave a comment

The effect of Tilt-shift camera lens

The effect of Tilt-shift camera lens from Newphotoguide.com

Outcome

An easy tutorials for a great photo effect, it will just take you 5 mins to make it and you only need a good photo to work on and basic knowledge of photoshop.

Also you will learn some camera concepts.

Bookmark and Share
Posted in Outsider's Turorials | Leave a comment

Multi-page PDF’s with Adobe Photoshop

Multi-page PDF’s with Adobe Photoshop from PSDTuts.com

It was not difficult to select this one since the other tutorials were the same old things that people make tutorials about even if there are thousands of tutorials about the same topic…

This tutorial tells you, in less than 5 minutes, how to create a PDF file with one image in per page (you select the ones you want to include).

This could be useful if you want to do a presentation of photos only, your work or perhaps to show different designs to a client in a single file.

Bookmark and Share
Posted in Outsider's Turorials | Leave a comment

Create Rainbow Logos with Warped Grids

Create Rainbow Logos with Warped Grids from PSDTuts.com

Outcome

I decided for this tutorial because it was easy to do and you do not need extra things that from what Photoshop has. So its for beginners and up.

The writer does not tell you but this tutorial wont work in Photoshop CS (the one i have) and i dont know in which version and up will work…i guess CS 2. I am talking about the Warp tool from Transform.

Also before starting the tutorial reset your colors by pressing D on your keyboard, else you wont be able to have the same output.

Bookmark and Share
Posted in Outsider's Turorials | Leave a comment

Rendering tutorial

Rendering tutorial from Blindmansgfx.net

Outcome

As a photoshop user i bet you will once need to render an image. This tutorial is for beginners, you need to know which tools are mentioned on the tutorial but with a couple of weeks using photoshop you should know it by now.

The only thing the tutorial does not tell you how to do is to make curves with the anchor points…i guess the writer simply forgot since he/she covers all the render related things but not this.

You can make curves with anchor points while holding Alt and click-and-drag over an anchor point.

Bookmark and Share
Posted in Outsider's Turorials | Leave a comment

Blood brushes

In the first part we wont use PhotoShop.
First, get a white sheet and get your black ink cartridge and start hitting the sheete with the cartridge but if no ink comes our, put your hand behind the sheete and press the part from the ink comes out.
This will get you a lot of ink so spread it with the cartridge. The ink will dry in a few seconds but put your hand over it to be sure it is dey.
Now scan it, put the options: 200 dpi and Color (not white and black).

Open the image with PhotoShop and go to Edit > Define Brush Preset and type a name. Done this, open a new documentof 500×500 px and white background, create a New Layer (Control + Shift + N) and choose the Brush (you will get by default the brush that you just scanned). Apply it and right-click the layer and go to Blending Options:

Inner Glow:
Leave it as it is, just change the color to 9E0F10.

Color Overlay:
Leave it as it is, just change the color to 7E0505.

The result should look like this:

Bookmark and Share
Posted in Photoshop Tutorials | Leave a comment

Unique Web Button

Start by creating a 150×150 px document, with white background. Press Shift + F5 to fill the new layer with 353D44. Create a New Layer, select the Rounded Rectangle Tool and make a rounded rectangle (radious 10px) like this size:

Right-click the shape layer and Raterize Layer, now right-click it again and go to Blending Options:

Parts just needed to be edited will appear

Outer Glow
Blend Mode: Normal
Opacity: 60%
Color: Black (#000000)

Color Overlay
Color: 374756
Blend Mode: Normal
Opacity: 100%

If you want, you add a some white brush to the button:

Done that, create a New Layer (Control + Shift + N), insert your image or text (color: white) and resize the image or text you will use. Right-click layer and go to Blending Options:

Parts just needed to be edited will appear

Outer Glow
Blend Mode: Overlay
Color: White
Size: 10px

If you wont add anything else, then create a New Layer. Holding Control, click on the button layer (rectangular rounded shape) and with the Rectangular Marquee Tool make a selection (holding Alt) of the bottom-half part of the rounded rectangle:

Now, fill that selection with White and apply the White to Transparent 4 style:

*If you dont have this style, click the blue arrow in the Styles Windows and select Web Styles and click Append, now just go to the bottom of the styles list.

Next, just change the Gradient Overlay blend mode to Soft Light:

And thats it! For your site, just use the different colors needed.

Bookmark and Share
Posted in Photoshop Tutorials | Leave a comment
  • Links