Easy to follow steps for making a bespoke low-maintenance website using PHP include

So… Lets make a easy to maintain bespoke website.

Test tube graphic vector.
Using PHP include will make maintaining a larger bespoke website much easier.

Maintaining a large bespoke website can be very time consuming.  Using “include” can take the website to the next stage of modular design.

Imagine having to write 1 line of code into a ‘php’ file instead of having to copy & paste the same piece of code across 70 or so pages, worse still… imagine that piece of code had a typo – across all 70 pages! You would have to go back and amend all of the pages and it would be a costly waste of time!.

Using PHP include can reduce the time consuming method of copy and paste, shorten time and take your website to that next stage of design (Or look at a CMS system but that is a different topic). With the php Include method, the information you amend in one file can change across multiple webpages with a simple save and upload. To name a couple of ideas, you can use this method for navigation, footers, banner adverts and much more. I cannot emphasise how much easier this will make your life when working on larger projects if you must take the bespoke method. Change once to update many!

It will save hours!!!

Getting start with PHP include

As a basic example we are going to make a footer. We will have a master or ‘main’ document that will  “include” – pull in, integrate, import a file from your website.

This tutorial/experiment will assume you already have prior knowledge of setting your website up with root folders etc, if you need some more help with this please follow these tutorials.

https://helpx.adobe.com/dreamweaver/how-to/first-website-part1.html 

Or PHP

http://php.net/manual/en/tutorial.php

You Will Need: 

– The main file (The parent/master)
– An external footer file (why not add some styling to your html?)
– one line of code, which you will embed into the parent folder.
– A space to upload/test your experiment. (domain and hosting)

Stage 1 – Parent File (Master)

The ‘Parent’ (master) will pull in the external files to construct the page. in this example. The master will have some code in the bottom of the pagethat will say ‘Hey footer, you included down here’.

Why not call your parent file ‘master.php’

This image shows (with straying CSS, bleurgh! sorry an old image ) the master.php and Product-footer-test.html working together… or popping out of the bottom. 

PHP include shown in image - demo of a PHP include
This is a master file and a and external footer.html / or PHP working in conjunction.

Stage 2 – Footer File

I have used the footer in the example. This area of the website at my previous company used to have frequent updates, with new products being added constantly. As you can see, all styling is added to this queasy example with the accursed table by using CSS – the image below is the bare bones of the footer file – no bells, no whistles! ( Why did I use the horrible table back in the day… I groan).

If completed correctly, changes or modifications to the footer file, will be included in the master file once you add the “include” piece of code to the master file. So what you change here (the footer file) will be visible once you come to uploading all of the files and testing the file.

How you treat you footer is down to you, this tut is here to show you the principle.

A very simple PHP footer include image. Show how it can work for your project.
A bare example of a footer files – you can write and external CSS file for this to give it some magic or use inline CSS styling!

Stage 3 – The Simple Piece of Code to Paste Into Your Master PHP file

The image below shows in red where the piece of “include” code sits. So, imagine you have made a hollow space on your webpage, in the hollow space you are going to add this code to the bottom. As shown. 

1 line that could potentially save you hours!
Its just 1 line of code… 1 line that could potentially save you hours!

Product-footer-test.html”); ?>

The line of code above which has been inserted into the bottom of your master file will call on the footer module and all of its elements.  Once you upload your files you can see whether the footer has worked! Oh and check you have saved everything!

The visual diagram below will visually show how the principle works – leaving aside how the coding works for the PHP include.

Summary of PHP include in action

Parent, Child, Footer... How PHP include works for designers
This is a image of what is happening with you PHP include!

In a nutshell. You have a the parent (the main page) and a child, in this example it was the footer. 2 elements talking to each other. Thank you for reading.

Hey, need a hand with your website?

There’s other methods to get the results you want which may be even more effective if you are a non-coder. You can use a web builder, a CMS or something else. If you would like help you can find out more on the design website

Easy Techniques For Reducing Banding / Posterization in Photoshop

Posterization – Effective Techniques For Reducing Banding! 3 simple tactics

Are you look for a way reduce the rings in your artwork in Photoshop?
Are you look for a way reduce the rings in your artwork in Photoshop?

Banding in PS – What is it?

If like me you work as illustrator/designer, I’m sure you will have run into the dreaded banding aka Posterization If so, I will go into detail shortly. Please note; this is told from an illustration and design bias.

Illustration in Photoshop has been a blessing for me. Edit, undo, save as, copy, paste, re-colour artwork the list goes on. This issue comes when working with radial and linear gradients and tones of black and grey. Working with a lot of black and orange as part of the colour palette, I have had to figure out ways for dealing with or working around banding. For example, when I’m rendering characters like Rufus the rat, he has grey body with even darker creases in the body, getting the shading and highlights to blend hasn’t always been easy – banding has been a big issue. As it stands, I’m still uncertain as to how to get a completely smooth finish when rendering by work with a grey and black tones. I can offer some methods for reducing this so called ‘banding’ effect and the bane of drawing Rufus. 

My Setup 1 : New Document ‘I like RGB’

From the off, I have tested this on Photoshop CS5 and CC with similar results from version to version. 64 bit – 32 bit RGB to CMYK I’m not entirely sure if this has an influence aside from whether you are working with 8 bit, 16 bit and 32 bit; the later offering marginally tighter rings and hues. For this example I have worked with A 300 DPI document, in RGB using 8 bit (this can be changed later) also with the colour profile listed below on an iMac. This is by no means a significant contribution to the final out come but maybe worth noting.

Setting your photoshop file to 32 bit
Caption of colour modes

‘tangent alert’ Using RGB in the early stages is my preferred method, not everybody’s. “Isn’t this madness? You won’t see the genuine colours of your artwork!” Well unless, your screen is calibrated exactly and your using pantones, guaranteeing what you see on the screen to print can be tricky anyway. Besides, I work across both mediums of screen and print. 

Method 2 :  Ultimate Trick – Brush & Noise

Assuming that you are running into this issue whilst using a soft-edged brush tool in Photoshop, I would advise turning the noise’ on under the brush panel (as shown – press F5 bring this window up) this helps in the blending of steps with greys as shown below. As far as I can tell, based on my work, this improved the overall smoothness and graduation of the tones from light to dark regardless of bit mode or any other. You can also dabble with the filters if you are using large radials (That would be a different article). 

As you can see below, the black brush at the top has rings (banding) and the one below has far fewer the brush used on the lowest part of the blob has noise switched on. The speckled effect will be less obvious once you take your artwork to print

Blending colour steps in Photoshop
Look in the top left the brush, notice how you can see the steps / rings. This is much less obvious in the lower part of the black blob with where I have switched noise on

Method 3 : Big to small, playing with scale


Another trick for tightening this banding is by shrinking/scaling down your completed artwork. When you have applied the ‘noise’ and finished the process you can physically shrink the image to hide some of the messier details – an illusion essentially.

This is a method that I have used not only to disguise banding when digitally painting but also to give the appearance of tighter line work and detail in photography and illustration

Step 1 piece of art = 100%
Step 2 scale art to = 75%


When you print the document some of the details and blemishes are hidden away from the naked eye. This approach can also hide some of the rings in banding with added element of noise! Combine all 3 steps really scrub out the bands if you are having trouble on the screen or when you print.

Otherwise your hard could look like a dirty spill stain.

Conclusion
You will see the benefits for this when you come to printing your work, especially if you are working with shades of grey.

To summarise – Add noise to your brush mode.

The methods above were used on this character – Copyright Satzuma LTD

If you need help with your latest design project or need some tips free to find me on twitter!

This was originally written and part of my personal blog. 2015

How to get the black you want in print! Some tips and tricks to help

Working In Black In RGB & CMYK

The Great Black

Black can be a trouble to work with when it comes to print, especially with all of the varying print processes, paper finishes and general variations with commercial printing machines, inks, screen calibrations and so on – working with a black is a headache and I’m sure many others would agree! So, I have put together some tips and tricks to assist with your projects – it can be a dark and treacherous path. This post will mostly focus on creative approach rather than the pure technical aspects of Black ( K ). Working with 4 colour printing and spot colours is a detailed topic in its own right which is worthy of a post.

Illustrators, painters, artists and photographers

If you are a designer / work in print skip this paragraph!

Firstly, does it really need to be BLACK? When I say does it need to be ‘Black’ are there many things in the real world that are completely black? Aside from an all light absorbing, all-life-drinking black hole that absorbs all light and colour? Besides… that’s something that;s not of our world as far as I’m aware. Looking at the world around you, you will see come to see how lighting, surface, atmosphere and texture will absorb surrounding colours, including what you would what you would call a black surface. For example, someone is wearing a black t-shirt, more often that not if, even if it is new, light will catch on the folds, the creases and the contours of the fabric giving the black fabric a slight hue or tint depending on the light source and ambience.

Study things! I like to look at surfaces and objects that have an interesting finish for example : gloss surfaces, bottles, matte paint, skin, fur, hair, shadows, animals, sunglasses, cloth, etc. Another good source of reference of how to use light and dark with dramatic effect is Chiaroscuro – do some research online – research Caravaggio (one of many artist’s using this approach) and see what comes back. Caravaggio used light and dark with excellent dramatic effect framing the narrative in light and shadows. This is potentially subjective but hopefully… it will be food for thought – if its jet-black you’re after then please read on! ( I have attached a little image below with some dark but not black shading )

This image shows how tints shades can show some almost black can work. Most things are not strictly jet black

RGB BLACK… A HACK

A Preference

Typically, I like to work in RGB first and then convert my files to CMYK afterwards, especially if I’m working on a bitmap illustration or digital painting. Why? Because working in RGB generally gives me more creative freedom in the beginning and it also allows me to move between digital and print at a later date anyway. This is a my preferred method when working on an illustration and by no means a rule, just a preference. I’m not the only one working this way. By doing a Google search I stumbled upon a commercial artist who also likes to work this way – this writer and artist goes into much greater detail about the in’s and outs of color channels on their blog. I recommend having a read at some stage – perhaps after you have read my post.

(http://muddycolors.blogspot.co.uk/2011/08/printing-your-work.html)

Unexpected Results – Designers a pleasant accident

I was always taught to work in CMYK for print and RGB for digital. I still champion this for working with professional printers as trying to print from RGB file may produce some erratic results, be it for leaflets printing, flyers, and other mediums. I accidentally ran a test print from Photoshop in RGB (Thinking it was CMYK) and the results were far more superior than the CMYK version. Both were printed on the same satin finish paper, on a Canon Pixma A3 with an impressive result. Despite my efforts and tinkering with the levels in the CMYK version to replicate what had happened In the RGB Version, I couldn’t produce the same results. I will make an assumption that my Inject printer translated the RGB to CMYK and just knew what I was after. I can’t complain too much as this project was sent to print and retained all the vivid colours and strong black colours.  Saying this, I still recommend trying to stick with the CMYK for design and print despite this result as this is typically what is asked – best to be safe, but something worth exploring for the future.

Digital Black Colour in Photoshop – Add a Hue

Unless your are working in RGB and your artwork will remain for screen (digital) only. Then may be best to work with ‘Designer Black’ check the numbers. Although the computer says it black (or you’ve had it calibrated) it is best to drop a bit of colour into the mix – and do test print it.

Photoshop Colour Palette
And Example of using the black in the colour palette

Last Round Up Hacks!

  • Take Notice of the colour warnings when you are in the colour picker window. This could save a lot of headache later on. (Yellow Triangle)
  • Let the printer do the leg work. Send your artwork to the printer and try to let them help you. A printer worth their salt will want to help you and have your return custom. To reinforce your expectations, send them a physical sample from your home printer – assuming you have a good quality home printer.
  • A HUE, if you are working on an image with a lot of dark areas why not add a little hue / tint of colour? 20% cyan for example or some magenta/red for a warmer image.
  • Avoid working with 0, 0, 0, 100 K, as this best reserved for font/text printing and can your work charcoal appearance. Use a ‘Rich black’ or ‘designers black’ instead. 20, 20, 20, 100 k for example.
  • Avoid 100, 100, 100, 100, CMYK as this is reserved for crop marks and using this colour can drown the paper – no one wants drowned paper!
  • Don’t be fooled. Your screen can be way out of the sync with your printer. Do some test’s first and see what results come from your printer (even printing on your home printer cannot guarantee the finish you require when you send your work to print) So take note.

    Yes… black can be painful to work with! And can be tricky colour to tame!

Thank you for reading how to work with black in print!

A quick and dirty trick for making a Photoshop brush

So… how to make an easy Photoshop brush in 5 simple steps

Ever wanted to make a Photoshop brush? It’s fairly straight forward, this little tutorial will have you making your custom brushes in no time!

How to make a very simple photoshop brush

You will be defining a brush, adding it to your palette and then, all going well, using your newly defined brush in your projects! Lets draw a shape on black on a white background shall we?

1 ) Open Photoshop and make a new document – 300 x 300 px and 72 DPI for good measure, make sure the background is set to white.

2 ) Working in black and white (Shortcut ‘D’ for black and white) draw your brush shape (in black) onto your new document. Remember your brush shape needs to be dark /black when you come to creating your brush. For the sake of this little tutorial I have made mine a solid brush. Little splat below and yes feel to use it in your project.

How to make a very simple photoshop brush 1

A free custom Photoshop brush!
Photoshop Brush

3 ) Either by using the marquee tool or Apple + ‘a’ to select all (CTRL + A for windows). If you have selected the brush you want to define, you can go to the next step! 

4 ) Go Edit > scroll down to  ‘Define Brush Preset’ and click on it!

5 ) label your brush, I called this one blob’.

New custom Photoshop brush
Your new brush in the palette

Well done, you should now have designed your very own custom brush and saved it to your library.

If you press F5 to look at your brush palette, you will see the brush you have just made at the bottom of your library. Why not open a new document and test out your newly created Photoshop tool, make ink splats, draw faces this is just to set you onto the path of making more awesome brushes.

Photoshop brushes

Thank you for reading, if you would like some help with a project in Photoshop you can always drop me a line! Freelance Photoshopper!

How to make a very simple photoshop brush

Other post that may help you with photoshop:
Quick layer short cuts
Drawing in Photoshop + Stylus
Reduce Banding in Photoshop

Beginner Freelancer Hints & Tips – Book keeping and Clients (UK)

General tips for creative freelancing.

I have been asked questions on a couple of occasions about topics aside from being a creative thinker. I have worked with a couple of clients from all shapes and sizes and I am now going to offer some points from my own experiences. So I hope this helps.. (please excuse my poor spelling)

1) Agreement / Plan – Before you jump into a project make sure to get some form of written agreement to the client declaring what it is they will get for their budget in concise – detailed – bullet points, this will prove to be invaluable to you later on. A written agreement in the early stages lays down a project plan and what the client will get for their money and time. You don’t want to surprise the client at last stage with over spending their budget and ignoring their needs.

Agreements will also protect you as the designer from “feature packing”, feature packing is when a client would ask you to produce one poster for the same budget and then somewhere in the middle they try to slip a business card design or and extra webpage without wanting to pay for the extra time. Be careful about verbal agreements too, I have agreed to a project with a vague specification from a client only for it to back fire at a later date, make sure to talk it through in some detail first without dropping the final price into the conversation.

Don’t : “Hello Jeff could you design a booklet for me” and of course you’d jump at the opportunity and say “yes, great will do for £20”. Great, done and dusted….that quick, you’d be lucky. You will find yourself in probable situation whereby the client keeps changing there mind, adding elements to the project and continuous criticism about the the project. You don’t wont to hear the words “that’s not what we have agreed”, because that’s what you said on the phone, remember? That’s an example of being too quick to take the project and not talking it through. Do : “Could you design a poster for me?” “yes, what size, when, who, colours, time scale, budget in mind”? that is a rough example.

In the event you don’t talk it through, you may get these freelance symptoms : Loss of trust from your client, time consumption, delayed payments, loss of future projects, a headache, foul language, muttering under your breathe, morale.
So : Get the written spec if possible> Discuss > Plan Declare > Agree > Begin

2) Deposits – There are many valid reasons for asking for deposits, make sure to tie this into your agreement.
A deposit can act as confirmation for a project, this will guarantee your client is serious about investing into your time and skill. It will also confirm the start date for a project and you will find the project moves quickly. If a client starts to foam at the mouth about paying you a deposit I’d be weary, It could mean they don’t have the money, or don’t want invest in your time and effort. (Please only use this part as a guide, some companies may have a policy where they only pay on completion, use your instinct. I find this works for me.)How much is down to you.

Perks of the deposit are as follows : Acts confirmation for you and the client, pays for you to work through the project, protects you if the project is canceled, could keep you going until the far off completion date.

3) Price – Take into consideration what your price could be saying about your service, although many clients may want something for cheap this can also work against you (the designer). Could knocking the price down to %20 (or cheap by the current market) mean you are desperate, inexperienced or easy pickings? possibly from experience, by all means don’t be greedy, but don’t be too be cheap either. Being too cheap can say you lack confidence in your workmanship and will work for anything.
(If you are a graduate have the take it where you can get it attitude, if its good for the folio.)
Type into Google “salary calculator” or sign up to designweek.co.uk, better still, buy a design week and feel the printy paperness between your finger tips!

4) Book keeping – Always keep hold of your receipts, bank statements etc. As a freelancer you will need to fill out a self (assessment) form ether digitally or printed stating your earnings at the end of the tax year (April – to – April). Please take into account if you a you have a paye job, this will also add to your total earnings. Take into consideration at an early stages of freelancing and store some money to to pay your taxes and national insurance contributions, even better save your self some hassle and get an accountant.(I really should do that)
Type in self assessment in the revenue and customs website all call their hotline to talk to someone who knows more about the accounting side of things.

5) Communicate – This may sound like a cop out, but the “communication is the key” (or what ever) cliche really is the key. Talk to the client and respond to their needs. Take pride and joy in the project and this will really help you shine. The client will also be more will be more inclined to give future projects as you are enthusiastic about what you do .
Think it all through and every body ‘should’ be happy.

I hope you can extract some juiciness from this little article and helps you to avoid bulging temple veins!

Kind Regards,

Jimm