Showing posts with label help. Show all posts
Showing posts with label help. Show all posts

Wednesday, 1 February 2017

Quick method for making a custom Photoshop Brush


How to make a simple, pain free Photoshop brush!

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! 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.

1 ) Open PS 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.

hoe to make a brush in photoshop!
Photoshop Brush - Feel free to use this one
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’.
Label your new defined brush


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 your onto the path of making more awesome brushes.


Photoshop brushes
Brushes!

Thank you for reading!

Wednesday, 27 July 2016

Simple Custom Cursor For Your Stencyl Game



The following block shows a simple method for making your own custom cursor.  Please refer to the Stencyl community help section for further details on coding blocks.


General Gist : this little 'how to' covers some basics for making a custom cursor in Stencyl. In a nutshell, you need to hide the default operating system cursor and swap out for your own custom cursor, which will be an actor type.



Part 1 : Graphics

1 ) Firstly you will need to draw your one custom cursor in graphics program of your choice. I used Adobe Illustrator to draft up this pointer and exported it as a .PNG – Dims 29px 27 px, remember to save your .PNG in logical place in your project folder.
Part 2 : Importing a Cursor As An Actor Type

1 )Open Stencyl and navigate to your game project (assuming you have already made a project)


2 )In the upper left corner press on the “Actor types”and create a new actor. You will then need to add a frame and import your newly created cursor!

Part 3 : How To Make it work

1 ) Click on 'actor behaviours' and create a new behaviour! This will be a basic behaviour to make your Cursor work in your game.
2 ) Click “add event” in the top of the panel. Add > When updating


3 )You can either navigate through the code blocks manually or you can search for them. Using the image shown. Thats how to make a basic Cursor in Stencyl! Don't forget to attach the block to the Cursor Actor, the green button in the top right will allow you to do this - “Attach to actor”

Block for making custom cursor



Run game!

Bug with cursor full screen * untick fullscreen mode!

Please take into account that the flash player from Stencyl ( when tested from the game ) game glitches in full screen mode. The main default operating system mouse will still be visible despite having the cursor hidden.This could be an apparent issue with the flash player. - Dated from May 2016. Try unticking the full screen mode... Not the best

Notes : this bug happens on a iMac OSX i5 10.9.5




Saturday, 19 September 2015

Working With PHP Include : First Baby Steps For Designers - Making A Low Maintenance Website

Experiment With “Include” PHP


Maintaining a large website such as Satzuma can become 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 pages, worse still… imagine that piece of code had a typo – across all 70 pages! You start to get the idea – the horror. 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). With this Include method, the information you amend in one file can change across multiple webpages, just to name a couple of ideas you can use this for navigation, footers, banner adverts and much more. I cannot emphasise how much easier this will make your life when working on larger projects. Change once to  update many!



How To Go About It


As a rough example we are going to make a footer module. We also have the 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

We will treat this file as the master file, the parent which pulls in the external modules to construct the page. Remembering that if you are using this modular method for constructing your website it will make life much more efficient.

Why not call your parent file ‘master.php’ 



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

PHP include shwon in image

Stage 2 - Footer File


I have used the footer in the example, as this area of the website has frequent updates with new products and information constantly being change and added, and it is spread across the entire website… As you can see, all styling is added to this queasy example with the accursed table! Any changes or modifications 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. So... Design and build your footer file and add you styling to it.



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. 





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


This will call on the footer module and all of its elements.  Once you upload your files you can see whether the footer has worked.

This visual diagram will show how the principle will work leaving aside how the coding works for the PHP include.
Parent, Child, Footer... How PHP include works for designers

Hope this helps, I plan to use this much more in the future.

Happy designing...