We’re rolling out the new HotelsAfloat.com website, and we are really very happy about the result. Built using the CakePHP (MCV) , framework, fine tunning the display to the owner’s requirements for more and more quality UX is a dream. The backend office is easily modified so that we can simply add more functions for managing the site.
One of the most important requests from our client concerns the responsive quality of the design and layout for mobile, tablet and desktops. We’ve used Boostrap CSS3 to the design and had no problems.
With the arrival of Spring you may be working on design and print work which needs a bit of colour to cheer things up after the long dark winter.
This is a step by step guide to help you create your own gradients in Illustrator of natural colours and then build a swatch for your own purposes.
My wife and I are very luck to live in the countryside . She’s an excellent gardener who adores flowers. Over the years we’ve built a good library of photos of our garden flowers, taken through the seasons.
Natural colour gradients from flowers
Creating your own colour gradient swatches
Take a good, outdoor, close-up photo of the whole flower with your digital camera. You don’t need to use an expensive camera.
In your image editing software, load the photograph and then crop the flower from the center to the edge of a petal. This allows you to grab colour variations from the flower. Same this image at a good size (1200px wide 72dpi will do).
Now you’ll need to open Illustrator.
Create a document, bring in the cropped image of the flower into one layer and lock it. Make another layer and add a rectangle of the same width as the bitmap image and with a simple grey gradient, lock it. You should have something similar to what I have in the next image.
Now we can begin to select the important zones to build the gradient. Add another layer and call it “rulers”. Make sure your options for rulers and markers are on.
Working from the left to the right, add vertical markers to divide the zones of colours that you can see in the flower. These markers will then be used to pick and add colour to a swatch.
Add a new group of colours to the swatch.
Bring up the colour picker and your screen should be similar to the one above.
Again working from left to right using the picker, select the colour under the marker and add it your swatch.
After a few clicks your colour group should resemble the different zones of the petal.
Now we’re ready to change the boring grey scaled gradient into the final result.
Set your screen up as above, make sure the rectangle which will receive the gradient is active.
From left to right, add a step in the gradient which correspondes to the marker, then drag and drop the colour from you swatch to the gradient step.
Your gradient will build and can of course be adjusted.
Remember this is not an exact science and the result is about “appreciation”. Add or save the gradient in a swatch so that it is easy to use on other objects. Remember you can change the aspect of the gradient, the angle, the spread…
It is beyond the scope of this website to display all the gradient swatches that we’ve made.
If you need advice or specific colours please contact us, e’re very happy to help.
A website such as this one, which is similar to millions of other websites, requires different “languages” to display a web page on a user’s screen.
For this to happen, there are a few different computer “languages” which will be used and understood by the website and then your computer.
3 and a half language names
PHP (PHP Hypertext Preprocessor), this is a scripting language that is used on the server side of the the website before the information arrives on your computer. For example displaying products and prices and preparing your shopping cart.
HTML (Hypertext markup language), the HTML contains the basic page format with the initial content and layout.
MySql (My Structured Query Language) is used to manipulate and query databases where information is stored. For example it will be able to save your login details and your shopping cart contents on a server for future use.
CSS (Cascading Style Sheet), although not a language, the syntax is slowly growing in complexity and offering more and more functionality. It’s purpose is to control the design and layout of a page.
This is not an exclusive list of languages and other sites do use different technologies methodes.
If you are interested in learning more about building websites contact us and also check out the following links: