Build your Flash Website

Build your Flash Website at the March Online Seminar by Ycademy and get prepared for a smashing wow effect. In a small series of posts I will provide information about the content needed at the Seminar.

Background Images

To build a great looking flash site, we need great images, namely for the backgrounds. Every tab in the menu can trigger its own background for the target page. The choice of pictures will depend on the theme of the site; your imagination is the limit.

The background acts like the setting or the stage for your content. It could be nature, places, spaces, most anything.

Some examples:

Meet me at the beach

evo109

Meet me at the Beach

Meet me in front of the church

eglise1

Meet me in front of the Church

Meet me at the Ouzo Place

ouzo

Meet me at the Ouzo Place

Background Dimensions

Semiomantics Evolution will give the best surfing experience in full-screen view. The background image will therefore follow the size of the screen and its resolution and we need to load rather large pictures.

The above images come straight out of the digital camera or mobile phone. The raw file is over 3000 pixels wide. I have reduced them to about 1700 pixels wide and decreased the output quality to end up with background images of about 1700 x 1275 pixels and a weight of below 100 kb.

The above backgrounds can be seen at the Evolution Site HERE.

How to format background images as per above?

We will show step by step how to deal with a large image in order to format it for the purpose of the Evolution site at tonight’s call at yorGOtalk.

See you there.

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.

The new Semiomantics EVO 2012

The new Semiomantics EVO 2012 was the sparkly topic of this month’s Ycademy Seminar 2012… and as always, the complex theme could not be covered over the expanse of a weekend, it’s as usual a work-in-progress situation, a process with continued learning, implementing and – most importantly – experimenting and observing… until finding one’s personal preferences, direction and style.

The new Semiomantics EVO 2012

For those like me who love the ‘old’ flash version of Evolution, the new Semiomantics EVO 2012 offers some of the features we were so fond of – yet, it’s something totally different and independent as well. Instead of the fluid flow from left to right that gave the impression of a generous and easily directable movement, we now seem to build into depth, layer by layer. We’ve got to think “mobile”.

Due to the sad fact that our beautiful EVO sites do not show on the mobile web as Apple is not displaying Flash, this new Semiomantics EVO Developer Theme overcomes the problem with pure genius by making use of HTML5, CSS3 and Java instead of Action driven Flash.

Besides, the new Semiomantics EVO 2012 is now pow­ered by WordPress and while it features amazing possiblities for digital photography, video, graphics and all kinds of media design, it also includes a dynamic blog – which means it’s Google efficient!

Best WP Theme for Photographers

With this, I would say we have the best WP Theme for Photographers!

While we all want to choose according to our taste, priorities and objectives – the new Semiomantics EVO 2012 features 6 different gallery types alone, which can be displayed in many different ways with unlimited numbers of photos. The EXIF and location data can also be displayed…. not to speak of a high resolution background slider that displays beautifully – with or without protective overlays and textures that protect original photographic work – yes, even that was thought of!

Actually, it’s astonishing how many choices we have – and for those who have something to sell: the script is ready for eCommerce! We see the smooth integration of an elegant, user-friendly and – as it seems – easy to manage shop.

The screenshot above shows my first steps in setting up my Black & White Photography category featuring some of my images. It looks promising – doesn’t it?!

More to follow…

Daily Online Training Call

Tuesday 6th October

Creating a Static Background on a blog

A whole training call focused on resizing a large background image in order to use it as a static background on a blog. An image was provided for this purpose, a photo of the ‘Marble Stadium in Athens’.

Training Call Workshop

The workshop gave the participants the opportunity to put into practice the instruction on resizing the image and also work with the stylesheet to make the neccessary changes to obtain a result.

Once the concept is understood then any image can be utilised as a static background, as in this example below of a grunge background incorporated in Yorgo’s design blog.

Grunge Background

An example below of the ‘Marble Stadium, Athens’ photo used as a background on the Web Design blog during a training call.

Static background image

As the reader scrolls down the page, the background image remains firmly in place on the screen.

For recordings of the training:

Daily Online Training call recording

For more information about the Daily Online Training calls click here.

Read more..

• Latest news for all YORGOO members
• Web graphics for beginners 2
• Surfing for credits
• Home Based Business: the learning curve
• Web Style Sheets
• Blogging fun
• Developing a home business
• Trafficbunnies Bonanza
• Goodbye Michael….
• YORGOOpress newspaper project update

Web Design Workshop 17 – Resizing Large Background Image

Web Design Workshop 17 follows Workshop 16 where we discussed scrolling content over fixed backgrounds. Using large images and pictures as backgrounds, we need to pay particular attention to the concerned file size.

Large Background Image Marble Stadium

For the purpose of this exercise let’s use a photograph of the Marble Stadium which has been constructed for the 1896 Olympics in Athens.

Marble Stadium Athens

The original file is quite large with 2048 x 1536 pixels. This is the dimension we want to load to the Semiomantics XO as background image to allow visitors using resolutions up to 2048 to have a background in one piece.

A picture of this dimension comes usually with 3.5 to 4.5 MB from the camera to the computer.

Download Background Image

Download the image HERE. It is already reduced to about 800 KB, which is still much too big to serve as a background.

Save to disk and decompress the file.

Edit the image in Gimp or Photoshop

First let’s give it a long shut and save with 20% quality settings, and all other parameters optimized for smallest file output:

Gimp Settings

With Photoshop you get a similar result:

Photoshop Settings

With both above settings you end up with a weight of about 105 KB.

Compare the details:

Sample from 800 KB picture:

Sample Marble Stadium

Sample from 105 KB Image:

Sample 1 Marble Stadium

How about reducing further? Yes, we can!

Use a blur filter such as Gauss set to 2.5 and you end up with 62 KB only; see the detail:

Gaussian Blur

Of course this blur and reduction of quality may be extreme; however a blur factor of 0.5 to 1.00 could make sense as blur optically sends the background back and helps to put more emphasis on the foreground (your content) provided your content images are sharp …:-).

Example: Blur 2.0 but 30% quality output:

30 pct with 2.0 Blur

Wow, this his is a lean 79 KB! Click a few times on the pic till you get full size.

Apply the Background to the Site

Let’s load the image to our image folder in the Semiomantics XO theme folder and adapt the style sheet.

My image is called marble1300.jpg and I want it to be fixed so that the content can scroll over it:

body {
background: #000000 url(images/marble1300.jpg) repeat-x;
background-attachment: fixed;
margin: 0 auto;
font-size: 14px;
padding: 0;
}

This is what I get on my 1680 x 1050 resolution monitor (click to view in overlay):

As I would like to see more of the stadium and place my site “into” the stadium, I cut off 250 pixels about from the top of the image whic reduces the image size by a few pixels and I reload it to get my final result:

Background Image size 2048 x 1300 pixels and 76.1 KB, that’s over 10 times lighter than the original.

Have a look at the site for as long as these background settings are loaded HERE.

Ycademy Web Design Workshop

Join tonight’s Ycademy Web Design Workshop for your customized implementation.

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.

Read also:

• Web Design Workshop 16 – Scroll over Background
• Web Design Title Fonts
• Web Design Backgrounds
• Web Design Training
• Transparent WordPress Theme Design

How to let your Content Scroll over the Background

Scr5olling over a background image may save resources, namely if you use a large background picture. Also it gives you more control over the way your blog displays on different monitors and with different resolution settings.

On my design blog you see an example.

Transparent WordPress scrolls over Background

Background CSS

CSS lets any element have a background image and or color. Using the appropriate standard properties, you are in control of the background.

Our Web design Workshops 6 and 11 have already developed the topic.

CSS Background Properties

CSS goes beyond the background atributes of HTML.

The CSS Background Properties are:

• background-image
• background-attachment
• background-repeat
• background-position
• background
• background-color

Background Attachment

In order to control scrolling or not scrolling over the background we need to define the background attachment.

The background-attachment property can take two values: scroll or fixed. The default value is “scroll” meaning that the background scrolls with the content.

If we want to obtain a static background and scroll content dynamically over that background, then we use the value “fixed”.

CSS Fixed Background Example with Semiomantics XO

On the mentioned Design Blog, the body background style is defined as follows:

body {
background: #fff2d4 url(images/wall1680c.jpg) repeat-x;
background-attachment: fixed;
margin: 0 auto;
padding: 0;
font-size: 14px;
color: #000125;
}


We are interested in the following two lines:

background: #fff2d4 url(images/wall1680c.jpg) repeat-x ;
background-attachment: fixed;

As you see the background color is defined with a color and an image (the color may load faster). The image has a width of 1680 pixels. We tile the image horizontally for the case that visitors may use larger resolutions than 1680 pixels wide. Vertical tiling is not really required as we scroll over the background. (Of course some visitors with a mega screen may have a vertical resolution bigger than the 1250 pixels of the image, but the bottom of the image fades into white).

The second line defines the background attachment: here we use fixed.

Now our page content scrolls over the background.

Note: Make sure your background image is not too heavy! On the Design Blog I have reduced 4.5 MB to 130 KB which is still big but it opens fast enough with most visitor’s ADSL line.

Web Design Workshop by Ycademy

Join tonight’s Ycademy Web Design Workshop16 at 8 pm GMT (London) where we will step by step apply the above. We will resize an image for the purpose of the background and then edit the style sheet to implement the fixed background effect.

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.

Read also:

• Web Design Workshop 17 Resizing Large Background Image
• Web Design Training
• Google Top 10 in 5 Minutes
• Transparent WordPress Theme Design
• Transparent WordPress Semiomantics XO

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!

While I prefer to keep my backgrounds white, I have added a background to this site for the purpose of the Web design Workshop.

The Background needs to be in harmony with the color scheme which is based on black-blue #000125 and red #B3000.

Background based on an image

This is what I did:

1. Take a photo and transform it to gray scale.

2. Work it to establish a pattern:

Background pattern

3. Make a tile out of it so that the borders match:

Background Tile

4. Add a Color overlay in Blue #000125 with 45% opacity.

Black-blue Tile

5. Insert to your site using the style sheet:

Design Background

Colour White

In the western culture white symbolises cleanliness, innocence, purity and peace.  White is associated with brides, christenings babies and the dove of peace. In the eastern cultures white is used for funerals and mourning.

White is for…

After a long day white is for peace

As white is a cool colour it also signifies calmness, thus often used as a website background in web design. It also contrasts well with dark colours like black and dark reds.

Read more..

• Web Style Sheets 2
• Web Style Sheets

Dali Transformation Tiles

This is just for fun, but a nice way to create never seen before designs:

The technique used is just based on splitting and mirroring an image. I will use a design from Bianca Gubalke. I am sure good old Salvador would have loved this and he would have added some distortions…:-).

Dali:

Dali by Bianca Gubalke

Dali Transformation 1:

Dali 3 segments and mirror

Dali Transformation 2:

Dali 8 Segments

Dali Transformation 3:

Dali 16 segments and rotation

Dali Transformation 4:

Dali zoom in

Dali Transformation 5:

Dali zoom out

Dali Transformation 6:

Dali filter

Dali Transformation 7:

Dali tiled

More about this Topic

• Miss Garden Route 2009 in Web Design
• Corvette for Sale storms Google
• Gene Line Grunge Background
• Web Design Handwriting Fonts
• Web Design Elegant Fonts

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.

Corvette for Sale storms Google

I fear by tonight that vette will be gone …! Check it out HERE. Google cannot get enough of it and Larrie’s Phone is busy.

Click the pic  to see the most recent detail.

Corvette for Sale

More about this Topic

• Corvette 79 for Sale
• Corvette 79 for Sale in USA
• Web Design Workshop Navigation
• Corvette 79 for Sale – Today Only
• Grunge Brushes

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.

Gene Line Grunge Background

A background which could be used for a grunge styled site… :0.

More about this Topic

• Corvette for Sale storms Google
• Web Design Workshop Navigation
• Corvette 79 for Sale in USA
• Corvette 79 for Sale
• Web Design Handwriting Fonts

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.

Grunge Textures Old Paper

An easy way to start your grunge design is to load an old paper background (texture). Here are 5 old paper backgrounds which can be used to start your chef d’oeuvre. We will use them in our Web design Workshop.

[Show as slideshow]

The 16 MB Download is available from HERE.Please download before this week’s Ycademy Seminar.

More about this Topic

• Grunge Backgrounds
• Grunge Brushes
• Corvette for Sale storms Google
• Corvette 79 for Sale Grunge
• Web Design Backgrounds

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.