How to create a STEM game or application

To create a digital STEM or E-learning game ‘app’ you will need to make a plan, download software to construct the game and have access to or own software to create the artwork and ‘assets’ for the game. This post covers all of the details on how to create a STEM game or application in a step by step process from software suggestions, to hints and tips.

Blossom Tree E-learning - How to make STEM game
Caption from E-learning game

The steps I used to create an E-learning / STEM game.

This post covers the steps and stages I undertook to create a STEM game or what was then an E-Learning game that could be played on a computer, be it either an iMac or PC.

I would like to mention now that I am not a teacher or a STEM specialist. I took what was a principle and applied it to my game design for a major project. This article focuses more on the creation of the application itself, opposed the focus of STEM subject matter itself. If you wish to read more specifically on the subject of STEM you can find out more here : source

Why Create an E-learning (STEM) Game?

Before STEM was a term I had heard of, I wanted to create an application that was both entertaining and educational for young children. Games or gaming has a bad rap for being mindless and many are (I do like a mindless shooter as much as the next person). I was also a fan of the classic puzzlers growing up such as Monkey Island and Fate of Atlantis.

I wanted to create a fun purposeful experience through the medium of gaming that will help children.

And…

When the project was assigned to create a big experience I wanted to create a game that would utilise some of my existing skills as a young designer and illustrator (as a student) and create a product that I would be proud of. I wanted the E-learning game to have engaging puzzles and characters that would pull the children in and compel them to explore through the levels. They also had a mission, they needed to save a friend.

Illustration of a crooked castle for an E-learning game
Crooked Castle for E-learning

About this E-learning game – Blossom Tree

The game was aimed towards children aged 7 +. As the player progresses through the game, they would have to answer questions of varying difficulty until they arrive at the final stage and save their friend. There were 2 main paths that had 2 types of questions.

  • Path 1 = Sums
  • Path 2 = Spelling

    It should be noted that you can pick any of the core STEM subjects for your own project.

Both paths converge at the end to logic and problem-solving questions which broke format from traditional ‘yes” and ‘no’ English and maths.

Black game background for e-learning game.
Blank background for level

The steps used to create the E-learning game whilst adopting STEM

After studying design this was my first venture into developing websites, apps and 2D games in Adobe Flash. From the start, I planned the project from the look and feel to how it would play. I also made a level randomiser but the concept ran into technical difficulties late into the game development – get into your “white boxing people” please. It is such a valuable stage for the process. I have mentioned in detail below what “White boxing” is.

1 ) The idea for the E-learning Game

Sounds obvious, but the idea was an important step. I had a vision and idea for what I wanted the game o achieve and how it may look! After developing a viable idea I set about doing some research online into “pedagogy” and how it could be applied to the design of my e-learning game.

2 ) Game Objectives – “The Mission”

So you have an idea, now what do you want it to achieve? You will need to consider the age range for your game, whether it will be for all educational subjects or will it just 1. If this going to be for free? Etc. As a teacher or somebody looking to make a STEM game grab a piece of paper or open word and start jotting down what you would like your application to do for the world.

3 ) Planning your STEM / e-learning game

Great, so you have established what you want your game to achieve and what will happen in the game. I approached a more narrative approach to my game which lent itself well to word challenges and maths questions. If you are making a Science themed game maybe you could have a lab and you need to find the secret ingredient for a concoction? Of you have calculated sums and outwit an evil computer! The ideas are endless. Start to the application – you game, how many levels, how many characters, sound, animations, and try to do a rough cutting list of what will need to be created. This may change as time goes along.

* note: the more ideas you have the longer it will take finish

Basic Level map for gaming app
Level map for game

4 ) Your Game Project Timeline

If this is your first venture into creating a game project it’s tricky to gauge how long it will take to create a fully-fledged game. If you are building it all yourself – and learning all of yourself it could be a steep old slope = a lot of time. None the less, in order to get your STEM game live you need to set up milestones. I would advise breaking your milestone down into smaller steps if not for timekeeping, then for your own morale.

So, with your idea ready and your research finished and plan set to be into motion. Now is the time to roll up your sleeves and start building. The next set of steps covers the more technical steps for getting started.

Technical steps on “how to create your STEM game”

The game that you see displayed was created by me in Adobe Flash (See product here). To create this game, I had learned how to code in a language called “Action Script”. Action Script is what made the nuts and bolts of the game tick, from the scene transitions to the answers boxes checking to see if the question is right or wrong. I have attempted to break down the process of making your game.

1) What gaming program should I use? Select a program to start making your game

Example of game engines you could use for your STEM project

  1. Stencyl (great for beginners with no programming knowledge)

    Stencyl is great for complete coding novices. The coding system works similar in principle to Lego Bricks, where you can stack and click together the functions and activities in your game. I have attached an example of what you can do in Stencyl. Or if you would like to, you can navigate to the post here and get an idea of how it works – (Stencyl post, custom cursor) Although Stencyl is good and has merits it has many limitations in my opinion. It should also be noted, that this engine is 2D only.

    Stencyl Code Block Example

  2. Unity Software (great for someone with some coding skills, create powerful games)

    Unity software is everywhere and with large developer communities constantly improving the assets and the software but, be warned – it can have a steeper learning curve if you are wanting to create e-learning or STEM games this is truly a powerful piece of kit. One great advantage is that Unity comes with LOTS of tutorials, assets and game templates to bump up your game into completion.

  3. Adobe Animate (Used to be king of the game makers, still good but not the most powerful)

    The E-learning / Stem game shown throughout this post was created in what was known as Flash. Flash, now Adobe Animate has somewhat fallen out of favour with powerful programs such as Unity bumping it out of top position and accessibility issues for Smartphones driving in the wedge.

    It’s a misconception that you can’t use Animate anymore to create rich-media applications – it’s not true. You can still create phone apps, HTML 5, animations, video indents, and games!

2) ‘White Box’ your game first

White boxing is single-handedly one of the best modern techniques I have been taught in recent years as it can save so much time. When I say ‘white box’ its a case of roughing out functionality and lose the form of your game. Worry about the function and how the game plays first and use place holder graphics in the early stages of development.

One terrible mistake I have made in the past with utilising time is to create artwork for a component (part) of a game that will not work and you end up having to junk not only the component but the artwork/animation also.

Rough it, test it, play it and then make it beautiful!

3) Find a game Artist or Designer

A very important step for your STEM Learning game is creating artwork that will be visually appealing to children (and adults) when they interact with your awesome puzzles. I tried to make the artwork for my game appealing to a younger audience, to keep them engaged in the topic. You can either create the visuals yourself, hire an artist (link) or look for free and open-source artwork and make a Frankenstein monster of moving stock graphics! (yes, a pinch of sarcasm)

4) Test, test again and assess – then develop your game further

Test your game on players that have never heard of it or played it. Although, I have to confess that I had trouble finding young testers and the youngest I could go to was 9 years old. Watch how people play your game and take notes on what you can improve. This is a valuable step, more so if this is being created for commercial purposes.

5) Publish your STEM application / E-learning game

You’ve done it! Depending on the size of your game, you have spent a year, 6 months, 2 weeks and you have published the application ready to go out to your classroom. You have created a game with a purpose that will hopefully help with learning and STEM development. – Well, in theory, you have made it, now you need to put it into practice.

How “I” created my STEM / E-learning game

I have outlined how you can create a STEM or E-learning game based on my experience and playtesting. I have attached a few conceptual details and visuals of the original game – Called “Blossom Tree” which was my first major foray into interaction and game design at the University of Cumbria.

Field Background For e-learning game
Static visual for field

I wanted the game to feel warm, friendly and filled with the freshness or being the outside, you never know – the artwork my spur children to go play outside, maybe build a den. You may also notice in the background there is a twisted silhouette of a castle. That is the final destination for the player.

E-learning game spoiler alert!

(Wilber Worm)
(Wilber Worm)

Speed rounds and classroom chalkboard.

Speed Round from e-learning game
Speed Round from e-learning game. (Do you reckon children will know what a blackboard is 20 years? Probably not.
Castle level Background - getting near the end!
Castle level Background – getting near the end of the game.
The empty end scene
Dungeon

Looking back

I feel I may have constructed this game slightly ahead of its time. This game was created as part of a final major project whilst studying at the Cumbria Institute of the Arts in my final year of study. This would have pre-dated the surge in the smartphone and the tablet technology and well before the surge in digital downloading platforms such as Steam, Google Play, Apple Store, PS4 network etc.

This e-learning game was created to be a web application or CD ROM .exe. The platforms for downloading such games weren’t as prevalent then, whether they existed at all. The commercial standpoint if I was to create this game again I do a lot of things differently.

things I would do differently, for my STEM / E-learning game

If I was to remake this game I would add so much more interaction into the game, maybe some quicklimes scenes, a bit more movement and generally make feel a little less static, but hey, this was my first ever go at making something like this. I look at many aspects of the project – especially on the design side of things and hiss through my teeth or feel my toes curl as some of the aesthetics but still proud to this day to hear this from around the corner.

“This is F*****g ace!”

in a Cumbrian accent. And that was directed at what I had learned, what I had created and I had hoped would be an of a benefit to a few.

The take way on how to create a STEM game application

I hope my project and how to post has motivated you and given some insight on how to create a STEM application or learning game. The process of creating a game such as this can be incredibly rewarding. It can also be a big undertaking and if you need any help or have any questions. Well, you know where I am.

If the found this post on “how to create a stem game application” useful please share. It could be helpful for those looking to create an educational game or something for friends and family.

Jimm – Designer & Developer

Other useful posts

My Services :

External and reference services for topic

Cumbria Institue of the Arts (now known as Faculty of Arts)

About Pedagogy

STEM Information

Speed tips for Photoshop layers!

Speed tips and shortcuts for Photoshop layers!

If like me you need work layers in Photoshop any time saving measure is a bonus. I have a compiled a short list of shortcuts for making the best use of Photoshop’s layers for both the Mac and PC – Enjoy!

(Swap CMD for CTRL on Windows)

Photoshop Layer Icons
Photoshop Layer icons
Photoshop Layer UI
Layer Graphics

Change the layer order,
move it up and down :

  • Cmd+[ Move Down
  • Cmd+] Move Up 
  • Cmd+Shift+] = to move it to the bottom of the stack
  • Cmd+Shift+[ = Move it to the top of the stack

Direct select a layer

With move tool selected (V) hold Cmd to highlight the layers directly from the art board. This will also highlight groups.

Duplicate a layer 

Ideal for copying a layer! Cmd + J to copy a selected layer! Or you can drag the selected onto the ‘New” icon! OR right click and duplicate – A personal fave.

Colour Coordinated

In addition to organizing you layers into folder and groups, why not colour coordinate the layers so you glance at groups? Brown for dirt, green for sea etc. Right click and select a colour.

New Layer Cmd+Shift + N brings up the new layer dialogue.

Cycle Through Blend Modes

Need to see what a multiply, saturation, or overlay will look like on the fly?

Shift + (Minus or plus, top right of the keyboard)

Layer Opacity
With the layer selected you can quickly change its opacity by pressing >

Shift + (Minus or plus, top right of the keyboard)
Shift + 22, 30, 23 (a number from the top row) typing the number in quick succession will change the layers opacity percentage. Hold shift and then press “22” the layer will be 22% “30” = 30 %.

Very handy for digital painting or retouching.

Group Layers

Select your layers and press Cmd + G to group them together. If you are not grouping your numerous layers… you should start. For sanity’s sake.

The original text for this was created and added to blogger in 2016 (Jimm Odell Blog). This has since been tweaked and added to this blog – the professional blog.

3 easy ways to build a website for free

How to build a website for free or almost free image with and arrow point in the direction
3 Simple Platforms Guide

Hobbyist’s, businesses and potential clients… this post is for you!

This post covers 3 simple ways for you to build a website for free, or almost free. This article is ideal for start-ups, hobbyist’s and individuals looking to start small and work their way up with their online presence. All you need is a computer and access to the internet.

This post will cover the pros and cons of each system based on tried and tested experience.

It should be noted I am not affiliated with these companies

How to get your free website up and running | Start building your website!

1 ) Use Blogger

Not heard of Blogger? Blogger (blogspot) has been around for years and is part of Google. With Blogger, you can create your website or blog completely free – today, right now! And yes, it’s pretty easy to use.

Blogger is fine if you are looking to create a simple blog as a hobbyist or put something together quickly for a friend or relative. I have used Blogger as part of my ‘hobby and general stuff’ website which I treated as a creative / personal dumping ground. You can see my personal blog here.

Blogger isn’t solely for amateurs. I have seen great examples of Blogger being used by professional and semi-professionals, despite it being a free platform. Generally speaking, Blogger is used more by hobbyists than professionals.

Due to Blogger’s low point of entry, it is a magnet for homemade, freebie and hobbyist blog creators. Few websites buck this trend with this platform by offering tremendous value and great content.

This website is great example of what can be achieved with some dedication and will power. The website – Print & Pattern – comes with a jobsboard, products and other pieces of information centred around graphic and surface pattern design.

I doff my cap… If I had one!

It might also be worth mentioning that you can also monetise your Blogger very easy using Adsense if you are considering earning some money on the side. You will need a lot of traffic to come to your website before you see anything from Adsense.

Blogger Pros :

– FREE – Blogger is free. You can set up an account today and start writing about your hobby pretty much right away.

– It’s reasonably easy to use – Blogger is relatively straight forward to use. Buttons in the left hand navigation show what is what. All you need to do is Create a “new post” and type away – as easy as that although it is not without flaws.

– Can be polished – with a bit of thought and a lot of application you can make your Blogger look quite professional.

– No fuss – You can set up a Blogger website quickly, you don’t need a coding guru to help.

Blogger Cons :

– Typically regarded as unprofessional – if you are using a Blogger for a business website it can be regarded as being amateurish. Blogger websites tend to have a dated appearance and people can more often than not tell something looks a bit ‘Home made’. In business, making a good impression is important and you want avoid ‘Homemade’. Not all ‘Bloggers’ are created by amateurs but many do use this platform as it is free. If you must use Blogger, dress it well – very well – I would go as far as trying to disguise it otherwise your blog may say : “business run from a shed”. If you don’t expect to make money or use it for business carry on.

Awkward code – know how I said to try and ‘dress it’? Now imagine trying to dress an excited squirrel! Well It certainly won’t put it’s arms into the sleeves and neither will Blogger when it comes to making a pretty post! The code and interface can be very awkward to use if you are trying tweak the alignment, paragraph, bold lettering etc it can reduce you to tears, and crash. It also adds a lot of junk HTML to your article making it needlessly difficult to tailor in code view. Many hours have been wasted trying to make it play fair.

You don’t really own it – Although it is free to use and as a free tool it is pretty good, it’s not your intellectual property. Should your Blogger be closed for some reason you will loose all of your content with it. For ‘free’ you will relinquish control and imagine loosing 5 years worth of posts. Back up your content if you decide use Blogger.

SEO – although it’s not bad, I’m not convinced about it’s friendliness towards being seen by the search engines.

Blogger Verdict :

It’s good for hobbyists, it’s free but there are other options which I would consider over Blogger. Generally, if you want a professional presence I would use better platform.

Rating out of 5 : 1 = Poor 5 = Excellent

Cost = 5
Ease of use = 2
Creation Efficiency = 1
Set Up = 4
Quality Of Websites = 3
Value = 2

Total = 17

———————————————

USE WIX

Wix gets some unjust stick. Developers scoff at it because it is a website builder which can be used my non-coders – listen other Developers, WIX isn’t too bad! And if you are strapped for money and just starting out then maybe consider this as possible option in the beginning. WIX allows you to visually drag and drop your website together to create a design that you may not vomit over! You can even add the odd bit of code here and there to extend to track analytics.

Wix Website logo!

That’s well and good but why use it?

WIX can allow you layout items on a webpage how you want them! Imagine using something like Microsoft publisher, Photoshop or a graphics program to create a website. If your online presence or website is in it’s early stages, you may just need something very simple to chuck online or perhaps you want to get a website live for a friend or a relative. WIX can suit both! And you don’t need to be Developer.

For cheap, (not free) WIX is possible option. Here are my shared experiences of the WIX website builder.

Wix Pros :

Neat – It all comes in one tight little package with many design options.
Design with it – It’s great for non-techies or developers. *You can use the drag and drop interface to create a website the way you want it – a big although

Cheap – WIX comes with a range of pricing plans to suit many budgets, it also comes with it’s own hosting packages.

Cool features – It comes with some nice little integrated features such a mail-list manager and an easy to use image library, you can also create a basic shop with it.

Visual Designer – It’s great if you like to create websites visually, but please note – not for creating graphic design and banners. These elements will should to be created by a Designer or somebody with access to design tools.

*Although – Websites are not ‘as is’ static items anymore, you can’t treat them as you would a drawing or a piece print. It’s best to regard website as a piece or informational water when it comes to the layout. This information fluid or titles, boxes and elements which should move to fill the screen size. The launch of the smartphone essentially has pushed your static website design to near extinction.

Wix Cons :

The responsive design is sub-par – arguably worse than Blogger. As a non-dev you may be wowed initially by how easy it is to use, but what you see, isn’t what you get. Inside WIX there is a button in the navigation menu which allows you to set up a mobile version of the website… (Yes, you have to construct 2 versions of your website) the mobile version isn’t as standard so you have to create 2 static versions of your website. It isn’t very good at handling ‘fluid’ layouts when I last used it.

Build twice, takes twice as long – Further to the point, you have to build twice or suffer a website that will not work properly on a smartphone. Eg can’t read text without zooming with fingers etc. This bad user-experience will be passed onto your customers.

Clumsy fluid layout – As a designer this would be something I would pick up on. The default desktop website can have some somewhat awkward behaviour when it comes to viewing the website in different browsers. Fluid and responsive websites are not easy to build, and WIX certainly hasn’t mastered this yet.

Slow Down – If you have a large webpage with lots of elements and content this can overwhelm the WIX builder. You will find as you are dragging (pushing) elements around they start to lag and stick. This can become very frustrating if you are trying to work toward a tight deadline in a busy or demanding environment.

limited control with deeper development issues – With using a website builder such as WIX you surrender building more accessible a technically proficient website. It’s also trickier to get into the real nuts and bolts to solve somewhat basic issues.

Wix Verdict – Jack of all

Cheap and cheerful and great for non-techies. This user-friendly website builder is good if your are starting out. I have seen WIX used for straight up brochure and small scale websites with great results and if you are on shoe string it could be something to consider. WIX is nice to use, quite slick and an intuitive piece of online software! Not the cheapest, but ok.

//======================
* – just to the stress this from the previous point.
Sometimes, people think websites are static and they adopt their thinking to an archaic approach to website design. Websites are no longer static and it is best to avoid a website design in this way. If you would like to know more about this feel free to send an enquiry.
//======================

Rating out of 5 : : 1 = Poor 5 = Excellent

Cost = 3
Ease of use = 5
Creation Efficiency = 3
Set Up = 4
Quality Of Websites = 2
Value = 3

Total = 20

———————————————

WordPress is Free

WordPress has been available for years! It has grown a very large and loyal following that are building better product everyday. WordPress is completely free to use, its open source and has a large community of developers and agencies available to help. If you have your own domain and hosting, using WP is as simple as downloading and implementing it yourself. Certain hosting companies come with one Click installer which can make installing very straight forward but this isn’t the case for all hosting companies.

Wordpress logo

If you don’t have hosting or a domain you can also set up your WP hosting complete free – WordPress > don’t panic!

You can create very powerful website using WP and comes with a very large library of resources to build different types of websites; stores, blogs, brochure sites, downloads sites, ticket software etc etc – it’s vast and WordPress has gone way beyond being just a blogging tool!

WordPress is integrated with many 3rd party companies which range from over automated email systems to analytics. There is also themes which turn WP into a visual website builder. All this plus the features mentioned before.

WordPress Cons

Hackers like it – being a victim of it’s own success and a large proportion of websites being made using WordPress, it’s a hackers paradise. If you have a very large scale website perhaps other options are better to consider.

Plugin’s can break – Although there are 1000’s of plugins on the WP market place some of them can fail over time if they are not maintained.

Needs to be maintained – WordPress needs TLC occasionally. Pay attention to your dashboard or email notifications if you need to update you current version of WP or its plugins.

Set up – WordPress can be a challenge from time to time when trying to install it on your own host. This can range from obscure incompatibilities or ‘access’ not being configured properly

Tricky to change – The default version of WP can be tricky to tailor without knowing your way around CSS or downloading a plugin. This is where using a developer could come in use if you decide to use WordPress.

Used a lot – due to a lot of websites using WordPress website can start to feel the same.

WordPress Pros

Progressive & Powerful – WordPress is always pushing forward with it’s technology and it’s developer community are always improving the platform.

Community – WordPress comes with large pool of knowledgeable developers creating new functions and extending the function of the default software through plugins and themes which can either be purchased or downloaded for free.

Powerful for no or low budget (FREE) – you can create a professional and functional website with default Wordpress software.

Do what you like with it, more or less – create your website today on your own domain and hosting you and can do what you choose with it – isn’t that great!

Simple to use – It comes with a reasonably easy to use ‘dashboard’ – not too dissimilar to Blogger.

– Plugins and Themes – Just too much awesome to list. Also a lot of dross but there is essentially a candy store of added functions to select from.

Rating out of 5 : : 1 = Poor 5 = Excellent

Cost = 5 / (*1 )
Ease of use = 4
Creation Efficiency = 4
Set Up = 3
Quality Of Websites = 5
Value = 5

Total = 26 / (*22)

*Cost variable due to free VS paid. As this article is about free and low budget website solutions the score jumps from free to expensive depending on whether you need a dev to help you.

WordPress Verdict : Great Value, Great quality

WordPress is a good platform and worth considering if you want some flexibility in what functions come with your website and whether you want to change it at a later date. You may require developer to help you in the beginning but after that, your WP site is yours to do with as you choose.

That’s all! 3 Simple ways for getting a website online – in detail.

I hope this will offer some insight! If you are needing a Graphic Website Designer to help out with creating your business send me a message or if you have any queries about the listing above – also get in touch and will try my best to answer!

This article was written to give some guidance as how to go about creating a free website. This is based on my skills and experience. The opinions, based on my experience, are ‘my opinions’ and not that of others. Please bare in mind when making your business decisions on you website that you have considered what has been written and do your research thoroughly.

The scores were created for a bit of fun.

The platforms listed are tools. It’s down to you to offer great experience and value to the person reading it.

why note read :
Why use Unity for your gaming project –
32 Tips for email marketing
Website UI Design
How to Design a Kickstarter Page

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

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