Building Apps for mobile devices becomes crucial for online success as an increasing number of web users shift to mobile devices and as the usage stats of mobile users has already passed web usage by desktop and lap-top users in many countries.

The Ycademy May Seminar will focus on App Building namely on:

Two days are a short time to become familiar with programming language and developer kits. For this reason we will be using what we believe are the two most powerful App building software packs available for Windows to build and test our Apps.

Participants can test also some of the apps directly on their mobile device.

The seminar will take place on May 26 –27, 2012 from 1 p.m. till 9 p.m. London Time on each day.

Seminar tickets are available with the usual discounts; get your discount code from bianca(at)ycademy.com.

More details during our calls and mails from Bianca.

Click to Get your Ticket

Related posts:Ycademy Online Seminar January 2012Ycademy Online Seminar Apri 2012Ycademy Online Seminar December 12–13, 2009Ycademy Online Seminar March 2011Ycademy Online Seminar May 2011

Having set up our basic Child Theme structure we will now proceed with the customization. But before that we will do some basic WP configuration and go through the settings. You may be used to building WordPress based sites and therefore you may have some habits in as much as settings and configuration are concerned.

Semiomantics XO Custom Magazine for WordPress

Here is what I do in the dashboard:

1. Trash and permanently delete the Hello World Post.

2. Delete the default Links.

3. Set Permalinks to: /%category%/%postname%/

4. Under Settings General enter Blog Name and Tagline; for the purpose of this exercise I use  as a Title: WordPress TTP and as a Tagline: Tips, Themes and Plugins

5. Add some content to test content display by importing an RSS feed using a plugin such as Feedwordpress. I pulled into a new category called Blog the feed from my author-blog at:

http://yorgonestoridis.com/feed

We have set up a basic child theme for the purpose of modifying and customizing the Parent Theme. Creating structural modifications such as creating Custom Posts and Taxonomies are not strictly speaking theme relevant but should apply to all themes or as the case may be, to multiple themes in a Multi-user installation.

For this reason we will lodge the file which defines the custom posts outside any specific theme folder but inside wp-contents/themes.

We create a file called posttypes.php in wp-contents/themes. This file serves to define our custom post types and the way they integrate into the WP architecture.

In order to include the new Post Types in our Child theme, we include the posttype.php using an include function. This we doby adding a new file to our child theme; this file we call functions.php.

As you know, every WP theme contains a functions.php file; when creating a child theme which needs to expand the functions existing in the parent theme, then we just add a file with the same name, ‘functions.php’ to the child theme and append the functions defined in the parent theme.

Note: functions.php of the child theme does not override existing functions in the parent theme as is the case with styles (‘style.css)!

PHP allows us easily to include files in a script with the ‘include’ function and then by adding the URL to the file you wish to include.

Our ‘functions.php’ file will look as follows:

Please note that we use the ABSPATH function to construct the URL as the normal url path

does not work here.

Save functions.php into your Child Theme Folder.

In order to set up our post types we proceed step by step:

Custom Post Types allow to separate different content from the traditional blog content. Blog content usually is edited as Posts and Pages, whereas Pages (static content) can be organized in a hierarchical way and posts are sorted by categories and tags. In order to display static content (pages) using customized layout, we can create different page templates easily.

Custom Post Types allow to sort content by Posts and Custom Post Types whereas custom post types are similar to posts but using custom taxonomies and as the case may be custom layouts or design adapted to the content. A typical example is a single product page from a shop compared to a single post page on the blog section of the website.

For the purpose of our exercise we will create 3 Custom Post Types

Setting up post types is relatively easy; while we could use plugins to create custom post types, I think hard-coding is a more solid and professional way of creating them. To create a new Custom Post Type we just need to add a few lines of code to the functions file or in our case to the abstraction file at posttypes.php which will then be included int the functions.php as per above where we have added the include function into functions.php.

We will create now the 3 Custom Post Types whereas the code used for each of them is the same except for the post type names and the function names.

To create the first post type, edit posttypes.php and paste in:

Save the file.

At the top we type a comment explaining what the following code is all about (Add new Post Type for WP Tips). Then we call the function in to WordPress with ‘add_action’ and at the bottom we register the post type. As you can see the function consists of a number of arguments which we will look into later ($args).

Check out your Dashboard now and you will see that the new post type is added to the menu just above ‘Appearance’.

To add new post types, you just need to copy and paste the above code and make simple changes to the name and labels of the post type.

The above post types work, however they are not well refined. For this reason we will add some more variables. As the new posts are still called “Post” in the editor for example we will need to relabel to display the real name of the post type. For this we will write a label variable which can take an array of labels and we thus relabel all instances of our Custom Post Type.

The variable we create with the array of labels looks as follows:

We will insert this piece of code just before our block of arguments and then change the arguments accordingly as follows:

As you can see from the two commented lines, we have changed ‘label’ to ‘labels and defined with the variable from above ‘$wordpress_tips_labels’ and we have deleted the ‘singular label’ as it is replaced wby ‘singular name’ from the label variable.

For the other new post types it’s the same game, just copy and paste and change the labels accordingly.

Save posttypes.php and check it out in your dashboard.

You will now see all labels added and your site becomes a lot more user-friendly and less confusing.

We can define the functionalities of our new post types with an array under the variable ‘supports’; basically the ‘supports’ line defines which functionalities should be supported, i.e. which content should be displayed.

In our example, the line above looks like this:

When you go to your dashboard, and add a new WP Tip you will see the editor shows the ‘title’, ‘content’ and ‘comments’ fields.

While we can go crazy on adding supported functionality, we will here just look at some standard functionalities. To add more functionality we just need to append the array in the supports variable like so:

By adding the above functionalities to the supports variable, we get something pretty close to the standard post editor, since we add the author, excerpts and custom fields as well as the featured picture functionality.

Also we can add a new variable, such as ‘has archive’ and then name the archive, in our example ‘WordPress Tips’.

This archive variable allows us to create an index page just for the WP Tips post  types.

Our Code for the WP Tips Custom Post Type is as follows:

Copy and paste with the necessary changes for the other custom post types and save the file.

Check it out from the Dashboard Menu and the Editor.

As per now, our custom posts menu in the dashboard is positioned just above appearance and below comments. As custom posts are similar to posts, we want to move the custom post tabs just below the Posts tab.

As you can see from our code above, the menu position is set to ‘null’. The value ‘null’ makes that the custom post types are added at the bottom of the first section of the dashboard menu.

Depending of where you want to position your custom posts, you will need to change the value ‘null’ to another value according to the below reference scale:

0 — at the very top
5 — below Posts
10 — below Media
15 — below Links
20 — below Pages
25 — below comments
60 — below first separator
65 — below Plugins
70 — below Users
75 — below Tools
80 — below Settings
100 — below second separator

As we aim the spot below “Posts” we will use the value ‘5’, which will result in

If you want to set a particular order, you can also use 3 different numbers, like 4,5 and 6 respectively.

Do the modification inside the arguments of each post type and save.

By repositioning the custom post type menu items , we signal priority and importance.

Check it out from the dashboard and note that our custom posts are right below ‘Posts’ now.

In order to make our custom post types stick out from the menu and to add user-friendly visual identifiers, we replace the default icons with custom icons.

There are two sizes needed, 16px and 32 px for the menu and the page title area respectively.

I have created sample icons and psd files for your convenience: please download from HERE.

Decompress the downloaded rar file and copy the image folder into wp-contents/themes (as we had done with posttypes.php, as we want to make these images available to all themes.

To add these icons we introduce a new function to posttypes.php with a function batch including some css/html code for styling purposes:

Note the incomplete php delimiter at the end which is needed to switch back to php from css/html code.

At this stage, your posttypes.php looks as follows:

Check it out from your dashboard and you should see something similar to this:

Custom Post Types with Custom Icons

Related posts: How to build a Custom WordPress Site 2 How to build a custom WordPress Site Custom Widgets for WordPress WordPress 3.4 Beta Facebook Strategy with WordPress

Semiomantics XO for WordPress — Custom Magazine

Like on any live site, our test site on BitNami allows us to add themes either from the Dashboard (upload the theme’s zip file) or by pasting the theme into the themes folder in wp-contents.

Access your BitNami environment using Windows Explorer and surf to the themes folder. You will see the same folders and files structure under htdocs as you are used to when accessing your WordPress folder on a server using an FTP client.

Folders on BitNamy WP Stack

In order to add Themes, we just drop theme folders into the ‘themes’ folder as per above. As you can see, I have amongst others) added my Semiomantics XO (the ‘xo’ folder under themes). XO will serve as the parent theme of the new website. Instead however of customizing XO directly, I will create a child theme which will contain all modifications. The advantage is clear: when an update or upgrade of the theme becomes available, the parent theme can be updated without destroying the child and restarting the customization job from scratch.

A WordPress child theme consists first of all of a Folder to which we add a style-sheet.

This style-sheet contains a commented header which defines the parent theme folder as well as other optional data and it usually imports the parent theme’s style-sheet with a simple line of code (no need to copy paste the whole style-sheet). Also we will add a screenshot which will serve as a thumbnail in the Themes tab of our WP Dashboard.

Style-sheet for Child Theme

As you can see above, I am editing my files using the free PSPad which is handy to edit the various files we need to develop.

1. Add a new folder to the WP Themes folder under wp-contents/themes; name it as you like your theme to be named, in my case: yorgo12

2. Create a new file called style.css using your editor and save it into the new theme folder.

3. Edit the style.css file by adding a commented section defining:

You could add other data as some authors do, such as Author’s URI and more, but that’s not necessary.

NOTE: All the above information sits between comment tags (/*.….….*/)

Next, we import the style-sheet of the parent theme with the following line of code:

I have then added a comment to remind that you should not edit above unless you know what you do.

Your style.css file reads now similar to the following:

Save the file into the new Child Theme folder.

4. Add a Thumbnail

Usually the image represents a screenshot of the new site but it can also be a brand logo or any other image. Important: the image should be called ‘screenshot’ and be in png format to fit into WP. Use image size 300px x 225px for best display.

screenshot.png

Drop the image into the Child Theme folder.

Let’s now activate our new Child Theme from the WP Dashboard under Appearance/Themes.

What you will see is an out of the box XO when looking at the front-end of the site.

Having set the base for our custom development, we will start now to adapt the site to the needs of the hypothetical customer. Continue reading the next post.

Related posts:How to build a custom WordPress SiteSemiomantics XO Transparent WordPress DraftsHow to make WordPress Themes ResponsiveWordPress Themes and DevelopmentWordPress 3.4 Beta

And publishing regular original content is crucial for the success of an Author Blog.

If you look at my Author Blog, you find anything related to Art, Media Design, Website Development and Design, Photography, Nature and… of course South Africa. This is where my heart and focus are and this leaves me a lot of scope for things to investigate, research, be enthusiastic about and share in form of any kind of expression that’s possible online.

While many people believe they can get away in a ‘free’ way by just using their Facebook accounts to write and express themselves, they don’t operate from a position of freedom – like if they would be owning their own website or blog where they are in full control. Social Networks work for themselves and make and change the rules, they possess your content – be it written or in form of photos – and even sell you without your consent or vote nor giving you a fair share.

If a herd mentality is what you like, this will not bother you and you gladly pay the price.

If, however, you wish to be independent and build your own reputation online, based on your name, your talents and your services and/or products, there is no way around having your own personalized Author Blog or website.

Think about it and get started – for instance on a free WordPress Blog. If you want something more sophisticated, have a look at my SHOWCASE and – if and once you’re ready for your own driver’s seat online – let’s talk!

Lightroom Presets for Landscapes

Presets area handy start … to create your own presets, adapted to your needs, taste and the purpose of your visual communication.

Landscapes are just an example and if I just use here another mediocre picture from the cheap $50 cam, it’s to demonstrate that for the purpose of basic online publishing, most any lens will do.

Here some of the presets we will use at tonight’s call:

By the way: the above images can be better viewed in the Photo Ycademy Gallery: HERE

For the purpose of tonight’s workshop, here are some more presets you may want to grab:

[download_box]Download Lightroom Presets 2[/download_box]

Enjoy!

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.

Create your Photo Gallery

Nice, your work! What’s next? We need an attractive and accessible way to share our photo- or other graphic work.

Looking at Photo Galleries online, you will notice: most of them look alike with a typical flow from the thumbnail to a medium sized image (often not bigger than 500 pixels wide).

Lightroom lets you generate such galleries.

Ycademy Photo Gallery

The purpose of presenting Photos is to maximize the power of the image by allowing for optimized display on viewers monitors. In other words: think big!

Personally, I just cannot get a real kick out of thumbnails and the greedy presentation of great images in small size. Sure, if you want to sell your photos, you don’t just want to give them away by putting them up for grab on your site.

But then, you could do with the thumbnail or a watermarked version and show a full size, maximum quality excerpt of the picture by cutting out a captivating part of the pic.

genescreen1

Ycademy Gallery

The main format we have selected for the Ycademy Photo Gallery is based on the image height of 600 pixels. This will fit and look good on any current monitor size. The width is not important as the scrolling is horizontal. The human eye prefers to scroll or scan horizontally rather than vertically.

Looking at the above picture for the purpose of the blog: I use the “thumbnail” size of 480 wide and load the image with 1680 pixels width. The thumb looks somewhat cropped, while the magnifying glass presents the original size view with astonishing detail. When you click on the pic and it opens in overlay, it will then go as big as your browser or full size depending on how I embed it. As a visitor to the post, you get really quite some views for your money :-).

The image in the header of the post expands first to browser size and then to original size, even if that is larger than your screen (top right click). Smashing!

Back to the Ycademy Gallery: the Gallery is a great piece of script for visual presentation of most anything you can pack on to an image.

Have a look at it from HERE.

Limitations

For the time being we will only deliver the script to Ycademy Pros and Seminar Participants. The Commercial Version will be available shortly. The difference being: the educational script we deliver for your personal use can be branded and and configured without editing flash, which makes it comfortable to use, the content, editing and configuration cannot be protected and secured. It’s therefore definitely not something you want to give out of your hands.

If you purchase the script from the Semiomantics Shop, please contact Bianca after the purchase by mail for delivery: bianca (at) ycademy.com

PS: The above image can be viewed live on site HERE

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.

Based on the fact that surfers search for and prefer local business to cross border transactions, social networks namely have built in the local tags and stimulate users to hook media and events to geographically tagged locations.

In order to dominate the local market, you need to assess the use of the internet your neighbors make; chances are that they mostly hang out on social media, search Google and use email. This is of course an extremely simplified view but it gives an indication about where we need to build high visibility.

You also want to have an idea about how people access the net and websites; you will notice an increased use of mobile deices, which means that your content needs to be formatted and optimized  for desktops as well as for tablets and mobile phones.

Finally you may notice that surfers prefer visual content to text, which impacts on editing and publishing for multiple platforms.

In order to build high visibility on search returns, you need

To dominate social networks (Facebook, Google+, Twitter, LinkedIn) we need

To dominate the mobile web we need

The answer is similar to managing a business online. There are three main elements I like to focus on:

Just a few ideas:

I hope this post helps your brainstorming when creating your local project. I will publish shortly a detailed project for my demo community, Vouliagmeni.

Related posts:How to Optimize your Impact on Social and Mobile NetworksFacebook Strategy with WordPressGoogle Top 10 Dominate your Keyword 33 Web Design Trends in 2011New Facebook Pages Publishing Concept

Based on the fact that surfers search for and prefer local business to cross border transactions, social networks namely have built in the local tags and stimulate users to hook media and events to geographically tagged locations.

In order to dominate the local market, you need to assess the use of the internet your neighbors make; chances are that they mostly hang out on social media, search Google and use email. This is of course an extremely simplified view but it gives an indication about where we need to build high visibility.

You also want to have an idea about how people access the net and websites; you will notice an increased use of mobile deices, which means that your content needs to be formatted and optimized  for desktops as well as for tablets and mobile phones.

Finally you may notice that surfers prefer visual content to text, which impacts on editing and publishing for multiple platforms.

In order to build high visibility on search returns, you need

To dominate social networks (Facebook, Google+, Twitter, LinkedIn) we need

To dominate the mobile web we need

The answer is similar to managing a business online. There are three main elements I like to focus on:

Just a few ideas:

I hope this post helps your brainstorming when creating your local project. I will publish shortly a detailed project for my demo community, Vouliagmeni.

Related posts: How to Optimize your Impact on Social and Mobile Networks Facebook Strategy with WordPress Google Top 10 Dominate your Keyword 3 3 Web Design Trends in 2011 New Facebook Pages Publishing Concept

Ycademy Easter Contest

Editing xml text is not all that difficult … once you get used to the format. In Semiomantics Evolution you can edit straight HTML code into the text tags, which makes it a Sunday walk.

HTML editing

Ute Schaedler has used plain HTML to edit her about page:

ute

Using HTML allows you to embed … pictures … for example :-).

Play with transparencies

Your image and text backgrounds can be modified easily by adjusting the Alpha values to taste. The Alpha values concern transparency; setting Alpha to 100 means no transparency while the value 0 (zero) would mean full transparency or no visible background layer.

An example of 0 values: Click HERE

On the home page there is a suite of images on the right site which are set on a zero transparency layer.

ydesign

The same applies to the showroom: you may place transparent png files on a more or less transparent background.

Try and enjoy the results.

I am looking forward to tonight’s session at 8 pm London time.

PS: More smashing stuff is under construction!

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.

Implement your Flash Showcase

Once your script is cleaned out and reduced to what you actually need as described yesterday and as done at last night’s Ycademy call, we can implement our project.

Prepare your upload

Before uploading you may already edit the index.html file and add the title of your site as well as the font as the case may be.

Also you can edit style.css to define link colors and other details if needed.

You may also want to edit your site logo:

Ideally the logo file is a transparent PNG image which in this case can be rather wide since we have just a few menu items. The bottom border of the logo is in line with the bottom of the menu items; therefore it is indicated to use capitals for the site header and align them with the bottom of the PNG file.

Example:

logo

Semiomantics Header

For better visibility I have added a background layer on the above. The dimensions are 592 x 60 pixels.

Upload and start populating Semiomantics Evolution

Before uploading the evolution folder you may want to rename it to the folder name it should take on the server; if you upload the site to the domain root (public_html) then you just load the content of the evolution folder without the folder itself.

Once uploaded you may want to start adding a background image (photo of graphic); I have loaded just a background pattern:

screen2

Background

For this project I keep a uniform background throughout the whole site; however i would be nice as well to create a nice graphic grunge or photographic background.

Edit menu.xml

Edit menu.xml from your xml folder: define the menu item titles and backgrounds as well as the copyright notice in the footer.

Populate your image gallery (about)

I start now by adding images to my showroom. In fact I am using for this project a showroom gallery instead of the about page: I will oad there graphic images representing my bullet list and then add text to the image legends.

screen3

About Semiomantics

The images are created in photoshop in 2 versions: jpg and transparent png. I load both versions to select later the images to keep – may be a mix of jpg and png images. To create the images I just created two layer sizes: 400 x 600 px and 800 x 600 px. Important: the images must be 600 px high. I drop my messages into the pictures using some grungy Times font and using background colors based on my usual color scheme.

The idea here is to use a gallery to replace the About page by graphically representing the main message I want to deliver and allowing for more information attached to each image. (This way of proceeding is not in line with the terms of the contest!)

Populate your Showcase or Portfolio

For the show case I selected screen-shots of websites I have designed and built for Semiomantics. I have selected 30 screen-shots to see the effect and to measure loading time. I will trim this down later and make a representative selection out of the lot. There are also others I may want to add …:-).

screen4

Semiomantics Showcase

The screen-shots are mega sizes from 100 kb to over 400 kb, whereas they will be adjusted for faster loading. I am testing flash compression and loading them as swf files which is one of the advantages of this gallery script.

A legend will be associated with each screen-shot; each image is based on a Semiomantics script type or module and can therefore be linked to a category or product in the semiomantics shop.

My recommendation: try to keep the image size as compact as possible for fast loading: ideally below 100 kb per image.

More later.

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.

Build a Flash Showcase

Based on yesterday’s post with the terms of the contest, I will try to guide you step-by-step through a possible way of proceeding.

1. Organize your work

a. Copy your Semiomantics Evolution script into a new Folder on your Hard drive.

In my Case: I have a folder called Ycademy in My Documents, where I create a sub-folder Ycademy Collection. I Then copy the whole evolution folder into that new folder.

b. Clean out the Evolution folder by deleting all videos, images, thumbnails and sound files you don’t need for your new site. Take out namely all images and videos and your script will be 20 MB lighter to load.

screen1

Cleaned out Evolution

As you may not need all the sub-folders under your image folder, just delete whatever you don’t need; the same applies to video.

Now your folder should be just over 1 MB big and easy to load.

c. Load your evolution folder to your server.

2. Organize your Site

Decide on your Theme and Title

Organize the category content on your hard drive.

More later.

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.

Best Flash Website with Semiomantics Evolution

Subsequent to the Ycademy March Seminar, I would like to launch an Easter Contest for all Seminar participants.

Here is what we are looking for:

The best small flash site with Semiomantics Evolution

Based on the Seminar materials you are able to build a small and beautiful flash website using the Semiomantics Evolution Framework.

screen1a

Semiomantics Evolution Art

Theme

You are free to choose your topic.

Site Structure

Menu Items:

Home Page

About page

Showroom

Contact Form

External link to your blog, shop or other website.

DO NOT ADD ANY OTHER MENU ITEM OR SUB-MENU BUT YOU MUST POPULATE ALL OF THE ABOVE!

Media

You may use images, videos and sound as you like and within the above structure.

Number of images

The Gallery in the Showroom must feature between 8 and maximum 12 items (images or swf).

Tips

I will publish a step by step tutorial or sample on the Semiomantics Evolution Website.

Deadline

Thursday, April 1, 2010 at 8 pm London Time. (This is no 1st of April joke!)

Price

The winner: $50 in cash.

Good Luck!

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.

Essex -New Website with Semiomantics Evolution

The beauty of England and of Essex in particular will be featured on Zo Nicholas’ new website: My Essex. Zo is building the site during this week-end’s Ycademy Seminar where participants are focusing on building flash sites to showcase themes of their choice.

Essex Showcase by Zo Nicholas

Here a first screen shot of the site which will showcase the beauty of Essex:

zonicholas1

Essex by Zo Nicholas

I am looking forward to seeing more of what’s hiding behind the fog …:-).

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.

Ute Schaedler builds a Flower Site at the Ycademy Seminar

Building a flash website for the purpose of offering the ultimate surfing experience to visitors is the goal of this month’s Ycademy Seminar. Ute Schaedler is focusing on flowers, presenting spectacular views on spectacular backgrounds. A real pleasure to surf Ute’s Semiomantics Evolution Website already after 1 day of work:

Ute’s Semiomantics Evolution under Construction

uteschaedler2

Ute Schaedler's Flowers

uteschaedler1

Ute Schaedler's Showroom

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.

Resizing Pictures in Photoshop

For the purpose of the Seminar, we need to reduce the size of images for faster loading. One of the main issues is related to backgrounds.

Using a background photo can be a real challenge. Here below is an example.

Digital Photo resizing

To start with I choose a digital picture of (this is a mobile phone image and I have not modified it ).

astirbeach10

Astir Beach

The above image (for the purpose of this post) has been down-sized and re-sampled from 3072 px width to 1000 px and from a doc size of over 15 M to 1.6 M. It’s still heavy with 452 kb at 100% jpg.

Resizing in Photoshop

Download the image, decompress it and open it in Photoshop.

You see now an image of 3072 x 2304 px.

We have multiple ways to reduce the size and weight of the image. There are two aspects to resizing:

1. The resizing of the image (pixels)

and

2. the resizing of the document.

Our goal is to end up with a document of about 100 kb and a maximum of image quality.

Resizing the image means that we intervene on the number of pixels per square inch, resize the document means that we intervene on the dimensions of the image.

We aim to optimize the relation between the number of pixels per square inch and the size of the document to obtain the best possible full screen view in Semiomantics Evolution.

ps1

Image size

Modifying the Pixel Dimensions (tick: Resample Image) will lead to:

ps2

Resample Image

Note the resolution remains the same.

If I want to increase the resolution, I need to decrease the Document size, without resampling the image:

ps3

Increase Resolution

Compare the above with the first PS screen above: I have cut the Document size to 50% and kept the Pixel Dimensions: this doubles the Resolution (number of pixels per inch).

The above is the base to understanding Photoshop and the way Photoshop deals with images, whether we import them from a camera or produce them in Photoshop.

Back to our image: The image has 16:9 proportions.

The above demonstrates the example mentioned at yesterdays call about apple and strawberries: you can either fill an inch with fewer but bigger pixels or with more of them but smaller ones (resolution).

When resizing the above image, you will find that the quality finds it’s limits where the gradient of the blue color of the sky starts breaking. This has to do with the resolution.

Practically speaking for a quick result:

Save the original image for Web and Devices and push the Quality slider to the left till the gradient of the sky breaks (that’s just one tick too much). Then resize the image at bottom left by decreasing the width until the JPEG size is about 100 kb.

ps4

Save

You can see the final result on the site HERE.

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.

Build your Flash Website Step 3

Following some basic branding yesterday, and last night’s Ycademy call, the journey continues today with the choice of colors and fonts.

In order to choose a color scheme it is important to see how the site script will render fonts and how the various layers and overlays will deal with colors. This is true for plain colors as well as for photographs or other graphics.

Choose your Fonts

After yesterdays choice of CaviarDream, I have added today GeosansLight for headings and Helvetica as default font. If you have been present at last night’s call, you may remember the font exercise, where we were testing and appreciating different font combinations:

besmafont

Helvetica Font Match

caviargeo

Font Selection

Choose your Colors

This is a more delicate matter and I will just show here below some screen-shots of mainly plain color backgrounds to let you appreciate the difficulty to choose; in fact, the genius of the present frame and web design is in the fact that the layers and overlays of the frame adapt to most any color to compose a pleasant or smashing view.

screen4a

Black

screen5a

Mocca

screen6a

Blue

screen7a

Orange

screen8a

Red

screen9a

Green

screen10a

Photo

screen2a

Drawing Board

screen1a

White

screen3a

Blue 2

Please note: the above screen-shots represent only background changes, all overlays and other layers are left on default gray color as seen on the white page.

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.

Build your Flash Website Step 2

After yesterday’s definition of the project, we will move a step further today and implement basic customization. This series of posts is designed for participants of the upcoming Ycademy Seminar with the topic “Build your Flash Website”.

The Menu – the Site Structure

I have set up the menu and defined the structure on the new Semiomantics Evolution Framework:

menu

Semiomantics Evolution Menu

As you can see, there is some customization needed to fit my branding needs.

Basic Customization – Branding and Look

For the purpose of this demo, I will behave as would a newbie or a new customer who wants to set up an online presence with Semiomantics Evolution.

1. Define your brand: yorgo design

2. Get a domain: I just registered yorgodesign.com at yorgodom for $12.95 per year with lots of goodies included.

You don’t need a new domain; the Evolution site can be loaded to any existing domain and into any folder.

3. Get a web host: I just got unlimited hosting from ChiHosters for $35 per year.

You don’t need a new hosting account – see under 2 above.

4. I got my site script from Semiomantics (you will get it at the Seminar – it’s included in the ticket price as all the other materials you will need to build your site).

You do need a seminar ticket to get the site script and Semiomantics add-ons. I will load the script to the host.

5. I create my header and logo for the site: the header is no problem, the logo needs some thinking and testing. The header label will bear the logo and the name of the new flash website:

pslogo

Header Label

As you can see, there is a stack of 4 layers. For the site I will just use the transparent text layer and write in white using the font defined for my new brand “yorgo design”.

Label Size: 325 px x 75 px

Font: Caviar Dream.

You may create your label using my PSD; you may modify the width, however it is not recommended to increase the height. Change width from ‘Image – Canvas size’ in Photoshop.

Join tonight’s Ycademy call at 7 pm London time where we will create header labels step by step. If you don’t have Photoshop, we will do the label for you tonight at the session.

Footer: I will edit the footer to adapt it to my needs, Copyright notice, site name and eventual other notes.

See you when all the above is done – look out for step 3.

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.

Build your Flash Intro

The flash intro is designed to anticipate your home or product page for example. In the case of a blog, you may replace your home page with the flash intro.

Visitors reaching your blog via a search engine will still reach first the post they have been looking for. If however they click then on the home link, they get the intro first. and end up after that at the blog archive.

Flash Intro for Gene Line

The below Flash Intro has been built subsequent to last week’s Ycademy call.

geneintro

Gene Line Flash Intro

View the online version HERE

View full-screen HERE

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.

Define the Project

In view of the upcoming Ycademy Seminar, I will anticipate in a series of posts how participants can prepare the event and what they will get out of the Ycademy online seminar which will take place next week-end.

Before building my Flash Website, I define my project and prepare my infrastructure.

The Purpose of my Flash Website

The new flash site will focus on design and my activity in that field. I will replace my depreciated site at ZibogRoy.com which served as a showcase in the past and illustrated some of the work done in the past, namely in connection with YORGOO Press and YORGOO Tabloid a great seller. Zibog Roy gets some 250 clicks per day and is visited mainly by commercial prospects.

By the way: Zibog Roy is the inverse reading of Yorgo Biz and it’s therefore no wonder he is my preferred designer:-).

The new Flash site will focus on Design. Design will be subdivided into Graphic design, Web design and Media design to start with. The content will feature my work and services in the 3 mentioned fields and illustrate work done as well as serve as a show case, linked to a sales pipeline.

gene-bgr

Impossible Design

The Flash Website Framework

Semiomantics Evolution as provided to all seminar participants.

The site will be loaded to ZibogRoy.com root. It is compatible with the present WordPress powered Semiomantics Showcase script. The Blogs homepage will be replaced by the new Evolution site. Evolution will then profit from the Semiomantics script running in the background and allow for hooking the flash site to a Semiomantics SEO Power Engine at a later stage.

The Evolution site can be loaded anywhere and is easily transferable; the reason being: it does not need any MySQL database and the content is not domain specific as in WordPress. Therefore the site can be downloaded via FTP and uploaded anywhere else in minutes.

For the purpose of the construction I will build the site in a sub-folder of my main domain and then move it to Zibog Roy when it’s ready for public release.

The Main Categories

There will be the following main categories in the menu to start with:

• Home Page with an intro movie and a slider displaying images representing services.
• Graphic design Showcase with a presentation of specific products and descriptions.
• Web design Showcase with gallery
• Media design Showcase with galleries
• A Contact Page with the imprint
• External links to blog and shop

More as soon as the above is implemented.

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.

Build your Flash Intro

After the 3D logo session last Friday, we have another unique session in store: Build your Flash Intro tonight at Ycademy.

Join from yorGOtalk at 7 pm London time (GMT).

Flash Intro

A flash Intro can be used in multiple ways, one of them being product marketing. Also, the format of the media is swf and can therefore easily be embedded into the flash website we are building at the March Online Seminar.

Have a look at a DEMO FLASH HERE.

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.