Posts by Lorelei

Typography on a web page is as important as it is in any other medium, it does not matter whether you are typing for packaging, publishing television or signage, and all designers must take into account the medium they are using and the techniques they will use to suit that medium. You want your work to be easily read and be pleasing to the eye.

This being said an example is that of an article written in a magazine compared to that of a poster. While a magazine is read at close distance and within arms length, the typeset can be small and still be easily read. Whereas a poster is larger and seen in a more oblique manner, you would want to space the words so they are easily discerned by the viewer.

All in ONE Cufon plugin allows you to easily replace fonts in WordPress

When designing for a webpage there is a full set of new problems to overcome. You are dealing with an audience that has different screen sizes and platforms. There is a way a designer must work to take all of this into consideration while designing a page that it easily viewed in all different platforms. You can not assume that all of your viewers are using the same equipment you are; even the speed of connection should come into mind when you are designing.

Examples of Good Use of Typography in WordPress:

Depending upon your content you can change up the style sheets to best suit your needs. You can change heading and sub heading sizes as well as your body text sizes to best fit your page whether it is an informational site, children site or a more technical site. These type settings are simple to change and the style of your webpage should take into consideration your targeted audience. You would not use the same style on a children’s page as you would on a page created for business investors so it is important to keep your targeted audience in mind.

• Orientation - If you are reading a book and you see upside down type the first thing you do is flip the book, not such an easy task with a computer. Vertical type is not possible with HTML but it can be done by using a JPG, PNG or GIF. This can work for you if used sparingly. A heading of this type will grab the reader’s attention and if in a good balance with her things like color, weight and size can be beneficial. This type of heading calls for attention and when used alongside other material can unify this material and become very effective.
• Position - As a different type style used such as maverick, any line that is in a different position will quickly catch the eye of the viewer. Breaking up the natural flow of the page will simply get more attention. You can change any body of text by only changing one element such as font, color position and so on. Anything that looks different or out of place will automatically draw the eye to it. Just like the saying goes, rules are sometimes made to be broken.
• Space – If you type on a white page one word of 8 point type, your eye will be drawn to it. On the other hand if you’re working with a full page of 12 point type you will never notice it. So as you can see not just the type on the page is important, the space that is surrounding the type is just as important. You can easily learn this skill by playing with different type and space settings to get the most out of the idea you want to put across. This is not only a technique used in writing, it is used is painting, architecture and more.
• Priorities used in a creative manner - Typography means that you will also think about the importance of information and what you want the viewer to focus on, you can do this by easily deciding what is important and getting that important information to stand out. You can create a web page that is pleasing to the eye while still getting across what is most important. You will find it very rewarding when you take this important fact into consideration. You want the important content to stand out so the viewer can see exactly what point you are trying to make without having to read through pages of fluff.

Here are some tips for the use of different fonts in HTML:

1. Use the correct font style and case size to get your information processed quickly by the viewer. If your viewer is seeking information you will want the font to be something simple to read such as Arial or Veranda so they can easily read through and find what they are looking for. You should also keep in mind the color and size of the text.
2. When you are looking at your web page design always keep in mind the type, color and size of font, this is very important this can instantly add more value to your web page.
3. Choose a font that is simple to read. Using a font such as Times new Roman keeps everything in uniform, a font such as calligraphy is very distracting and too hard to read. The best thing for you to do is read through a few lines and determine if you can read it easily. If you can do it your viewer can too.
4. Do not fill you page with different font styles, if it is called for such as an artistic site, you may use different font styles but they should be used in the headings or sparingly throughout the text, do not fill your text with different fonts because it becomes distracting to the viewer and they will lose interest.
5. Most of your text should be between 12 and 14 points. This allows all readers the easy access because not all readers have perfect vision a small print may deter some viewers from your site and you do not want to loose viewers, the point is to make a site attractive to all. You should keep in mind that you will have many viewers and you should try to compromise for all viewers, and make sure your heading is in a larger font than the text.
6. The final tip deals with color, use a good contrasting color for type that will not be lost in background colors, the best choice is always black type on a light background, just be careful when choosing colors for your web pages, you do not want to put a dark background and dark type on the same background, it will be too hard to read and your viewer will be lost.

As we promised about a month ago, we will be releasing more freebies , so here is one small but useful freebie — Photoshop action that makes a very nice vintage effect.

This action will not only add washed effect and sepia  tone to your photo, like most standard actions do, it will also fix any dark areas you have on the photo (like the black dress curves you see on our example), will add a few layers on noise, one standard and the other imitates small mild scratches. Moreover, there are a several layers of colorization, which allows our action to output a photo as close as possible to the professional photography of the past decade.

We hope you will enjoy this action and please do leave feedback, as always we appreciate any requests and ideas, as well as critiques.

The download contains 1 action, and 3 examples of (1) photo with high contrast and light background, (2) photo of good contrast and light background, and finally (3) dark background photo, so you will see what this free action is capable of. If you’d like to see more of our PROFESSIONAL Photoshop actions, please have a look at our earlier released “12 HDR pro Actions” and “Photographers’ Tool Kit” actions.

A closer look at our example:

And processed image:

Download Free

A

See also 28 Free Cards – Sweet Valentine Greetings & Chinese New Year eCards

Free Valentine’s Day Icons:

Learn Photoshop…?

Happy Valentine’s Day!!!

It’s been a while since the last time that I made a chrome-like text effect so i though let’s do something with metal elements again, since this is an effect that will never go out of fashion. Let’s make a quick but very useful tutorial, using gradients that will allow you to easily create any metallic effect later.

make a new Canvas and fill it with a dark color, we used dark gray with a little light spot in the middle to outline the effect. We are using 600 x 500 cnvas (and this is the size of the psd you can download, just scroll all the way down).

Using  a curvy font and very big letters, type your word. We used the Harrington font with 260 pixels size, however in this particular effect, the biggest is your font, the better viewable is the result. Worry not about the color you are using at the moment for typing since we will overlay it with metallic gradients, which we designed specifically for this tutorial.

Go to Layer >> Layer Styles >> Blending Options and begin applying the effects…

Our Inner Shadow is pretty important so pay attention to the size and Quality.

We decided that default “Linear” curve doesn’t really outline the effect good enough, so we used a “half Round” curve. If you don’t have it pre-installed in your Photoshop, please use our mapping:

For outer glow, we use gradient from black (#000000) to white (#ffffff). The outer glow in this case creates an additional stroke around the text, which looks slightly rounded and with a mild gradient. Without these settings, your effect will not look complete and moreover look rather poor.

And, a Rolling Slope Contour, please note that we are using the “descending” path, otherwise we will have a totally different result..

A mild touch of inner glow, just to smooth out the shadows at the edges of the text..

Now we are getting to the hardest and most essential part of this tutorial — the gradient overlay.

For beginners, it could be a little difficult to copy these gradients, but I strongly recommend that you won’t give up and try to copy them as close as possible since they will allow you to add a nice metallic touch to any text or object later. Just don’t forget to save them as a new gradient, for future use!

For Stroke effect we also used a gradient of metallic shades, however, not only it will be a different gradient (not like the one we just set up for the inner filling), but also we will set the style to “Reflected”. This allows us to have the gradient mirror-repeated, without having to set too many shades.

What’s good about these layer style settings is that it will look good on ANY font size, for example here we zoomed in using a font of nearly 700 pixel and you see all the curves, shades and gradients so neatly….

Here is our result! I hope you enjoyed the tutorial and if you decide to download the psd, please remember to click “return to merchant’s website” after you complete the transaction, so that the download will start instantly. Also, please join our Facebook page and subscribe free for future updates!

Before we switched to creating a Photoshop Tutorials blog, Lorelei Web Design was used as my portfolio website, where I frequently updated our readers with free wordpress themes and recently I got a few emails with people asking, what happened to these themes? Well, I guess it’s time to pamper the old readers a little and release a free wordpress design.

Our premium quality dark and mysterious design will be ideal for almost any kind of blog, from personal to business. Magic Tree wordpress theme contains no spammy links at the footer, moreover the footer is not encrypted so you can add and modify the layout as you like, though keeping the links to our website will be highly appreciated.  Fully SEO friendly code, nested comments, ready for Gravatars and widgets, custom inbuilt Admin panel for easy management of certain content on your blog. All this lays against a magical, dreamy and glow-rich design… Absolutely free to our blog readers!

• Live Preview | Free Download

License:  PHP, HTML  and CSS are distributed under the General Public License. Images are a copyright property of their respective creators. Enjoy the theme and please leave a comment if you have any questions or want to share the url you are using it at.

Share: If you would like to share this theme on your blog, please link to this post and don’t link directly to our download URL. Web hosting provided for this theme is a courtesy of WebHostingStar.us