A lot of times my clients ask me on how to add media, like images to their WordPress posts or pages. It is not difficult, but sometimes a screencast helps things along.
I have conveniently put together this simple WordPress screencast on how to insert an image to a post or page in WordPress.
The following is a simple video screenscast for new users to become familiar with creating a new post in WordPress. Hopefully this tutorial is helpful. If you have any questions, feel free to ask.
This is for WordPress users who are really new and are not sure how to use WordPress yet. One of the highlights is that I go through a lot of the different icons for the visual editor so newbies know. It is easy to learn by poking around and trying each, but I think adding this helps for those not as computer savvy.
The definition for a favicon at Wikipedia is:
A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage.
For the rest of us who are not as technical. It is that tiny picture next to the browser URL area that might change when visiting one site to the next.
1. To add one, it is simple. First you at least need to make a 16×16 pixel icon in your graphic editing program.
2. Convert it to the accepted .ico (for icon) file extension. There are a few favicon generators online. Here is one I often use: Favicon Generator Tool at Dynamic Drive
3. Once you have saved the file to your computer, you will need to upload it to your web hosting space.
4. In your layout’s template, before the ending head tag, put the following code:
<link rel="shortcut icon" href="http://YOURDOMAINHERE/favicon.ico" />
Make sure you replace “YOURDOMAINHERE” with your URL path where you have uploaded your favicon file.
Once you have done, bookmark your page. You might have to clear your computer’s cache, and also restart your browser to see the changes.
For those who use WordPress, normally this would go in your header.php file. In the case that you are deciding to use a plugin for this – DO NOT. Just use this tutorial. It is less coding and if you are still confused, ask and I can try to help walk you through it.
HTML is a short acronym for HyperText Markup Language. The language consists of tags surrounded by angle brackets and can effect the way a person sees a website. It can be used in scripting languages like cgi, php, and javascript to person any number of actions.
Example of a tag:
<head>.
A basic page consists of several key points that should be placed in the layout. There will be another tutorial illustrating how to build a basic page, but below is very general example of how a web page is composed. In a way, the HTML to a browser is somewhat like Writing is to a Book. It tells a story all in itself on how the page should look.
Here is the basic bare bones structure of a page:
<!DOCTYPE html>
<html>
<head>
<title>Your Site Title</title>
</head>
<body>
<p>Your Site Content Goes Here.</p>
</body>
</html>
The Document Type, HTML Head, Title, Body, tags are extremely important and should always exist when coding a website layout or the page may not show up properly or not at all. If you notice, the tags seem to be repeated, but the second time it is repeated with a forward slash (‘/’) in front of the tag name. For every open tag, there must be a closed tag. Some tags like linebreak (br), and image source (img) tags are singular tags and the forward slash is within the url.
Just a few example of tags that do not have a paired tag:
<br />
<img src="YOURIMAGEFILEHERE" alt="IMAGENAMEHERE" />
If you put a web page together, you can label the page with the extension of .html or .htm and view it offline (without accessing the Internet) or you can load it to a server, whether you pay for a webhost or for a free account.
When breaking down the code above for the basic HTML page, you will note that there are really 3 main sections: the header, the content, and the footer.
The Header
<!DOCTYPE html>
<html>
<head>
<title>Your Site Title</title>
</head>
<body>
The Content
<p>Your Site Content Goes Here.</p>
The Footer
</body>
</html>
In between the body tags goes the code for all of your layout and content. In the header, that is normally where you will put in your style sheet code and any elements like javascript or other script to help allow your layout to dynamically function.
This tutorial is designed to help you get an idea how to vector. For this tutorial, the photo to the bottom of this article will be the one that will be referenced throughout the tutorial. The same techniques can be used for other pictures and even freehand vector images. Although I am going to be using Paint Shop Pro, these same things can be done in Photoshop and Illustrator. Also, because some of the images are quite large, they will be resized, so you will have to right click and open in a new window or tab to see the larger version. Some images may only be opened in a new window to view.
1. Choose an image. As said, for this tutorial, you can download the image HERE. You will have to right click and open it in a new window before saving it to your own computer.
2. 
Posterize the image. This will help you be able to differentiate which layer is which. In this case, for Paint Shop Pro, go to Edit> Artistic Effects> Posterize. For the best layer separation in this particular photo of a lily, use 10.
3. For this image, you can either use your own colors or the ones in your image. For this tutorial I am using ones closest to what the image has already. To get the colors for your first layer, choose the dropper tool 
and click in the color that you will start with. My suggestion is to pick a starting place that will be best, like a base color. When I create vectors, I start with a base and then continue with my lighter colors before going back for the darker shades. It makes less work as some vectors are difficult and require that you move some layers around.
4. You will need to zoom in on the image to help you focus on outlining. Use the 
pen tool and with your first color, outline the flower. Using 1.0 width. You do not want it to be a wide line.
5. Once done with the first layer, put that on invisible in your layer toggle area. With the next layer, you will outline the next lighter color from your base color. Make sure to click on New Drawing Object to start your next layer.
6. ( Second Layer Screenshot |First 2 Layers | Three Layers | Almost done)Repeat each layer until you get to the lightest layer. You may improvise with more layers if you like a smoother vector. When the light layers are done, touch up with the dark layers.
7. Once all layers are completed, toggle all layers to be visible to check work. Make appropriate changes until satisfied. Delete the background rastor image to leave background transparent. You can make your own background if you want.
8. Save in raw form so you can make later alterations if needed. To save for use, merge only the layers visible. Do not merge all or you will have a white background.
In the past, getting rounded corners meant you had to create a rounded rectangle, splice up the image, and then code it with HTML and CSS. A couple years ago, developers came up with a rounded corners attribute in CSS. It is called the border-radius.
This CSS trick does not currently work in Internet Explorer. These can best be seen in browsers like Mozilla Firefox and Safari. The corners will revert to being squared, but it will not cause any issues. Also, this trick is not considered W3 web standards compliant. It is a nifty trick that even Twitter has used on their layout.
The following below are the elements associated with this.
Firefox:
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
Safari:
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
You may want to use all so this effect can be seen in as many browsers as possible.
There are two different versions as some browsers read each code in a slightly different manner.
To get this effect, you merely specify the area, usually a division layer in your actual web page.
<div class="roundedbox"></div>
In your web page’s CSS style sheet, you will need to define what you want the roundedbox to look like. In the case of this tutorial, I want a background with white and a border of light gray. In the case of this tutorial:
.roundedbox{
background:#fff;
width:100px;
border:1px solid #c0c0c0
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
The 5px can be replaced by a smaller or larger number. This number tells the browser how much of a curve radius the corner will be. In the case of 5px, the curve is slight. With 10px, the curve is a bit more noticeable.
Try it out! You can also remove some parts of the code to make it different. For example if you wanted the top corners to only be rounded you just remove the CSS for the bottom border radius elements.
Have you tried this out?
The page jump is a simple HTML trick that involves the anchor tag and a little naming. The page jump allows visitors to click and jump to a different part of a page. This is a great trick to use in FAQ type pages, especially if the list is quite long.
1. Create your hyperlink code with the URL.
2. Add after the URL ‘#’ and a name for your url.
<a href="URL#nameyourlink"></a>
3. Place the following anchor where you want your topic to jump to on your page.
<a name="nameyourlink"></a>
Simple, right?
By the way, if you have a question on web design and would like to see a tutorial, you can use the Blondish.net contact form to ask. If it is WordPress based, your tutorial might be published at WPAddict.net.
Making your own emoticons (smilies) involves using your creativity. However, in this lesson, you are going to be give a zip file filled with the basic smilies that I use for mine which I like to say are considered cute anime smiley templates. They are only the eyes and mouth and whatever comes with it, like for the idea emoticon, there is a lightbulb, and the kiss one, the eyes are hearts.
Your smilies when finished will have to be saved in GIF format. If you have a animation program and want to animate some in your own way, you can do so.
I am using Paint Shop Pro for this tutorial, but the same concepts can be applied in Photoshop as well as other graphic editor programs too.
Download Emotion Bases (for the smiley faces I use) – Emoticon Bases (566)
Step 1. First off, you have to decide what size you want your smilies to be. You do not want them too large and sometimes if they are too small, you are limiting what you can do with the image.
For a decent size, we will go with the 21 (wide) x 17(tall) pixel smilies that I use as a base for the creative cute smilies I have like the alien, bunny, panda, and bear sets. So, first, we work with a blank template of 21 x 17 that has a background color of #FFC0FF.
Step 2. Pick a color and with your pen tool, you adjust it to be 1 pixel (or in Paint Shop Pro, Size 1. Make sure your image is large as you will be able to see your small pixels as you make them. I used 4000% when making mine. Using the blank template above, you outline what you want your emoticon shape to be. In the case of this tutorial, the smiley I am making will be an ellipse.
Make the shape as smooth as possible. It may be hard to tell when you have the image zoomed in, so you can play around and zoom out to work with your image.
Step 3. Part A. Fill the inside of your emoticon with a lighter color. If you do not want any style, you can simply fill it with one color. If you want an effect to make it seem like it has depth, you with have to use more than one color. To have just one color, you can make it like this: 
As you can tell, there are no effects and the image seems flat. For depth, try Part B.
Step 3. Part B. To make more depth in your smiley, you will have to apply a vector-like technique. A vector is a shape and and in make a graphic, we apply the different shapes and colors to make the depth of the object appear.
Of course, when working with the emoticons, especially this one, we want the colors to be somewhat similar, but as they are applied, next layer on top is smaller and also a lighter color than the previous.
Step 4. Now that the main base is filled, we will be making the simple smile emoticon. As provided, the smile base I use is in the zip file with the other bases. Of course, if you would like your smile to be a bit different, you can make your own. The templates are for anyone’s use.
Make sure your background is the same as the template background of #FFC0FF. Copy the smile and paste as a transparent layer onto the main emoticon template that you just completed.
Step 5. Make your image transparent. With your background still set at #FFC0FF, in your graphic editor you should be able to make your image transparent. In Paint Shop Pro, usually, you can press the keys Ctrl+Shift+V . You will get a few windows that will direct you through this. Once you have clicked OK, you can press the keys Ctrl+V to view your transparent image and then save it. You can right click on the following to make sure you are selecting the right fields in the command prompts of the graphic editor. Screenshot 1 , Screenshot 2
Your image should be finished. Of course, as mentioned, you can make your emoticons any shape, color or size, so have fun!
Have you tried this tutorial? Do you make your own smilies?
