Creating Webpages with Fonts for All Browsers

As budding web designers, it is our goal to create web pages that are both functional and aesthetically pleasing. Pages that display above par aesthetics are memorable and invite the viewer to linger. There are many ways to achieve this difference. One way is to use non-standard fonts. This tutorial will explain how to write different fonts into your html code, the danger of non-standard fonts, and how to circumvent that danger.

Read more

10 Ways Photoshop Can Help You in Web designing

10 Ways Photoshop Can Help You in Web designing
web designing using photoshop
When it comes to developing images for webdesign, no tool is more versatile than Photoshop. Although Illustrator may be better suited for creating graphics from scratch, Photoshop has an abundance of tools including basic creation. It's the other tools for images that makes Photoshop such a powerful asset. What can be done with this popular program?


1. Resolutions – The first thing you should know is that producing images for the Internet only needs to be 72 pixels. While you can use images that are larger in resolution, the will become larger in file size taking a computer longer to render it.

2. Buttons – Creating buttons in Photoshop is relatively easy. Thanks to the Bevel and Emboss tool, you can put an outer bevel on a simple square image and give it a 3D protruded look as if you were looking at a real button. Through the use of CSS rollover image commands, you can have this button one color while changing to a different color once the mouse moves across it.

3. Gradients – Photoshop has the ability to place gradients in your text, images, backgrounds, and more using any number of colors you wish. You could easily create a an effect of the entire spectrum of the rainbow in any selected layer. There are hundreds of ways that the gradient ability can be used in regards to designing stunning effects for anything you are making.

4. Shadows – In the layer commands, Photoshop can create drop shadows for the image. This is great for assisting in simulating 3D effects that seem to rise up off of the screen.

5. Outer Glow – The outer glow ability can make your selected image stand out. This creates an aura around the image of any color and size you like. This works great for getting attention to your text.

6. Product Collage – By selecting individual products from multiple images, you can drag them into a single image to create a collage. For instance, dragging multiple automobiles into a single header image would work great for a car dealership or seller website.

7. Be anywhere – Much like create a collage, you can select yourself and become super-imposed on a background of your choosing. This method has created a lot of controversy since the early days of Photoshop for it allows anyone with the skills to fake nearly any image imaginable. You could put the Titanic sinking on Mars, if you felt the inspiration to do so.

8. Backgrounds – For webdesigns, using imagery for the background can be created in Photoshop as well. The background is a good place to test out gradient controls, and these types of images only need to be about three pixels wide. Backgrounds will cycle the image repeatedly on the Internet and creating a gradient look doesn't take much.

9. Appearance Enhancement – Did you know that you could make the text of your website look like it was written on 2,000 year old parchment? You can create the look in Photoshop and use the image as a background in a table or CSS command. 

10. Banner Creation – To make your own banners, they need to be 468 x 60 as a common configuration. You can put any image or images into a banner to make it an attractive advertisement. However, putting too much pizazz in a banner could make it too large of a file and could possible cause issues trying to upload it to your server or a banner exchange program.

From banners to text, Photoshop has the ability to do it all. Since the mid '90s, this program has been the forerunner for the graphic designer coupled with Illustrator. It's a tool that can make any image more or less than it really is.

Author Bio:
Jason Miner plays a vital role for www.blogcarnival.com.  He is an expert in writing topics of different categories.  He is helping the carnival team to grow & working on making this an even better place for bloggers.
 

Read more

Create rounded corners and different shapes using CSS3

How to make rounded corners and other shapes like circle, heart, triangle etc using CSS3
If you are designing/developing a website, then basic elements will be HTML and CSS for sure apart from other biggie like jQuery, PHP/Perl blah blah. And page load into the browser also matters which is being determined by the size of images being used, js files, css files etc.

I still remember those days when I used to put images for every small shape like circle, rectangle, chat bubble, quotes, rounded corners etc. But using CSS3 you can not only save disk space but web space too!
There are few attributes in CSS through which you can do amazing stuffs. One of them is “border-radius.  This property allows us to add rounded corners to elements.

The border-radius property is a shorthand property for setting the four border-*-radius properties which mean you can specifically use top-left, top-right, bottom-right, bottom-left instead of that *

Its usual syntax is:
[css]
border-radius: 1-4 length|% / 1-4 length|%;     /* Here 1-4 means four corners 😀 */
[/css]
Either we can use length that we define using em or px or we can use percentage. How we can achieve various shape using this property. Let’s see rounded corner stuff first.
CSS Code:
[css]
<style type="text/css">
  #round-corner{
  padding:10px 40px;
  background-color:#FF0000;
  width:300px;
  border-radius:25px; 
}
</style>
 [/css]
You could write border-raidus in em or percentage too even.
Something like:
 [css]
border-radius: 2em 1em 4em / 0.5em 3em;
[/css]
which is equivalent to:
[css]
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
 [/css]
 
Then write below code inside body tag:
 [css]
<div id="round-corner">Isn't it amazing to use border-radius property instead of rounded images?</div>
 [/css]

How the browsers interpret which em for whom if we missed any of those four corners?
 
Answer is simple, follow this rule:
The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

 
How about having circle or oval shape using border-radius property?
You just need to include height, width in proper ratio and then  border-radius would do the rest. What I meant is :
[css]
<style type="text/css">
#circle {
                height: 70px;
                width: 70px;
                border-radius: 35px;  /* or 50% */
                background-color: #FF0000;
}
 
#oval {
                width: 200px;
                height: 100px;
                background: #FF0000;
                border-radius: 100px / 50px;   /* or 50% */
}
</style>
 [/css]

Please check this link for fully working code and resulted shapes from these code snippets.
 
One task for you people

Can you make these shapes using border-radius property?

 Once you will be familiar with this I would write a post on :before and :after pseudo CSS properties. Then we will be able to make heart shape or infinity shape or even yin-yang shape (something like Symantec logo 😀 )

 
Note: It may not work in some older version of browsers specially IE! So, Test these codes in chrome or Firefox or safari
 

Read more