Keith Lord - Online Portfolio

This tutorial will explain how to create a simple brush in Photoshop for use in artwork. Just a note this tutorial we be updated with how to group the brushes your created into a single pack for convenience.

Step 1

First we will need the image we want to use for a brush, in this case I used the picture of the Cleft found on CyanWorlds website. I copied the image to a new canvas in Photoshop and cropped the image so it wasn’t to big.

Step 2

Next we grey-scale the image, to do this we hold ctrl+u on the layer the image is on and when the Hue/Saturation box comes up, we shift the Saturation slider to the far left.

Step 3

Now that we have done that, it is now time to define the brush, to do this we go to Edit -> Define Brush.

Step 4

Name the brush to what you want it to be (in this case we named the brush cleft-brush) and click ok.

Step 5

Congratulations the brush has now been created, click the brush tool and then go to the brush selection box and scroll down, there you will find your brush.

Step 6

Well there isn’t really a step 6, the brush is completed and is ready for use.

It is always an idea to keep a back up of your brushes, whether it is in the brush back format (.abr files for Photoshop) or in .jpg format just in case Photoshop resets the brushes. I keep a folder with them in .jpg format myself.

This leads to the last few steps, or sub steps. As you can see in the above image some of the brushes have a grey background to them, this can cause issues when you are using the brush, as the grey background will show up like so;

This easy to fix.

Step 7

Starting with the original image used for the brush (if you no longer have the original image, you can select the brush to fix, set the colour to black and paint it onto a simple white background).

Step 8

Now we alter the contrast to make the grey background white, to do this we go to Image -> Adjustments -> Brightness/Contrast. We up the brightness a little so the background becomes white, we then edit the contrast to make the black parts of the brush black (as they may turn grey when increasing the brightness), being mindful not to increase the contrast to much otherwise the edges of the brush become jagged.

Click ok, save the brush again, delete the old one (if there is an old one) and you will be good to go.

This tutorial will explain how I achieve the effects used in my stained glass window work. This tutorial is very simple, when creating work I spend a lot more time tweaking the settings and filters until it looks right to me, but this is the basic steps I take:

Step 1

Usually I sketch out the design I want in Photoshop, but in this case we are using a simple cross shape, so I skip the sketching and move to creating the blocks of colour. Occasionally I use gradients in the colouring of the glass just to keep things interesting, in this case all the colours are gradients.

Create a new layer and block in the shape and colour you want to use.

Step 2

Usually I draw the frame out with vector tools or with custom brushes, in this case the frame is simple. Duplicate the layer you created in step 2, hold ctrl+u and in the Hue/Saturation screen shift the Darkness/Lightness slider all the way to dark, the layer should be black.

Step 3

Using the Marquee tool, cut away the black layer to form the frame.

Step 4

Now for the textures, I keep a texture file and custom made texture brushes for these kind of things, but you can search google.com for textures. I find that rock like textures are best, if you copy them to a new canvas in photoshop, press ctrl+u and open the Hue/Saturation box, slide the Saturation all the way to the left (making the image greyscale). Now you may need to go to Image -> Adjustments -> Brightness/Contrast and tinker with the settings to boost the detail of the texture. Once this has been done, we will make it a brush by going to Edit -> Define Brush. Save the brush and select the paint tool and the brush we just created, and select the colour white.

Now on a new layer in our window file, paint the texture over the window. Duplicate this layer and invert it (ctrl+i) then we need to flip it by going to Edit -> Transform -> Flip Horizontally.
We should now have 2 texture layers one white and one black (make sure the black layer is above the white one).

Step 5

Select the white texture layer, set the layer to Overlay and the opacity to 77%.

Step 6

With the first black texture layer, set the layer style to overlay.

Step 7

Duplicate the black texture layer again, set the layer style to normal, the opacity should be 100%.

Step 8

Select the eraser tool, set the brush to 200 pixels soft edged. Use the [ or ] keys to make the brush bigger or smaller, the brush needs to be able to sit in the middle of a section of window with a gap between it and the frame.
Erase the center of the texture, leaving the area’s around the edge of the frame in tact.
Then adjust the layer opacity to taste.

Step 9

Now back to the frame! First we double click the frame layer and when the blending options come up (you can also click the right mouse button and choose blending options) we choose the Bevel/Emboss option, tweak the settings until you feel the frame looks right (in this tutorial we just used the default).
Next we apply a filter, go to Filters -> Artistic -> Plastic Wrap up the detail and smoothness a little and ok it.

Step 10

This is an optional extra, I have a thing for detail, so I add weld spots to the window as well. To do this I duplicate the frame layer, open the blending options and, keeping Bevel/Emboss on, add Stroke, set to black and 1 pixel wide. Having done that I proceed to erase the layer, keeping the area’s in which the frame joins with another section (or bends sharply) from being erased.

Step 11

Next we tinker with the Contrast of the layer by going to Image -> Adjustments -> Brightness/Contrast and upping the settings to make the welding look brighter and more silvery.

Step 12

Once that is done, we apply a Plastic Wrap filter to the weld layer (Filter -> Artistic -> Plastic Wrap).

Step 13

Now we tweak the opacity of the layer so that it blends with the frame layer yet stands out at the same time, to give the impression the welding is there without it being to obtrusive.
Also added a little lighting effect to the frame layer by going to Filters -> Render -> Lighting Effects. I change the light type to “Omni“, then in the viewer to the left I move the ring of light to where I wanted it to be (in this case it was the center of the window) and clicked ok.

And there we go, as I mentioned I usually spend a lot more time tinkering with the various filters and what not as I am creating a window to get the desired effect.

Here is an example of one of my finished pieces that has had more time put into it, Photoshop is a pretty powerful tool which has some good effects that can be applied to work.

Given that people have been asking me how I create my Uru Live Episode wallpapers I figure I would knock a quick “tutorial” together to explain and show the process of creating my new wallpaper for the episode “Familiar Voices”.

The process for each wallpaper is a little different depending on what the wallpaper is going to show. I should also point out that I use a lot of customized brushes, textures and what not at times (none of which are involved in this tutorial).

This tutorial uses Photoshop 7.

Step 1

Upon reading the brief paragraph of text GameTap release for the episode I tend to visualize a concept pretty much straight away, this concept can be the entire image or just a single aspect which sparks the image to evolve as I am creating it.
In this case the term “face from the past” jumped out at me and I visualized a figure completely in shadow extending a hand, it was this hand that is the only part of the figure that could be seen correctly. This was in part to do with the fact that we don’t know who this person could be so I wanted to keep it vague.

I hop into Uru and grab a screenshot of a random avatar in the position (or as close to) that I want.

Step 2

I erase the background of the image so that I am left just with the avatar.

Step 3

I then duplicate that layer so that we have 2 of them, one on top of the other. I select the top layer, then bring up the Hue/Saturation options by pressing “ctrl+u” I set the lightness/darkness slider to dark so the image is completely black.

Step 4

Having done that, with the top layer still selected I select the eraser tool and select a soft round brush of 100 pixels I then proceed to erase the right hand on the image allowing it to look as if it is blending into black.

Note: The grey blob on the relto book is where I accidentally erased part of the book and wasn’t paying attention to the colour picker as I tried to patch the mistake up, the blob vanishes in later steps when I adjust the darkness again to get rid of it.

Step 5

I then combine the two layers in to a single layer. Having done that I open the .psd file of one of my other episode wallpapers to use as a template, in this case I used my “Scars” wallpaper file.

I then copy the avatar image over to the new canvas, and change the text from “Episode I Scars” to “Episode III Familiar Voices” (making a note to correct the typo from the GameTap release).

Step 6

Now that the initial concept has been completed I found myself a little puzzled on how the rest of the image should be completed, I still wanted to use the same symbology applied in the previous wallpapers. I decided I wanted to use Bahro in the image, and an image of an arena to promote the Jalak Age (which is an arena).
I browsed my folders looking for Bahro and Laki’ahn images which would contain exactly what I am looking for, in the end I had to search google.com and Patchallels excellent site for the images I was looking for.

Step 7

I erased the background on the Bahro images I decided to use, so that I was left with just the Bahro. I copied these over from the canvas they were on to the wallpaper canvas.

Step 8

I then turned to the screenshot I was using of the Laki’ahn Arena. Using the Clone Stamp Tool I removed traces of Esher and the Bahro Tablet from the image. I then removed the background from the arena so that I was left with just the arena structure.

Step 9

I copied the arena screenshot over to the wallpaper canvas and arranged the layers to what I wanted them to be, so that the Bahro and avatar were on top of the arena. I also flip the arena image and move and resize the figures in the image so that they look in place on the arena. Having done that I adjust the darkness of the Bahro images so they fit in better with the surroundings being mindful to keep one Bahro looking darker (to represent the “evil” bahro) and one lighter (to represent the good Bahro), by using the Hue/Saturation option again (ctrl+u). I then used a regular hard round brush of 19 pixels and on a new layer, set under the layers of the Bahro and avatar, painted in the shadows under the figures feet, going to Filters -> Blur -> Gaussian Blur, I set the shadows blur settings to what I thought would work, I then moved the layers opacity to match the shadows already on the arena image.

I also noticed that the edges of the Bahro were looking a little tatty from the areas I had missed when erasing the background. To fix this I selected one Bahro layer, double clicked the layer to bring up the layer properties screen and picked “inner glow” setting the colour to black and the style to normal, I then adjusted the opacity until it looked right. I did the same for the second Bahro layer.

I then opened up a picture of the D’ni cavern to use as the backdrop behind the arena.

Step 10

I place the D’ni image on the wallpaper canvas and set the layer order so that it falls under the arena layer. Not happy with the view that can be seen I mirror the D’ni image so that it shows the city proper instead of Ae’gura.
The arena layer was darkened using the Hue/Saturation setting so that it fitted with the rest of the wallpaper, the area behind the avatar was darkened even more by painting over the area with a 19 pixel hard round brush and black paint. A Gaussian blur was added so that the edges of this area bled into the rest of the image, the layer opacity was then tweaked slightly so that the detail of the arena could be seen.

Step 11

Having finished the main portion of the image, I decided to add some texture to it, I browsed my texture folders looking for what I would like to use, before settling on a rock texture from Ahnonay. I then tiled the texture over the entire canvas.

Having done that I set the layer style to “overlay” and set the opacity to 65%.

Step 12

Having finished the wallpaper it was time for a few cosmetic changes that I wasn’t happy with. One was the font colouring, I had intended to have the font alternate between each wallpaper using gold and white, however the gold text did not look right with the orange of the D’ni image behind it, so I changed it to a white/grey text instead. It was also pointed out that the Bahro’s eyes did not look blue enough, so I created a new layer over the top of the Bahro figures layers, opted for a hard round brush with the size set to that of the eyes and changed the paint colour to bright blue. I then proceed to paint each eye, having done that I set the layer style to overlay allowing the eyes original detail to show through the blue.

The file was now saved and finished ready for posting.

Wallpapers for this episode and the past episodes can be downloaded from here:

• Uru Live Episode Wallpapers

Wallpapers are one size only at the moment, sorry.

I’ve often thought about which would be the best way to structure CSS, which would be the most beneficial way to make finding and editing quicker and easier.
Not to mention it may need to be easy to find for others using the style sheet for example.

Currently I style my sheets grouped in to sections; structure style, text styles, image styles and so on. Within each of those sections the elements are grouped in terms of their placement on the site (header values are at the top, content values beneath that, footer values at the bottom).

I had been considering using a different format of having the style sheet structured by elements then within each element section having all the values for that element.

The problem with this format is that I seldom see it used on sites, which makes me wonder if it is one of those “web design no-nos”. Having said that I did discover a WordPress theme which uses this formatting for the CSS which you can view here: CSS.txt

Perhaps the size of the site could be a factor here, if you have a small site with minimal CSS values then you wouldn’t need to be concerned so much with using the structuring provided in the example. However I do believe this kind of structure would be greatly beneficial for The D’ni Jazz Club which has a pretty large style sheet which has gotten muddled and confusing as I have added in test values that have ended up staying but not in their designated spots.

I am curious as to what the thoughts are of the fellow designers who read this blog are.

And the joke? Well that would appear to be the half a million pound logo for the 2012 London Olympics.

Half a million pounds for a throw back from the 1980’s, what were they thinking? You could find dozens of people on the internet that could give you a better logo, heck some of them would do it for free too.

Now personally I happen to prefer this logo created by James Wren

Or even this one by Jason Wilson:

Both of which have more of a timeless feel to it (keeping in mind the Olympics are not for another 5 years, so the logo needs to last till then at least), but not only that, they are clever in their structure especially the one by Jason Wilson which plays on the logo for the London Underground.

I have been finding lately that the applications I enjoy using seem to loose something upon receiving an upgrade. New features are added, things I would never use (and sometimes wonder if anyone would use) and eventually the neat little application becomes this bloated thing that just doesn’t inspire me to use any more. I am sure I am not the only one who feels this, infact I know I am not, one of the key points to Zenphoto being created was an answer to the bloated gallery software you find floating around.

I have been having this issue with Wiki software, a lot of it is insanely bloated and just a pain to use. Now I can understand that Wiki’s can be complex in structuring and so you are probably going to get a lot of coding going on there, but there are some “light” versions around that don’t seem to fall prey to this issue. I have tried countless versions of Wiki software to find something that I like, I admit I am being a little picky but I need to know that it can do what I have in mind without hacking into 50 different php files to do so. Ideally what I would like to see is someone like Automattic take on the Wiki area. The format that they use for both WordPress and BBPress is something I would like to see in a Wiki. A simple installation and customization of themes, and the use of plugins for extra options. Especially with a rewrite for the urls, which has been the draw back of the light Wiki software I have used, I want more control over the urls.

A guy can dream.

It has been around 6 months since Tristan last released a verson of Zenphoto, and they we get 2 builds at the same time (ok so build 1.0.4 had a problem with short tags). I am exceptionally happy because with these builds comes a “stepping stone” to the implimentation of subalbums, a feature I have been greatly impatient to obtain.

It has yet to be fully implimented yet (which is apparently what will happen with buil 1.1) but the features are there for testing which I shall be experimenting with later. I might go ahead and upgrade the albums on DJC to use the new build if all looks well.

The Optimus keyboard was looking pretty sweet at one point, back in the day when it had colour keys, and a nice group of “launcher” keys.

I like launcher/shortcut keys, I have them on my current keyboard to copy and paste, launch firefox, pause/play/control volume of media players. So being able to program these keys on the optimus was looking good.

Alas, over time the extra keys were removed, the colour display was changed for black and white they even cut down the screensize. Apparently this was done in order to cut down costs, so I am not quite sure why they are going to sell it for $1,200. Doesn’t seem like their cost cutting measures helped much.
What it did do is cut my interest in the keyboard, when they decide to impliment the features orginally billed then I’ll be happy to take another look at it and see where we go from there.

I’m dissapointed.

Recently chucker mentioned in his “Remix” post about the tagline in wordpress, which states “Code is Poetry” and ventures the possibility of Code being Art.
This leads me to wonder if Code is Poetry what does that make the Kubrick style sheet? A Haiku perhaps?
I was wondering if I was the only one frustraited by the messy CSS code of Wordpress’ default theme, but as it turns out I wasn’t.

So I decided to do something about it, I went through and removed all the conflicting values (duplicate values) and added a few more to make customisation easier (some people know how to change values but not write new ones). I wrote this sheet in a structured way that I find works for me, not sure if others will find it usable as I can never tell if my CSS decent enough for people really. So here it is;

• Kubrick Style Clean (.txt format)

As chucker points out, Kubrick is third party and so doesn’t really fall under wordpress’ “Code is Poetry” line, this of course would depend on whether the line itself refers to just wordpress code or code in general.

“..and I told him you were a perfectionist and you were always working on better ways to make your layouts.”

Jennifer is quite right of course, I am a perfectionist, I never used to be but I am now. Nothing I design seem good enough, I might like it first off but after a few weeks I am looking at other design concepts to impliment instead. It is almost like one is addicted to designing sites, I do not think I am of course but work on my sites never seem to end.
Take greyskiesstudios for example, now this is my online portfolio site previous layouts have been, in my opinion, lacking in a professional look about them. So after browsing the internet looking through what the fashions are on the internet I realized that most of the “web 2.0″ gimmicks when utilized in more contrasting colours that aren’t whites, light greys and violent pinks or blues, can actually bring a “professional class” to a site. Whether this site is deserving of the “professional class” or whether it attaches the illusion of remains to be seen. So like the traitor I am, I embrased gradients, shiney images and rounded corners (although rounded corners are not really a gimmick in my opinion they can add some much needed dynamics to a site) in the bid to make my site look professional. In doing so my site lost some identity, it became another site on the internet that looks similar to countless others.
The site needs to serve several functions in my mind, it needs to be professional, it needs to say “this guy is a genius hire him”, it needs to be easy to see what visitors want to see and it needs to have some degree of personality attached to it so it can give potential employers an indication to who they are hiring. Well what about having an “About” page for people to see some personality Tweek?
Quite so that could possibly do the job, however when you take into account the following it might not be so good for everyone. First off the attention span of the regular internet goer is very short, some say with online marketing you have approx 6 seconds to generate interest in a product, so would someone be willing to read through a long about page. Of course this can be countered by having a short and simple about page (my current one is very short and isn’t actually very informative but I shall get to this in a moment). The second factor is the site owner themselves, I personally don’t like talking about myself in a positive light as Jen can attest to. So writing about myself, what I’ve done and accomplished is not an easy task, infact I find it almost impossible. So I think expanding ones personality into the site design itself is a good way to get across an indication of what the site owner is like.
My problem is finding that balance, finding a layout that ties in with the sites name, looks professional and contains personality.
This explains why I want to redesign greyskiesstudios again, but what of my other sites? DJC for example the new layout is done and the site isn’t fully uploaded yet and I have been thinking of changing things, perhaps theres a different reason for each site.