Global Sports US New Headers

Global’s new site will get new headers, based on pictures from London. Here below some samples. The study is about selecting the captivating frame and to add a simple Global logo to it in the top left corner.

Global Headers

bg301

Global Sports US Header 1

bg301a

Global Sports US Header 2

bg302a

Global Sports US Header 3

bg303

Global Sports US Header 4

bg302b

Global Sports US Header 5

At present we play with a hovering header background picture. To display more pictures a rotator can be built into the script signed Semiomantics.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Transparent Backgrounds

Transparent backgrounds are no common feature in Blogs or Websites and there is a reason for it: they can become too dominant and therefore distract the attention from what we wish to focus our readers on: our Content.

And of course not everybody has the brilliant Semiomantics XO Scripts as well as the Training Crash Courses by Yorgo Nestoridis to play chess on CSS stylesheets :)

Transparent Backgrounds

1. The Visual Aspect

The first rule for creating a transparent background is therefore to design something attractive yet discrete, meaning it integrates harmoniously with our theme, colour scheme, fonts and the overall purpose of the Blog.

In my ‘Design Sandbox Blog” experiment here I basically recall the theme I already used in my Header Graphic.

This black and white header graphic was based on a detail of an artistic interpretation of a photo I took on Noordhoek Beach – you can recall it HERE. I agree, it’s hard to imagine how I got from one to the other, right? It’s still all I did and how I work in general: creating my own pictures and working with them in an intuitive and imaginative way.

Although I always try to keep it simple and sober for maximum focus on what counts most: the Author’s message, content or whatever he wants to bring across, I find the transparent background very pleasant if compared with the sort of solid version I added above for you to see and compare – what do you think?

2.  Speed and Usability

The other aspect we need to bear in mind is that our page opens fast… especially as everything on the Internet is about Speed and Usability. We may have the most beautiful photo or picture that even suits perfectly as a background for our Blog… however, it’s heavy and takes ages to open.

This is why our Ycademy Training yesterday was so important as it taught all participants how to decrease the weight of background pictures to a maximum.

Transparent Backgrounds or not. . . the same rules apply.

With my example here I made a whole series of tests in Photoshop to find what suits me best. Especially, I decreased the opacity in 20% increments until I reached 20%. The current value is 34.36K and 13 seconds – not bad!

The header graphic is heavier… however, here the enphasis is on high quality as this is what jumps in the eyes first. So it’s always a weighing and compromising a little here or there, however, the better we are in control of our tools the easier it becomes and the better the results – both for the Visitor and for Google.

Happy Experimenting. . .  with Semiomantics XO Scripts, what else !

. . .

Read more…

• Circle Experiments 1
• Creating your own Signature
• Header Graphics
• Colour
• Graphic Design

Having created quite a plain header graphic for this blog I decided to try and create different versions of the same using a free image and photo editing software. 

Header Graphics for Web Design

There are many free image editors on the net. The two I like to work with are Gimp and Paint.Net. Both of these are good for computers that run  Windows.

Here is the image I started with:

Web Design Header Graphic

I opened this image in Paint.Net and used the Effects to change the look of the header. As you can see from the results below, you can create something quite unique.

Web Design Header Graphic

and yet another example:

Web Design Header Graphic

Just give it a go, it’s all about fun!

A header graphics can be as simple or complex as you desire them to be. They are the first thing a reader sees when opening your site. A header needs to be striking and memorable and yet not distracting.

Web Design Header Graphic

For this site I have continued the theme as used in my other sites and kept the header graphic plain and simple by using a striking free font. There are many fonts freely available online that will distinguish your site fom the usual microsoft default fonts.

Once you have decided on a font to use you can create a header graphic using a free image editor. The font I have selected is the  Sebastion Font. Using the editor select the size of graphic you require and use the font for the text. Save and upload the file to the image folder 0n your site.

Web Design Header Graphic.

Web Design Header Graphic

Of course you can be as creative as you like, see the examples below:

Graphic header by Ute Schaedler.

Header Graphic by Ute Schaedler

Graphic header by Larrie Perkins.

Graphic Header by Larrie Perkins

Developing a transparent WordPress Based Photo Blog, I got inspired to use some elements in a Grunge environment. It’s creative, it’s fun, it’s the Semiomantics XO Theme for WordPress.

Grunge Background

The first step is to create a grunge background:

Grunge Background for WP

This background is 1680 x 1250 pixels big and has a weight of 130 kb only.

Transparent Header Footer and Content Backgrounds

Step 2: make your backgrounds transparent and set opacity to 70 %.

Fancy Fonts

Add some fancy fonts for h1 and h2 using the Fontburner plugin.

Fancy Fonts for h1 and h2

Background Opacity and Hover Function

It is not easy to read content on colored backgrounds, therefore we add a hover function to show white backgrounds on left content and sidebar.

Save load by Scrolling over the Background

No vertical tiling is needed, also on long blog posts when the content scrolls over the background. We fix the background attachment (background image).

Header Transparency and Site Title

To get the header effect I have loaded a transparent header png with no content and added a top margin to adjust the position of the content.

The blog title is painted on the background with position top left to allow display on any monitor irrespective of resolution and size.

Transparency Variations

Your creativity is the limit. You could create an overlay look by adding a black background with 80% opacity:

Transparent Overlay Hover

Try and enjoy!

Developing a transparent WordPress Based Photo Blog, I got inspired to use some elements in a Grunge environment. It’s creative, it’s fun, it’s the Semiomantics XO Theme for WordPress.

Grunge Background

The first step is to create a grunge background:

Grunge Background for WP

This background is 1680 x 1250 pixels big and has a weight of 130 kb only.

Transparent Header Footer and Content Backgrounds

Step 2: make your backgrounds transparent and set opacity to 70 %.

Fancy Fonts

Add some fancy fonts for h1 and h2 using the Fontburner plugin.

Background Opacity and Hover Function

It is not easy to read content on colored backgrounds, therefore we add a hover function to show white backgrounds on left content and sidebar.

Save load by Scrolling over the Background

No vertical tiling is needed, also on long blog posts when the content scrolls over the background. We fix the background attachment (background image).

Header Transparency and Site Title

To get the header effect I have loaded a transparent header png with no content and added a top margin to adjust the position of the content.

The blog title is painted on the background with position top left to allow display on any monitor irrespective of resolution and size.

Transparency Variations

Your creativity is the  limit. You could create an overlay look by adding a black background with 80% opacity:

Try and enjoy!

To give some ideas for fancy fonts headers I have prepared some files you may download and use as the case may be. They consist of a 1024 x 200 pixels Photoshop file (which can be edited in GIMP as well). Please download and install the fonts before editing.

1. Fancy Header Fonts

Some Fancy Fonts including Cats Alphabet, Zebra, Lost World, Amadeus, download HERE.

Unzip and place the .ttf files in Windows/Fonts on your main hard drive (C usually).

Fancy Header Fonts

2. Samples of Fancy Font Headers

Some applications with the above fonts.

[Show as slideshow]

3. Ute Schaedler Special Fitness Font

I have the sneaky suspicion that these fonts, at least some letters could also interest Gene Line .

4.  Download Photoshop Header Files

The PSD files can be downloaded from HERE.

Unzip and open with Photoshop or GIMP.

The site header is an important branding element. Logo, font and colors, eventually other visual elements are used to build a positive, recognizable image.

Yorgo Nestoridis Brand

A name can be a brand and if Yorgo Nestoridis wants to be a brand label, then that brand needs to be defined. What is Yorgo Nestoridis? It’s a person, a story, a product, a way to do things, a mission, a quality or an identification tag for all the aforesaid.

In this case, Yorgo Nestoridis stands for the human element behind product labels such as Semiomantics, YORGOO or related products.

Yorgo Nestoridis Logo

The brand elements are a logo in form of a picture or it’s derivatives:

Yorgo Nestoridis

Yorgo Nestoridis Brand Logo

[Show as slideshow]

Yorgo Nestoridis Font

The handwriting font is Dali for the signature and eventual other use at least for the time being; an original font is under construction.

Yorgo Nestoridis Color Scheme

Basically the web site color scheme is white to black with gray shades in between. Color accents are set with red #B30000 or blue #0000b3, black color can be replaced by black-blue #000125.

Yorgo Nestoridis black-blue color and red #b30000

The example for the Design web site does not use the Dali font as another handwriting font has been used for the site name (Art Decor).The name “by Yorgo Nestoridis” is in Tall Film.

Other schemes namely used for some products are the black-beige theme as seen here:

Yorgo Nestoridis black-beige color scheme

Beige color is #DECFAB.

This header can be created easily with simple means using GIMP, Photoshop or even Web Graphics Creator.

The site header is an important branding element. Logo, font and colors, eventually other visual elements are used to build a positive, recognizable image.

Yorgo Nestoridis Brand

A name can be a brand and if Yorgo Nestoridis wants to be a brand label, then that brand needs to be defined. What is Yorgo Nestoridis? It’s a person, a story, a product, a way to do things, a mission, a quality or an identification tag for all the aforesaid.

In this case, Yorgo Nestoridis stands for the human element behind product labels such as Semiomantics, YORGOO or related products.

Yorgo Nestoridis Logo

The brand elements are a logo in form of a picture or it’s derivatives:

Yorgo Nestoridis

Yorgo Nestoridis Brand Logo

[Show as slideshow]

Yorgo Nestoridis Font

The handwriting font is Dali for the signature and eventual other use at least for the time being; an original font is under construction.

Yorgo Nestoridis Color Scheme

Basically the web site color scheme is white to black with gray shades in between. Color accents are set with red #B30000 or blue #0000b3, black color can be replaced by black-blue #000125.

Yorgo Nestoridis black-blue color and red #b30000

The example for the Design web site does not use the Dali font as another handwriting font has been used for the site name (Art Decor).The name “by Yorgo Nestoridis” is in Tall Film.

Other schemes namely used for some products are the black-beige theme as seen here:

Yorgo Nestoridis black-beige color scheme

Beige color is #DECFAB.

This header can be created easily with simple means using GIMP, Photoshop or even Web Graphics Creator.

Online Advertising with YORGOO Booster makes of every web master an Advertising Virtuoso. Content served in the High Performance Semiomantics Script and enriched with unlimited advertising features result in the most explosive mix ever driven to the top of google.

Best of it: the site is largely automated as it has been designed as a “Set and Forget” Publishing Platform.

When years ago web designers were kings, most site templates featured large header graphics, between 100 and 250 or more pixels high where the designers had a playground to exhibit their skills.

Today this is considered as valuable space which is used for branding and commercial purposes. Some standards have emerged, such as the small half size header banners and the 728 x 90 banner which typically is placed on top of the site.

Another standard for advertising consists in showing first an advertising page before redirecting to the addressed URL.

YORGOO Booster allows the web master to load header images in any size and to associate a link to each image. The header image can thus be used similar to a traditional site header linking to the home page or it can be used for commercial purposes putting on display a more or less large image linking to any target.

According to the YORGOO Booster strategy, the header should be between 930 and 970 pixels wide and between 500 and 700 pixels high with the goal to occupy maximum space on the visitors screen. The header bears the most important commercial message and it is the webmaster’s goal to convert as many visitors as possible from the header ad.

Images can replace a thousand words, namely if they are captivating. Large captivating images definitely have mega impact. The disadvantage of such images is their size: a good quality image will always be heavier than just some text lines or a small banner. It is therefore important to edit images with care and if possible with a minimum number of layers.

While the YORGOO Booster allows for loading any number of header images which show randomly or which can be allocated to particular posts or pages, the script does not allow for loading sliced images.

The image formats accepted by YORGOO Booster are: .jpg, .jpeg, .gif, .png, .swf

To get the best impact, it is important to name and tag the images properly.

Flash files, or .swf files are an interesting option, the more that flash content will not deviate the search spiders’ attention.

Example:

top10

Camtasia or similar can be used to produce such flash files if Adobe Flash is not available.

The default header ad on YORGOO Booster is the first impression the visitor gets from the site. A captivating header of good quality can become your best feature for conversion on your site!

Considering the above, imagine the power of the Header Ad: YORGOO Booster is designed to grab Google Top 10 positions. A visitor finding your Booster under a targeted keyword, will be exposed to the header ad which must be keyword related to create immediately the empathy necessary for a high conversion rate.

Check out our Editorials about Online Advertising.

Related posts:

1. Online Advertising 2
2. Online Advertising 4
3. Online Advertising
4. Online Advertising Fun
5. Online Advertising with Evian Baby Clip

New Look with Semiomantics Thesis

A new look with Semiomantics Thesis – that’s just one of the amazing results after the past weekend’s Ycademy Seminar October 2010 – with a focus on upgrading our brains and out Semiomantics Author Blogs with the latest cutting-edge technology – the best of WordPress Thesis combined with the best of Semiomantics XO!

New Look with Semiomantics Thesis

The New Look with Semiomantics Thesis is largely created through a series of ‘hooks’ to which we can hook what today’s and tomorrow’s Internet consumers request: basically media content containers, be it widgets, rotators or banners etc.

Bearing in mind that our website or blog occupies what can be called the most precious ‘real estate’ online, the new technology offers us ways to captivate readers and potential customers with more attention-grabbing possibilities.

This can be seen from our point-of-view in terms of Website Development, however, as many bloggers don’t want to be bothered with anything ‘technical’, we can now offer ways where our customers simply focus on what they know best: blogging about their products and selling them. This is a huge step forward that must be welcomed by many who wish to have a blog and they like the idea of blogging – but bringing in images and media content is not their thing. This we can solve easily for them as Semiomantics Web Design experts!

Header Banner Rotator in Thesis

While all this sounds easy – there is tremendous learning to be done first as this new development requires a different approach and way of thinking.

What I have been focusing on today is inserting rotating pictures into my MultiMedia Box and creating a header banner rotator in Thesis based on excellent tutorials offered HERE.

While I do have a problem with my menu that doesn’t display what I want… yet… the rest went absolutely spot-on and smoothly! Let’s see where tonight’s Training will take us!

To be continued. . .

Author: Bianca Gubalke, Art, Media, Publishing. Co-Founder of YORGOO, YCADEMY and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Read more...

• Best Look Web Design
• Best Look Web Design on Facebook
• Semiomantics Web Design
• Customized Facebook Websites
• Font Study 3 for my Noordhoek Project

Header Web Design for Thesis

When setting up a new website or blog and deciding on its look, we have to find a visual flow between its main parts within the wrapper: the header, the content area and the footer – always remembering that this is the framework for our future contents, meaning, that what needs to stand out will be our articles and posts: text and images or media.

As all Semiomantics Author owners will be setting up their brand-new WordPress Thesis Semiomantics Blogs at the Ycademy Seminar this coming weekend, it’s good to reflect on this issue – and nothing easier than to start with some Header Web Design for Thesis. The width is 960 pixels and the height is up to your own preference – 100, 120 or more pixels.

Best Header Web Design for WordPress Thesis

Of course, there is sort of an ‘automatic’ header on the Thesis (WordPress) Script crafted by Semiomantics  – however, why not give your imagination some wings and develop the Best Header Web Design for WordPress Thesis you can come up with for your Author Blog?

How to find the best Look for your Header Design

The way how to find the best look for your header design is by firstly creating one header you are quite happy with in Photoshop and then loading it up under Theme > Header Image in your Dashboard.

It’s very user-friendly: you just browse to where you saved it in your Author Blog Folder under ‘header’ (ideally) on your harddrive… then refresh your web page… and you will see the result.

As you are at it in Photoshop, make some different versions, playing with the colors and fonts within your harmonic range. Once you have another version, load it up. The first shot is by far not always the best we can come up with; so it’s a matter of taking the time for some experimenting and then comparing the results on the website or blog and establishing what we prefer.

Having several versions also allows us to change the look of our Blog from time to time – not a bad idea to have some diversity while remaining truthful to our style.

As you see, I did exactly that in the above examples – and time-permitting I will do more. It’s so simple and user-friendly in Thesis – just find ‘your way’ using your colors, fonts and pictures. I am so pleased with the professional photos that just seem to ‘happen’ now – finally! – and that will help everybody with their professional online look! More on that soon…

Ycademy Seminar

While access to the new WordPress Thesis Semiomantics Blogs is only possible as of tomorrow at the Ycademy Seminar as it needs tremendous handwork to set each Author Blog up, the above is a good tip for you to prepare your header and have it ready when you need it.

And as always: enjoy the journey… it’s a constant process that keepw us growing!

Author: Bianca Gubalke, Art, Media, Publishing. Co-Founder of YORGOO, YCADEMY and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Read more...

• World Expo 2010 Shanghai
• Documentation on Semiomantics Evolution
• The Semiomantics Evolution Blues
• Performance
• We Are The Semiomantics World

Semiomantics XO Flash Header Accordion

Based on the recent May Seminar, Semiomantics has created a special header for Semiomantics XO featuring a bold accordion which comes in two styles.

Flash Accordion for Semiomantics XO style 1

accordion1

Semiomantics Flash Header Accordion

The Accordion holds 6 images which can be linked to any URL. The tabs are dimmed except when activated by hovering or clicking; then the image opens and lightens up. A previousely displaied image would at this point dim down to dark gray.

All colors and effects can be configured.The bold style typical for yorgo design can of course be changed to your likes.

Flash Accordion for Semiomantics XO style 2

The second version offers a decorative preview depending of course on the images loaded:

accordion2

Flash Accordion for Semiomantics XO style 2

When hovering the previews close and the very bold titles remain visible while the selected image opens:

accordion3

Flash Accordion for Semiomantics XO style 2a

The accordion holds images or videos (swf).

A live example is running on the Evolution site.

The XO Accordion header will be available shortly.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.