Project clarity

I should have put pen to paper earlier because I feel that although I'm learning a lot through experimentation I need to start producing some results or at least have something tangible to develop.

The above drawing shows plans for three pages of the music website I'm developing.

Figure 1

This will be the front page. It will simply show the sun rising over a mountain to the sound, perhaps, of Jupiter by Holst. This will be an animated GIF.

The mountains will either be from a real picture or, having experimented with the Freeform Pen Tool this morning, I may draw a very simple design very similar to the one pictured above.

Figure 2

This will be the home page. The header will show a half sun (more later) on a blue background. I may put images of inspirational things to me in the background.

Below the banner, on the left will be a transparent picture, perhaps a silhouette of me or my house, overlaid with some words describing my project.

On the right will be some imagined CD-type covers, made in Photoshop, which will represent each song.

Figure 3

This shows a development of Figure 2. Instead of having square CD sleeves I thought that in keeping with the sun theme it would be good to have some circular shapes.

Figure 4

When someone clicks on a ciruclar "CD cover" they will have the dubious pleasure of hearing one of my songs. The banner will remain the same, below that will be the cover, below that either an audio or, if I earn some money soon, a video of the song.

Finally, below those delights will be the lyrics to my tune.

Occupation, just having fun

I decided just to play around on Photoshop today, do whatever took my fancy.

Since the header on my website (www.johngilheaney.com) has been ridiculed by almost all my friends I decided to experiment with an alternative design.

I don't intend to use the above, it was just a means of experimenting with curves on a header courtesy of the freeform pen tool.

I bevelled and embossed the shape using Blending Options, I like the effect.

The other find from yesterday was how easy it is to create a web gallery with Photoshop (File-Automate-Web photo gallery). I'll add a page of this kind to my site soon.

Finally, with regard to the buttons on the Hello Sunshine website I don't think I'll do a rollover in ImageReady. Something like the above, a gradient tool mix of sun and sky would look good methinks.

Sun animation

(Please click on the above to activate)

I put in a good three hours today which really pleased me.

The first hour on the rough sun animation (above) was frustrating because I could not get the brushes to work in conjunction with the layer mask.

They just would not cover the sun at all.

However, after trial and error (Brush 626, Mode: Normal, Opacity: 10% and Flow: 6%).

Basically after choosing the pic I created a new layer, put a sun on it, added a mask, then added a new layer which I covered in orange before changing the layer option from normal to colour.

I then used the animation option to make the sun rise, pushing it up one on each frame.

The above is very rough at this stage but it's satisfying.

I have to work out how to incorporate text into an animation, the next time I work on this, a design feature front of my website, I will look into text options.

This exercise was, I have to be honest, based on a very helpful tutorial I found on the web: http://www.rnel.net/tutorial/Photoshop/3111

I wish I could have worked out all the above for myself but I have to be realistic at this stage, when starting out learning often comes through imitation.

I enjoyed working on the above, I kept my patience when in former times I would have become exasperated and then despondent when stuck.

I also learned how to use the Spot Healing Brush tool and the Eyedropper tool.

Sun experiment

I've been experimenting with animated suns for my banner and also for the 'o' in Hello Sunshine.

I came up with this today. It's a start. I simply used the paintbrush in ImageReady to put red, white and yellow spots on the sun.

I'd obviously like to do something more daring and spectacular than this. I've thought of including a rising sun on the opening page of my site. As it rises I'd like to have Holst's Jupiter playing, now that would be suitably OTT for me!

Gradient anarchy

Some wild experimenting with the gradient tool.

Banner experiments (2)

I didn't go to class tonight, I thought it would be better to stay at home and do some anarchic experimenting on my project (I was also still a bit rough from my exuberant St Patrick's Day celebrations if truth be told).

I began by having another look at the banner. I searched for ways to make the blue sky blend from one colour to another.

After some exasperating attempts to work the gradient option I got lucky.

By chance I double clicked on the gradient rectangle at the top of the screen and found myself in Gradient Editor.

I played around with this tool and was very happy with the effect I managed to put on the banner (sky blue to dark blue).

I then added a layer and devised a sun (see below). To produce the rays - which will be tidied up at a later date - I used the pen tool and then created a path, which I then filled.

Still experimenting but I think I can see some progress.

I have a feeling that once I've cracked the banner the rest of the site will fall into line. I have so many ideas at the moment I don't know if I'm coming or going.

Later...

It might be a good idea to make the sun an animation and add that to the banner. Just a thought.

I also played around with some nice gradient colours, it's quite addicitve, colour therapy methinks!

It might also be a good idea, if the chance presents itself, to use the gradient editor as background to some of the pages I produce.

Banner experiments

I began my project by experimenting with some header designs.

Originally I was going to call this website "Suneye" after an old T Rex song but I discovered that title's taken so, in its place, I've gone for the very optimistic "Hello Sunshine".

Initially the colours I was going to use were white, orange and green, as per my other website www.johngilheaney.com

However, after drawing a mini sun on an ImageReady web banner, and viewing the mix, I thought a blue background was called for so the green had to go.

Creating the second banner experiment (above) was not difficult. I used the marquee tool to draw the shape of the sun and the single line marquee tool to add some rays.

To make the blue background look more interesting I added some brushstrokes in shades of blue. I was quite pleased with the effect and will look to devise a way of making this more professional.

I would love to see the shades of blue segue into the dark of the night sky and put a golden moon in the corner of the header. That would be fun, as would the idea of adding an animation to the header, a mini plane, with banner in tow, moving from one part of the header to the other.

I'm not sure if this is feasible at my stage of learning but I'll certainly look into it. I will also explore ways to make the text come alive. I had a look at various Blending Options which got the juices flowing.

All in all I really enjoyed working on the above, it's great how the creative process can take you into areas you'd never dreamt about.

Decision time

It's time to decide on my project.

I've given this a lot of thought and I had quite a few options one of which was to compile a rugby or football interface, like the ones some football clubs use (http://www.bristolrovers.premiumtv.co.uk/page/Welcome).

However, this will not serve any purpose beyond the lesson plus such a project would, in part, duplicate some of the work Jamie presented to us during the first few lessons.

So, instead, I have decided to build a musical website that will include approximately six of the songs I've written over the last ten years.

I think this is a good idea because it will give me the opportunity to maximise the lessons I've learnt in both Dreamweaver and Photoshop. The addition of sound and possibly vision will also signify a big leap in sophistication when compared to the very modest sites I've built before.

Last week I learnt how to upload an MP3 onto a site and also a video segment from my camera so what lies in store should be fun as well as being suitably challenging.

Work on the site (deep breath) begins tomorrow.

Signature and animation experiments

Click on the "s" above to access the humble animation I devised today.

Although I was rubbish in class last night I really can't fault my work ethic since.

I spent an hour or two after the lesson at home doing some wild experimenting with banners and video. It was rewarding because, for the first time, I uploaded a thirty second piece of film onto Dreamweaver. A small victory but a victory nonetheless.

This morning I struggled for a while on animation. This was intensely frustrating because I had cracked it in class.

However, with the help of How To Do Everything With Photoshop CS2 by Colin Smith I worked out how to make a word move across the screen. Again this was very satisfying.

Finally, thie morning, I experimented with my signature. I think signatures on web pages look very good and I've struggled in the past to work mine into some kind of decency.

Well, I was lucky today because some of Colin's tips on animation helped me.

I opened my scanned signature in image ready and then dragged it into a web banner - I didn't realise there was a web banner option in ImageReady but not Photoshop.

I duplicated a series of layers to make my signature look stronger. Then I just experimented with Multiply, Hard Light etc.

The options "Difference" and "Exclusion" created a very nice effect. I then moved a layer of the signature a touch, just to see what happened, and I was quite pleased with the result.

What I learned today was patience is a huge virture in Photoshop (and Dreamweaver). At times I become totally flummoxed and frustrated...but with patience the simplicity of how a task is done comes through.

I also think it's good to have more than one photoshop book to hand for guidance.

Photoshop CS2 in Easy Steps is great but its explanations didn't quite help me crack animation. Thankfully, Colin Smith's book did.

Photoshop lesson 6

I was rubbish tonight.

I couldn't find last week's work so I started the "Eat GM free food" site afresh.

Unfortunately I couldn't remember the basics, I was totally flummoxed, I couldn't even remember that to put the oranges on the header I had to upload the header (or paper) first.

I soldiered on very slowly but there's nothing worth noting, this was an evening to forget.

We begin our projects next week. I must up my work rate and momentum to avoid debacles like tonight.

Website discovery/The arrival of Flash

I discovered a very fine website this morning one with photoshop tips, flash interfaces, downloadable templates...it really fires the imagination...and makes me realise how far I have to go.

Here's the web address: http://www.rnel.net/tutorials/Photoshop/Signature_Effects

The progress I'm making is terribly slow but at least I've begun the journey.

I had another anarchic hour of play this morn following a mess around last night, the basics are beginning to be absorbed what I really need to do now is to just dive in and work on an interface.

On related topics I bought Flash on Sunday, it arrived today. It cost a lot but hell, I'm devoted to the cause!

I spent yesterday re-reading a book on Dreamweaver to remind me of what I've learned. I also made some small but essential alterations to my website: www.johngilheaney.com. I centred the tables and changed the background from cream to white. I need to add a feed asap and think about adding a gallery of pix and altering the front page main pic of the post office.

I'm beginning to get momentum and confidence at long last.

Now's the time to be bold and dive in deep.

Photoshop lesson 5

TRICKS COVERED: ROLLOVERS IN IMAGEREADY, REPLICATING AN INTERFACE

Jamie started the lesson by teaching us how to do rollovers in Image Ready. I enjoyed this because the exact same are featured on George Galloway's site (www.georgegalloway.com), so that's how they did it!

This wasn't too tricky although trying to build the interface was.

I was quite pleased with my progress. I managed to get a fair copy of the header before the class closed.

I was happy that, when it came to putting handwriting on the header my actions were what Jamie would have done (marquee tool to cut writing from the jpeg).

I tried various ways to blend the writing onto the header, funnily enough I experimented with the Blending Options facility, to fair effect.

However, it was the Multiply option that I should have used.

I'll never forget that now.

(Note: this lesson took place on Wednesday March 5th, 2008)

Photoshop lesson 4

TRICKS COVERED: REPLICATING THE FUTURE FARMERS SITE

This was one of the most enjoyable lessons I've had.

This time last year I felt truly lost trying to put together the Future Farmers interface.

I was so fed up with my lack of understanding twelve months ago I decided to scrap Photoshop and start all over again with my old mate Dreamweaver.

Thankfully on this occasion I stayed with the pace and fett comfortable with my modest progress.

I got to grips with the Marquee tool and learnt how to use the gradient facility.

Foolishly, I used the pen option to try and replicate the foot of the interface...when Jamie showed how it was done I could only marvel at his logic and the sheer simplicity of a task I made as complex as the design of spaghetti junction.

This was a fine lesson because it was the first occasion we applied the skills we've imitated up until now.

This was a great example of "Mind in action" to coin a fine phrase of my former English teacher, Mrs Stock.

(Note: this lesson took place on Wednesday February 27th, 2008)

Back in business

OK, time for some renewed, extra beautiful spring momentum!

I've been working at the Welsh consumer programme, The Ferret, over the last three weeks and that has rightly diverted my energy away from the glories of Photoshop.

Now it's time to really up the ante and make this blog zing.

This morning's doodle (see above) probably doesn't look much but it signifies progress to me.

I learnt so many little things putting this together the main two being:

1. Keep the background layer clear
2. How to wave, cramp and expand text to my heart's content.

I also had a quick experiment with Dreamweaver to see how this looked on the page.

I chose a journalism-style interface because I am going to exmperiment with a site of that nature this week, during five days of rest, recuperation and inspiration!