Experimenting with Photoshop Filters

While there’s nothing better than a good picture or photo to start out with, we should regularly be experimenting with Photoshop Filters and Tools to know what they do and to see the effects we can achieve. It’s just like playing the piano every day… so here’s my original lavender and acacia photo with just a little reflecting frame added as I like to do :)

Experimenting with Photoshop Filters

When experimenting with Photoshop Filters and observing sometimes astonishing results, we do this for the following objectives:

1. To understand what these filters can do.

2. To know which effects can be achieved how, meaning to learn Experimenting with Photoshop Filters.

3. To be able to apply the desired effects if and when we need them.

4. To possibly find a style we like and build our visual reputation and recognition value on.

We can either change a picture very clearly and openly into something different, abstract and possibly more interesting than what we started off with – or we apply a certain effect in a very reduced and subtle way to enhance our photo, giving it a touch that just makes it different and stand out from the rest.

A number of these effects remind me of some big Masters in Art History… it’s sometimes what they built their whole oeuvre on: a specific effect. What was unique and hard labour at the time, can now be achieved with our brilliant tools in Photoshop and/or other programs, some of them developed for imitating certain masters, think of Pissaro with all those little ‘dots’ or Andy Warhol – to name a more modern one.

Lavender and Acacia Photo

For today’s exercise, I selected a lavender and acacia photo I shot a few weeks ago when both were in full flower in my garden in Noordhoek, South Africa. As I was born in Namibia, I love acacias… and I love to combine them with palms, which always reminds me of ‘home’. The fragrance of lavender and acacia combined is incredible… no wonder all the bees of the area hang out in my garden and have a feast!

And here a very reduced and delicate one… one of my favorites…

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.

If you also re-style the mask, you could get some interesting effects:

• sprite menu wordpress
• free slidedeck skins
• psd files for photoshop
• PHOTOGRAPHY MENU PSD
• The Global Sports Theme megaupload
• The Global Sports wordpress rapidshare
• wordpress navigation css prite tutorial

Related posts:

1. Evo 2 Home Page Tutorial
2. Evo2 Gallery Tutorial
3. Simple Sprites Menu
4. Thesis Tutorial Header Banner Rotator
5. Apple Touch Icon Tutorial

Copyright © Yorgo Nestoridis - Original Article at Photo Sprites Menu Tutorial.

As we are in layer mask mode these days, I was asked as to how to fade one image into another in Adobe Photoshop as I quickly did on this orange butterfly photo taken in my garden yesterday. Yes – we are having an early spring down here in Noordhoek, South Africa. This was the first butterfly of its kind I’ve spotted since our winter… shimmering just too beautifully in the early morning sun on a stunning white raphiolepsis in full bloom. Ideal for the creation of some captivating web graphics!

If you look at the digital photo above, you see there is a part in full colors (at the top) fading perfectly into a gold-tinted part (at the bottom) – in this case featuring the same butterfly image.

How to fade one image into another

So what have I done to fade one image into another in an almost unnoticeable elegant manner?

First, I had a vision: I knew that I wanted to play with the orange of the butterfly fading into golden tones… So, what I needed was part of the image – containing the striking orange butterfly – in original colors… and the rest of the same picture tinted in golden tones.

As I had the original in colors, my second step was to do the tinting process in Adobe Photoshop (Image > Image Adjustments > Color balance and >Hue… alternatively Filter Tools). I also did black and white essays to see my values – meaning the amount of light and shadow as well as the greys inbetween in the picture… which always interest me as a lover of monochromatic photography. You can play with any color you like and that suits your purpose.

So in my layer stack I now had my original color picture and, on top of it, the golden version. That’s all… and now I went for step 3: the layer mask!

How to apply a Layer Mask

There are various ways as to how to apply a Layer Mask; I tend to keep it simple: with the top golden layer selected, I click on the “Add Layer Mask” icon at the bottom of the layer tool… I make sure that black is my foreground color… I click on the gradient tool in the toolbox to the left and, at the top, on the menu bar, I make sure that the first box is clicked for ‘linear fades’ and that, on the Gradient Editor next to it (just open it), the black-to-white gradient is selected.

Notice: the moment you click on the Layer Mask, a little white thumbnail is added to your active layer – so make sure you select the correct layer!

Here’s an important principle to remember: white makes your image opaque (keeps it non-transparent), black makes it transparent (the underlying image shines through).

So remember: I wanted to keep the top of the color original (bottom layer) and then get rid of the rest to fade into the gold image (top layer with layer mask).

In other words: I wanted the gold image not to show at the top (where I wanted the orange butterfly), yet I wanted it to become visible just beyond that. As I had the gold layer active, this principle applied to that layer: do not show the top (black, meaning transparent to reveal the underlying image layer with the butterfly) but show bottom (white, meaning there the gold picture was opaque with nothing from the color picture underneath showing).

As the next step I had to decide the amount of gradient I wanted to apply and from what direction (black to white).  This was dictated by the shape of the orange butterfly… so I basically ‘drew’ this gradient in form of a straight line with my mouse, holding it down all the way, from top left towards roughly the middle of the image… a little as on the schema below for better understanding.

The result is what you see at the top – and I think it has quite a nice vintage look to it.

Just try doing the same with an image of your’s. You can obviously work with two images – but this exercise is kept simple to show the principle. It just needs a little understanding, practice and – most importantly – knowing what effect or result you wish to achieve. But this too comes with practice – so practice is the key!

If you have a problem, just go back in the History (see under Window)… and start again until “it’s in the bag”!

Let me know if this was helpful… and enjoy!

Now that I showed you how to do a Layer Mask in Adobe Photoshop, let’s try something similar that can give you a nice effect when used in combination with letters (fonts) or shapes: here’s how to do a Clipping Mask!

How to do a Clipping Mask

To show you how to do a Clipping Mask, open your Photoshop and pull in a picture – ideally a colorful image. Why not a bunch of flowers or something similar. I used this morning’s early picture of a honey bee going for her breakfast on a white rapheolepsis in my garden… the first rays of a glorious sun were just breaking through the shadows of the trees and touching the soft edges of the blossoms.

Now think of something you wish to add. It could be a shape (using the Shape Tool) or simply a few words, like I used “BEE HAPPY”. Note that the words should be typed in big, fat letters like for instance an Impact. This is for better understanding the result as you will see in a minute.

So when you look at your layer stack in Photoshop, you have the picture layer at the bottom and a text layer on top – right?

All you do now is drag the picture layer on top of the text or shape layer. Next – and while keeping the image layer on top of the layer stack selected – go to “Layer” on the top menu and click on”Create Clipping Mask”. WOW! You see your word picking up the colors from the picture below… brilliant! Your letters have basically turned into pictures… You can even drag the image layer around to optimize the colors ‘shining through’ the letters.

If you don’t see anything, you probably have an image layer underneath the text layer, so just deactivate it and you see your word.

Bee Happy

This is exactly what I did in the above example “Bee Happy”.

Just try it yourself and find your own style. Enjoy!

There are various ways of working with masks, however, selecting “New Adjustment Layer” under “Layers” in the top menu of your Adobe Photoshop is one of the basic methods as to how to work with Masks in Photoshop… at least how to get started :)

How to work with Masks in Photoshop

Get started by selecting a photo with a central point of interest – as an example – as I did with my little friend, the bumble-bee, that I kept chasing with my digital camera in my garden for a while, shooting many close-ups that were too close as this little devil is just so fast and so hectic that it never stops for a second… or he just enjoys teasing me ! But here I finally got him on a blue flower. The original image is in full color:

When you select new Adjustment Layer, a new layer is automatically created above your existing one. Make sure the color black is on top as the background color. Now you can select a brush and basically paint out the mask with the original colors shining through from the layer below. Experiment a little until you get the hang of it and an understanding of how all this works. This is a practical matter, it needs to be done – not only ‘studied’.

When white is set as the background color, you paint in – a way of correcting things… and of course you can set the opacity levels according to your preferences.

For fine detail work zoom the picture up and work with the brush sizes most suitable for your design or choose the lasso tool. As an artist you can work very creatively… your time, patience and love for the image you want to create determine the result as with all creative work. And obviously: experience and skill will help you to quickly see what’s needed and possibly achieve beautiful effects with just a few brush strokes.

In my version above I opted for a more monochromatic overall tint first as you often see in my artistic photographic work – keeping to colors that naturally existed within the original photo. The above is just one of many versions…  After adding my mask and adapting the main object of attention, the bumble bee, I chose a basic frame in OneOneTools Professional and personalized it with Adobe Photoshop tools again.

Since a Photoshop genius discovered the ‘layer factor’ and set an end to the fear of losing one’s work, graphic design has become a never ending story. Choosing the moment to stop is a difficult one – but it’s a thrilling process!

Semiomantics Web Design

Captivating Web Graphics and Images are critically important for Semiomantics Web Design as these visuals are instrumental for firstly attracting and then keeping visitors coming to a website or blog as you also see in the website for Delia O’Riordan. What’s never been said is also the fact that having a website or blog that you love because it’s beautiful to look at and expresses what you feel or what you want to impart to others is a pleasure – like an online bouquet of your favorite flowers that never whither… that just bloom and expand bringing joy to whoever chooses to look… and find you mirrored within them.

Don’t you also love the little Google Images the monolith of search engines often comes up with? It just makes such a difference: someone took care… thought… and expressed something in joyful, humorous and apt ways that resonnates with many of us who can ‘see’ these little things! It’s about the human element within this cold technological stuff…

Just experiment and find your own creative style and enjoy exploring the artist within you!

Almost a year ago, I wrote about the Arum Lily Frog – Hyperolius horstockii – and how much I wished to spot it! Yesterday, a tiny arum lily frog surprised us at the Photo Seminar attended by Ycademy Seminar participants from all over the world – strictly online of course!

Curiosity won over suspicion as the beautiful creature emerged from the depth of the calice of a white arum lily in my traditional monthly Ycademy Seminar bouquet that always features flowers from my garden in Noordhoek, South Africa.

Arum Lily Frog at Photo Seminar

Having an Arum Lily Frog at the Photo Seminar gave me an instant opportunity to capture the little visitor with my digital camera (NIKON Coolpix P90)… and then applying the newly learned skills of OnOne Professional Tools as part of our Adobe Photoshop photo and image editing equipment.

The Importance of Seeing beyond the Photo

My article about “The Importance of Seeing beyond the Photo” suddenly got an additional dimension: the arum lily frog perspective! The knowledge and content taught in terms of Photo Editing and Photo Publishing were exhilarating as to the possibilities we have for our photo post-production, allowing us to compensate for the short-comings of our low-end cameras that just cannot compare with top professional digital camera equipment when it comes to traditonal offline printing.

It was – as always – so much that it could make you dizzy and one could easily get lost between Greek walls and British bumble-bees. Finally, the traffic chaos on Google Top 10 after us publishing images on our WordPress Blogs was just too much: our little visitor prefered to withdraw from the high-tech world … while keeping an eye on me … just in case!

Publishing Photos on Google Top 10

Publishing Photos on Google Top 10  convinced the Arum Lily Frog that it had indeed joined the best WordPress Theme Team in the world: Semiomantics.

Time to enjoy the last rays of the setting Noordhoek winter sun illuminating the arum lily… time to rest before the next adventure…

Nobody takes outstanding photos all the time; not even the top professional! The Importance of Seeing beyond the Photo to me lies in seeing the image before we actually take it – just like the true artist painter has an inner vision of what he wants to project onto the canvas with colors… and being an artist myself I know about the inner struggle of getting close to that picture… and how hard it actually is to capture it… if at all!

Coming back to Digital Photography – the topic of this month’s Ycademy Seminar – the fact is that very often we sort of rush into a picture – be it for lack of time or to just quickly catch that fleeting image as we pass in order to remember it… brief: we see something … something beyond the photo we actually carry home. So while the imperfect  if not lousy picture – yet enhanced by our personal experience and vision – may be one thing, we now have to translate it into something that talks, that’s dramatic, expressive or beautiful to look at for others.

That’s when Post-Editing comes into play, be it with all the brilliant tools Adobe Photoshop has to offer or, to add even more sophistication and ease, OnOne Professional Tools.

That’s where the top professional distinguishes himself: pre-editing by composing the perfect image he wants to take – either by taking the right time in any natural environment or by including the right setup for studio shots where he would need say the make-up, styling and especially the lighting of a model with or without background. After careful selection of certain photos from the whole lot – this will then be followed by post-editing, applying certain filters, masks and effects… often the photographer’s secret ‘brand’ or the studio-brand… just as we have the possibility to do with our post-editing tools. It’s all about educating the eye, having a feeling for trends and the taste of the time and then knowing how to use our camera and post-editing tools.

The Importance of Seeing beyond the Photo

The untouched Greek seascape presented to us at the Ycademy Seminar for personal enhancement (see below) is a perfect example to demonstrate the Importance of seeing beyond the Photo.

Here we have the photographer capturing a subtle Greek sunset casting a flat mirror onto ink-colored water with tiny silhouettes of boats at the rosy horizon and flanked bottom left and right by dark memories of land. It’s the photographer’s memory… which can be improved technically up to a certain point… and this was part of the exercise yesterday.

But then there is my instant inner vision, inner interpretation… based on my own memories of light, water and sea and especially flying fish during my windsurfing and diving times in the Philippines that let me immediately see something else… and while improving certain issues – like the horizon, higher tonal range and sharpness etc – I was completely carried away expressing what I saw in this photo… or rather beyond this photo -, giving it my personal interpretation and touch – and these post-editing tools are perfect to do so. The result was “Anchovies Dream” above! it may please others or not – but it’s filled with my own memories… and I went back in time and I was there again… and when I look at the image I see and remember it all … the schools of flying fish, the light, islands at the distant horizon, the transparency of the sea around coral reefs set against the mystery of dark night-dives… and all beyond the volcano’s eye…

Mastering the Technique of Post-Editing Tools

There’s a clear difference between ‘playing around’ with effects and Mastering the Technique of Post-Editing Tools. However, it helps to get familiar with tools and their possibilities to then apply the correct tools to bring alive the inner Vision.

Joy is important and furthers Creativity, taking away the fear of all that complex and daunting ‘technical stuff’. So start with the first approach to see and understand what each filter or mask does – taking good notes of each ‘effect’ – and then using each very sparcely but extremely targeted to help define the photo or image in the way you see, feel and know it inside… or to simply present better photos and higher quality images.

Each picture should have a soul – that’s the way it communicates, touches and … ‘talks’.

The principle is simple: the ad consists of a styled link, the style consisting of positioning a background image with a rollover effect when the mouse passes over the image (hover). When clicking on the image the target page opens. A few years ago the rollover effect could only be achieved using JavaScript. The same effect can now be achieved using CSS and namely the pseudo-class :hover.

The rollover effect can be achieved using two separate small images which alternatively load as a background or by creating one big image containing multiple small images and by shifting the background position. (CSS Sprite).

For the purpose of this exercise we will use the CSS Sprite version.

The example shows the rollover effect as used on the homepage.

For our image we need the normal view as well as the hover view of the ad united on one image created in Photoshop: the image here below is 250 pixels wide and 250 pixels high.

In stead of creating two images we create only one and leave a vertical space between the two ads.

This results in an image of 250 pixels by 510 pixels.

Image used for the CSS Sprite

This image is 250 pixels wide and holds both views of the ad, each 250 x 250 pixels.

You may download the corresponding Photoshop Template File from HERE.

To place your ad in your html document, just embed the target link with a new css style class:

<a class="rollover8" title="Daily Live Conference at Yorgo Talk: 7 pm London time" href="http://yorgotalk.com/"></a>

As you see, we just embed the link with a class “rollover8” and a title for SEO purposes. You can choose any class name; I selected “rollover8” as there are already 7 previous rollovers on the site.

Now we just style our link by adding some code to the style sheet:

.rollover8, a.rollover8 {
display:block;
width:250px;
height:250px;
background: url('/images/ad250x250a.png') no-repeat top center;
float:left;
margin-bottom:9px;
}

a.rollover8:hover {
background-position:0px -260px;
width:250px;
height:250px;
}

I guess the style code is self explanatory.
Just try and if you need any help, just comment here below.
That’s it.

• 2011 css rollover effects
• how to create rollover ads
• rollover ad
• rollover effect html worpress 2011

Related posts:

1. Create 125 x 125 pixels Ads
2. How to create a Favicon with Photoshop
3. Simple Sprites Menu
4. Create a Favicon with Photoshop
5. Create Apple Touch Icons and Startup Images

Our April 2011 Seminar will feature some important Updates as well as new ideas relating to WordPress and WordPress Design and Development. This Seminar is for WordPress Users, Designers and Developers as well.

WordPress Powers 10 % of the Web! Its continuous development and the very active community have made of WP a leader and trendsetter in Website development and design. We will provide you with the latest news and trends as they emerged on yesterday’s World Camp which took place in Seattle (April 16, 2011).

We will show how Semiomantics fits in to the competitive world of and around WordPress and how we can take advantage of global WordPress development to shape our business and to build an ever growing customer base.

We will release the New Semiomantics Website, Forum and Affiliate Program.

An update of Semiomantics XO will be released as well right at the Seminar.

We will look into the Process and Work-flow of developing and implementing an online project and compare our own activity to some standards and benchmarks.

This is an important chapter as it will deliver a guide for Project development.

We will discuss the infrastructure needed, its cost as well as the tasks related to maintaining a Website in good condition. The importance of the behind-the-scene tasks is often under-estimated and can lead to misunderstandings between developer and customer. It is therefore of the utmost importance to know how to maintenance a site and a host and how to price the tasks properly. The discussion with a customer will define, which tasks the customer may want to take care of and what will need to be out-sourced and at what price.

1. Semiomantics focuses mainly on the development of a universal theme framework for WordPress powered websites, the by now famous XO. In depth knowledge of XO allows also less experienced developers to build awesome customized websites for customers, in fact, there is nothing you cannot build with Semiomantics XO.
2. Semiomantics XO is continuously developed to take into account the most recent WordPress Developments as well as the demand from customers. The Semiomantics Interface is user-friendly and provides also beginners a versatile framework for most any purpose, the base remaining Blog and CMS.
3. Semiomantics pricing is still  low! The XO framework can be expanded to the needs of customers by adding pre-built modules or child themes which fit in with the XO Framework and are ready for customization.
4. Semiomantics will provide quick Support and Help when needed. Quick support discussions, forum and support tickets are just some ways to reach out for personal assistance.
5. The New Semiomantics Website will be a source of inspiration and help for may developers and users; scripts and tutorials will be made available publicly.

Child Themes have the advantage that customizations are safe from Theme updates; therefore it can be a good idea to build a customized Child Theme for each new website. We will guide you through the process of planning and building a Child Theme in function of customers needs and requests, example: Simple Blog, Shop, Media Site.

Plug-ins are useful to add functionality of style to a WP driven website. We will look into some recommended plug-ins for analysis, functionality and design, taking into account the prevailing trends and keeping always the focus on our priority: Performance!

We will namely come back to customizing Slide DeckPro and WP Touch, some performance plug-ins as well as Custom Fonts.

• Text
• Image
• Vidoe
• Podcasts

• Image Management and Editing with Lightroom 3.3
• Mixed Slide-shows Video and Photos with Adobe Photoshop Lightroom 3.3
• Managing your media on WordPress

Let’s start with planning the Home Page and styling it to taste! Crete a Home Page Template.

• Your website
• Your cPanel
• Your phpMyAdmin for the MySQL Database

Please prepare some photos and short, very short video clips shot with your digital camera. More instructions about format and samples will follow. Make sure you have access to your cPanel and Author site via FTP.

All other materials and tools are provided.

Tickets are on sale at the Brain Time Shop for $ 85, Ycademy Pro Discount available: please send the usual request to Bianca (bianca(at)ycademy.com).

As usual, Saturday and Sunday: 1 p.m.  till 9 p.m. London Time with the usual 60 minutes lunch or dinner break at 6 p.m. London Time.

Tuesday, April 26 and Thursday April 28 at yorgoLive, 7 p.m. London Time.

• web design beginners seminars 2011
• wordpress online seminar
• ycademy online seminar april 2011

Related posts:

1. Ycademy Online Seminar March 2011
2. Ycademy Online Seminar BIG NEWS
3. Ycademy Online Seminar January 2010
4. Semiomantics XO 2011 for WordPress
5. Ycademy Online Seminar

The favicon or icon is part of the customization of a website. The favicons show namely in the browser tabs. Nowadays most browsers will also show .gif and .png icons; the .ico format is preferred by Internet Explorer.

A quick and easy way to create a Favicon is by using the online tool put at disposal by favicon.com. A better result can be achieved by editing the favicon in Photoshop; however Photoshop does not support the .ICO format in its native version. A plug-in can remedy.

To start with, download the free Plug-in from Telegraphics.

Paste the plug-in file (ICOFormat.8bi, or ICOFormat64.8bi for the 64 bit version) in your Photoshop: …Program Files/Adobe/Photoshop/Plug-ins/File Formats.

re-start Photoshop.

The .ico file format will only be available in Photoshop if you respect the following:

1. Maximum file size 256 x 256 pixels
2. RGB, Bitmap, gray-scale or Indexed mode
3. Maximum 8 bits per channel

To save an image as .ico, use “save as” and select from the drop-down the ICO format.

Favicons are small icons, very small icons, since they measure only 16 x 16 pixels. Designing an Icon is a challenge since its display should be meaningful. To work more comfortably with your photoshop, start your design with a larger square canvas, a multiple of 16 pixels, for example 64 pixels, 128px or 256 pixels.

For the purpose of this exercise I will use a 128 px x 128 px canvas with the following presets:

You may save these settings as Preset for further use.

Best results are achieved if you keep your design simple and rich in contrast.

1. Open a new file with the above presets:

2. Fill with your background color (or pattern)

3. Add content

Best result with vector graphics, custom shapes, good fonts  and such likes; just create a new layer and add …

4. Resize

Resize to 16px x 16px and resample selecting ‘Bicubic Sharper’:

We get now:

5. Save as .ICO

Now “Save as” (don’t use “Save for Web and Devices”) and select the ICO format. Rename the image to favicon.ico:

6. Embed your new Favicon

Most browsers will find your favicon.ico automatically if you just load it into your website’s root folder (where the index.html is located), others are looking for a direct link to the favicon. To help these last browsers just add the following lines to your header (between the <head> … </head> tags):

<link rel="Shortcut Icon" href="/favicon.ico">

Load your favicon to the root folder of your domain and make sure it’s called ‘favicon.ico’.

That’s it.

Related posts:

1. Create a Favicon with Photoshop
2. Create Apple Touch Icons and Startup Images
3. Semiomantics Shop for WordPress
4. Create Buttons with Photoshop
5. Logo Design with Photoshop

Tonight’s call will focus on more Photoshop Basics. The goal is to become familiar with more easy to use features to produce more interesting graphics for advertising or product presentation.

I am looking forward to an inspiring session :-).

Related posts:

1. 3D Text with Photoshop
2. How to use Displacement Masks in Photoshop
3. Book covers and Jewel Cases with Photoshop
4. Web Design Basics
5. Photoshop Ycademy

How to design a simple Logo with Photoshop

After a rich Seminar, let’s relax with a simple Logo design at tonight’s call. The exercise will consist in using custom shapes, fonts and styles from Photoshop according to the below samples:

Semiomantics Logo

A colored version:

Semiomantics Logo in Helvetica

A neutral version in Helvetica:

Semiomantics Logo Impact Arial

Version using free fonts:

To prepare the session, please download the image and Photoshop file; we will use them as a base and then move on to profit from your creativity:-).

I am looking forward to seeing you tonight at the call.

Related posts:

1. Logo Design Study for Zo Nicholas
2. 3D Text with Photoshop
3. Create Buttons with Photoshop
4. How to use Displacement Masks in Photoshop
5. 3D Photoshop Exercise

Banners Go Magnetic

Banners are always part of the promotional section of our Website Development – and following last night’s Ycademy Workshop, here are some “Banners Go Magnetic” – size 468 x 60 although created bigger. The colors are reflecting the Philippine flag :) . . . and they are REALLY reflecting :)

Banners Go Magnetic with Displacement Masks

Banners Go Magnetic were all created with Displacement Masks in Photoshop – quite a tricky one without a tutorial, just having it seen and followed once – but here we go. . .  the Philippine flag not to be ignored :) … and too dominant to leave any space for reflections… almost philosophical…

And it all started the American way:

Needs a South African flag one of those days… no stars but many colors for the “rainbow nation”.

Fun!

Text Effects with Displacement Masks

Tonight’s short call will focus on using displacement masks in Photoshop. The below image will serve as an example for our exercise.

I am looking forward to seeing you there :-).

Related posts:

1. 3D Text with Photoshop
2. Photoshop Workshops
3. Book covers and Jewel Cases with Photoshop
4. Create Buttons with Photoshop
5. Watermark and Copyright with Photoshop CS4

Spectacular 3D Text for Print and Web

Tonight’s Photoshop Workshop will focus on Styling text, namely to give text a 3D aspect. The step by step walk-through will serve as an introduction to some spectacular effects and features of Photoshop.

Effects and Styles

The interest of the exercise is in discovering some smashing effects we can achieve with Photoshop without using the 3D tools.

We wil also see the number of operations needed to perfectly place shine, glow and shadows to give a glossy, high quality impression.

Short Friday Call

Please be on time as this exercise will take at least 1 hour to accomplish and understand. I hope you will be as smashed as I am by the result and this final session of our PS Basics workshops.

Related posts:

1. Book covers and Jewel Cases with Photoshop
2. Photoshop Workshops
3. 3D Photoshop Exercise
4. Resizing Pictures in Photoshop
5. Photoshop Ycademy

Semiomantics Ads

At tonight’s call we will create some 125 px x 125 px ads. The idea is to brand the ads in line with product and website branding.

Advertising Elements

From a visual point of view, ads use the same branding as our business or product. In addition to that you may use slogans, space permitting. A 125 pixels ad does not provide much space; therefore the information must be concise and clear and contain – if possible – an element which will provoke the click, such as the price.

At tonight’s training we will look at the example from Semiomantics and then create individual advertising buttons.

Semiomantics Brand

Semiomantics uses basically 3 Fonts:

• Capture it Regular
• Myriad Pro
• League Gothic

The Colors:

• Grayscale
• #222222
• #eaeaea
• Red C00C00
• Black and White

The Styles:

• Strictly minimalist and flat in B&W Red and Gray-scale

Sample Ads

The above ads use similar style as the sprite menu bar:

You could imagine using sprites for the ad or a hover effect similar to the menu.

Download the Photoshop file:

Try it using your own Colors and Styles.

Related posts:

1. Create a Widget below the Multimedia Box in Thesis
2. Create a Header Widget in Thesis
3. Create your First Flash Document
4. Create a Favicon with Photoshop
5. Create Buttons with Photoshop

Free Photoshop Button

At tonight’s workshop we will build yet another Photoshop Button Template. As we progress, our buttons become more sophisticated as you will see.

Today’s button may inspire you to create your own button set and to put it up for sale on your website or shop.

Free Button Template for Photoshop

Here is the button we are building:

There are various interesting elements:

- The gradiant gray button background with a border and stroke

- The text style

- The Logo

- The Ribbon

Using Photoshop, these elements can be edited separately from the template by modifying the corresponding layers and masks.

For those who cannot attend the Workshop tonight, the button is available for free download here below:

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.

Related posts:

1. Create Buttons with Photoshop
2. Free Leads and Free Traffic by YORGOO
3. Photoshop Workshops
4. Free Weekly Horoscope by YORGOO
5. Digital Photography Ycademy 7

Free Photoshop Button

At tonight’s workshop we will build yet another Photoshop Button Template. As we progress, our buttons become more sophisticated as you will see.

Today’s button may inspire you to create your own button set and to put it up for sale on your website or shop.

Free Button Template for Photoshop

Here is the button we are building:

There are various interesting elements:

- The gradiant gray button background with a border and stroke

- The text style

- The Logo

- The Ribbon

Using Photoshop, these elements can be edited separately from the template by modifying the corresponding layers and masks.

For those who cannot attend the Workshop tonight, the button is available for free download here below:

Related posts:

1. Free Leads and Free Traffic by YORGOO
2. Create Buttons with Photoshop
3. Photoshop Workshops
4. Digital Photography Ycademy 7
5. Free Weekly Horoscope by YORGOO

Bonus for Ycademy Seminar Participants

This month our daily calls are focusing on Photoshop basics. To prepare the sessions we are using the most popular resources and guides available out there. For Ycademy Seminar participants we have prepared a Library which we will feed before the Ycademy January Seminar time permitting.

Amongst the best resources are the ones from Lynda.com, as well as CS5 for Dummies and the CS5 Bible. We are using these to elaborate tutorials and exercises which we make available for download.

Please look out for a mail from Bianca with the access link and pass to the library.

Related posts:

1. Photoshop Ycademy
2. Adobe Flash Workshops and Seminar by Ycademy
3. WordPress Development Seminar
4. Book covers and Jewel Cases with Photoshop
5. Digital Photography Ycademy 1