COMMENTS PROVIDE THE perfect riposte for blog viewers, they provide the platform for visitors to say exactly what they want. And what better way to illustrate written comments than with pretty-looking speech bubbles. The premise of using speech bubbles is that they immediately suggest that the text is an opinion from a user. Plus, web designers being web designers they need to look the part as well. So, speech bubbles are not only effective from a design perspective they are functional as well. This tutorial looks at using div tags and CSS to create a selection of different styles and formats all from the some base code. The basis of the code is two div tags, one to contain the background, border and text and the other to contain the pointer image, commentator title and date. The background image is relatively positioned to ensure that it lines up with the other div tag to create the illusion of a single speech bubble.

Originally appeared in Issue 165

01 Insert div tags

Open a new blank page via File>New>Blank Page>HTML>Create and save with a relevant name. The standard speech bubble consists of three div tags. Insert the first via Insert>Layout Objects>Div Tag>OK and add another on a separate line. Now place the cursor inside the first set of div tags and add another div tag.

02 Create classes

Now remove all the default text, this will leave three sets of empty div tags. Now go to Format>CSS Styles>New to create a new class. Select Class from the Selector Type drop-down list, add a name, ie speechbubble, and press OK and OK again to create an empty class. Now repeat for the other two div tags.

03 Apply classes

Select the opening and closing tags for the first div tag, this will include the second set, and select speechbubble from the Class list in the Properties window. This applies the class speechbubble to the first set of tags. Now select the second set and apply the comments class and finally select the third set and apply the commentator class.

04 Font

Double-click .speechbubble in the CSS Style panel to open the CSS Rule definition window. Now select the desired font, Arial, Verdana, Georgia etc, from the drop-down list and select a font size and colour. Try 1.2em for a flexible font size or 16 pixels for a fixed font size. Experiment to suit your needs.

05 Bubble width

Now select the Box category and define the width of the div tag. There are several options here. Use a percentage, ie 80% if the bubble placement is in a liquid layout. If using this option add in the min-width tag, ie min-width: 200px, so the text is still easy to read, Alternatively, use a fixed width, ie 450 pixels.

06 Border and background

The next step is to define the border and background. Click Background and select a background colour from the palette. Now click Border and define the border for the bubble. To get started try a solid border with a width of one pixel. Choose a colour that compliments the background colour and press Apply and OK.

07 Add text

To view how the speech bubble will render add in some dummy text between the comment div tags. Make sure there is enough text for at least two lines. Note that the text is tight to the border, open the .comment CSS Rule definition window and add in ten pixels of padding for all sides.

08 Commentator text

Now add some dummy text to the remaining, commentator, div tag to bring into view. Double-click commentator, select Box and add some padding, eg Top: ten pixels, Left: ten pixels to position the commentator’s name. Head back to Type to determine the font size, style etc if different to the bubble font options.

09 Margins

Currently, there is a single instance of the speech bubble on display. However, if to be used to style comments there needs to be some breathing space between each comment. Add in a 20 pixel bottom margin to the commentator tag and press Apply and OK. This will vary depending on style, modify to suit.

]]> http://www.webdesignermag.co.uk/tutorials/create-css-speech-bubbles/feed/ 6 http://www.webdesignermag.co.uk/blog/flash-week-day-5-adding-animation-in-cs4/ http://www.webdesignermag.co.uk/blog/flash-week-day-5-adding-animation-in-cs4/#comments Fri, 05 Feb 2010 11:44:41 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=4007 Adding animation with the Motion Editor & Motion Presets in Flash CS4

THE NEW MOTION EDITOR IN FLASH CS4 ALLOWS YOU TO CREATE COMPELLING ANIMATIONS FASTER THAN EVER. HERE WE’LL USE TWEENING TRICKS TO BUILD A SIMPLE PHOTO GALLERY

TAKING SOME CUES from After Effects, Adobe has completely overhauled the way tweening works in Flash CS4. These new features are designed to allow you to create animations quicker and easier than previously possible. The new Motion Editor takes everything required to create a tween and rolls it up into one panel, making it much easier. From here you can tween Basic Properties (in 2D or 3D), transform properties, colour effects, and filters while also allowing custom or preset eases to be added to your tweens.

In addition, after you’ve created a tween you can save it as a reusable Motion Preset. This allows you to easily reuse animations in future projects by simply applying them to new objects from the Motion Presets panel. This  short step-by-step guide will specifically highlight  some of these new tweening capabilities in Flash CS4, using a simple photo gallery component as an example. The Motion Presets and assets for this tutorial have been included on the CD and can also be downloaded from www.webdesignermag.co.uk.

01 File setup

Create a new ActionScript 3.0 file with Flash CS4. Make sure the frame rate is 30fps and resize the stage to 600×600. Add a background colour or pattern and a title/description of your choice as shown in the example provided. You can also add any other elements you choose at this stage.

02 Import photos

Next, you’ll need to import each photo that you would like to use to the library. When you are finished, create a new folder on the timeline and place each photo onto a separate layer. Make sure each photo is at the same x and y position and that they all measure exactly the same size.

03 Photo setup

When all of the photos have been added, it’s time to set them up. For each photo, select it and create a Movie Clip symbol (press F8 or select Modify>Convert to Symbol). Make sure you select centre registration for each photo. This will be important for the animations we will create later.

Add a Twitter feed to your blog with Flash

MASH THOSE TWEETS INTO YOUR SITE WITH SOME SWXFORMAT ACTION

Twitter seems to be the big buzz word at the moment. Just over a year ago the number of users was still only in the thousands, but now it is in the millions and everyone is using the micro-blogging tool, from designers to celebrities such as Stephen Fry and William Shatner. A rather nifty idea is to create a little badge to go on your blog so visitors could see what you’re staying via Twitter as well as your blog. There are a few free twitter badges, but they don’t give you the freedom to really put your own design into the badge. They limit you to background and text colour, so why not to create your own?
You may find you have a problem with your badge working fine on the desktop but when you place it online you may have a cross-domain issue. So how do you get around this problem you ask? Well, it’s SWXformat.org to the rescue. SWXformat acts as the proxy to get your data and then sends it to your Flash file online. So let’s get cracking and make a Twitter badge!

Download the project assets by clicking here

01 Installing SWXformat

It’s best to set up your development environment, so first of all you need to download the latest version of SWXformat. You can go to the site swxformat.org or straight to the source code here: http://tinyurl.com/decewk, For AS3 support, copy the “org” folder from Library/v2/AS3 next to your Flash document.

02 New Flash file

Open up Flash CS4 and create a new Flash File (ActionScript 3.0) and make the stage 211px x 428px, Call the first layer ‘BG’. On the cover disc you’ll have an fla file called Twitter, inside that we have created a background, but please let your design skills loose here. Add the background and then create a new layer called ‘panels’.

03 Panels

So the Twitter posts stand out we need to create five panels, again these are supplied in the source fla on the cover disc, but we urge you to be creative. Place the panels at 7px on the X axis and then place them at equal distances apart on the Y axis. You can do this by selecting all the panels and then using the Align properties panel.

04 Data 1

Add a new layer called ‘data’. Place two dynamic text fields over the top panel you just created. Open the Properties Inspector and in the Instance field name call the first item ‘one’, this should be approximately three lines high because it will store the tweet. Next call the second item ‘created0’.

CREATE COMPELLING ALTERNATIVE FORMS OF NAVIGATION BY DRAWING ARROWS WITH YOUR MOUSE IN ORDER TO DIRECT FLASH TO YOUR CONTENT

ENGAGING YOUR AUDIENCE with exciting user experiences is what Flash is all about. As Flash designers we are constantly on the lookout for interesting ways to leave an impression on our audience and separate the content we make from that of our rivals. In this tutorial we’ll look at using mouse gesture recognition to create a quirky way to navigate an image-based gallery. You can see an example of what we mean at Red Issue (www. red-issue.com). Instead of clicking on buttons to move around we will use the mouse to draw arrows. Flash will interpret the drawing and based on the direction of the arrow it will move the image gallery in the appropriate direction. Flash has to do an awful lot of work in order to decipher different individuals’ handwriting, but thanks to an open source mouse gesture class written by Didier Brun we can get on to the exciting job of creating a gallery to browse instead of trying to work out the algorithm. You will probably come up with your own exciting ways to use this, so don’t forget to let us know what you create.

01 Getting started

Open your browser and visit http://www.bytearray. org/?p=91 to download the mouse gesture recognition class. Once it has been downloaded and unzipped you can examine the demo files. Open a new ActionScript 3.0 Flash file and save it as a ‘GestureNav.FLA’ in the unzipped folder just downloaded. You are now ready to start building your project.

02 Set up the document

In the Properties panel, click the edit button next to the size setting. Change the dimensions to 800 pixels by 600 pixels and change the frame speed to 25fps then press OK. Go to File>Import>Import to Library menu and browse the cover CD to the project folder. Inside the start folder, highlight all of the images and then click the Import to Library button.

03 Create a new Movie Clip

Press Ctrl+F8 to add a new symbol. Name this symbol Content and make it a Movie Clip then press OK. From the library, you’ll need to drag the image ‘lands1.jpg’ to the stage and position it at 0 pixels on the x and y axis. Now simply drag the image ‘lands2.jpg’ to the stage and position it at 800 pixels on the y axis and 0 on the x axis.

04 Add remaining images

Now drag the image ‘lands3.jpg’ to the stage and position at 1600 pixels on the y axis and 0 on the x axis. Drag the three portrait images to the stage and position at 600 pixels on x axis and at the same y axis as previous. Then add the three abstract images and position at 1200 pixels on the y axis.

05 Add a new layer

Create a new layer and then select the Rectangle tool. Choose black as the foreground colour and take the alpha value down slightly to 60%. Choose ‘none’ as the stroke colour. Draw a rectangle on the stage and in the Properties panel change the width to 2400 pixels by 75 pixels.

06 Another rectangle

Position the rectangle at 0 pixels on the x axis and then at 525 pixels on the y axis. Copy and paste the rectangle, then position using the Properties panel at 800 pixels on the x axis and 1125 pixels on the y axis. Lastly you will need to change the width to 1600 pixels in the Properties panel.

07 Paste again

Hit Ctrl+V on the keyboard to paste the rectangle again, this time positioning at 0 pixels on the x axis and 1725 pixels on the y axis. In the toolbar switch to the Text tool and choose a font such as Arial Narrow or similar, making the text colour white. Move the document to the first image in the top-left.

08 Add the text

Add the text as shown in the screenshot above, we used two text fields. Switch to the Move tool and Shift-click each of the text fields then hold down the Alt key and drag to the right. This automatically creates a duplicate copy of the text; position this over the second image and change the text as shown.

09 Finish the text

Using the method described in the previous step, continue to duplicate the text until you have added titles to each of the images in this Movie Clip. We have split each row into a separate section of landscape, portrait and abstract images for clarity when being viewed by the user.

Creating video captions in Flash CS4

Get accessible by creating captions for video using Flash and the Timed Text caption standard

Flash video has become the undisputed rich media format for the web, thanks mainly to sites such as YouTube, BBC iPlayer and Hulu adopting the Flash Video Format because of its quality-to-size ratio.
Flash sometimes, unfairly, gets a lot of stick for being inaccessible and while that can be the case for some websites, it is leading the way for creating accessible video on the web. The standard for captioning is the timed text format, an XML file whose contents include captions, but more important the timecode of when to display the captions and for how long.
This is perfect for anyone wanting to create accessible video content for those with hearing problems and is also a useful addition to any educational use of video. After all, it will only serve to reinforce the message if it is displayed on screen while being spoken. In this tutorial we will look at just how easy it is to add captions with an XML file and Flash CS4.

Download the tutorial files for this project by visiting here

01 Starting off

From the cover CD drag the Start folder to your desktop. Inside here you will notice that there are two files, one is a QuickTime movie file and the other is an XML file that contains the necessary captions. When we create any other files for this tutorial, they must all be saved into this specific folder.

02 Open the movie

Double-click on the file “caption_demo.mov” to open
in QuickTime. If you hit the Play button you will hear around 15 seconds of audio being spoken, this audio will need to be typed into the “captions.xml” file along with the timecode that the captions are displayed on the screen for.

03 Open the XML

Open the file “captions.xml” in either a text editor or Dreamweaver. You will notice the XML file has a TT on the second line, this stands for timed text format that is a standards-based way of displaying captions for video on the web. Notice also that line 11 has the beginning timecode and duration of the caption text.

04 Add the captions

With the video open side-by-side with the XML file, listen to each phrase of audio, noting the start time and how long it takes to say those words. In your XML file, copy line 11 and paste it, then add further captions. The timecode is in a HH:MM:SS:Millisecond format, as shown in the example above.

05 Save the captions

After a few minutes you should have added all the captions. As you can see this video is only 15 seconds long, but still requires a reasonable amount of work to get the captions just right. Once you have completed the captions, they should look similar to above so save the file but do not close it down as we will add to this later.

To kick-off the latest Web Designer Flash Week we jump straight in at the deep end and bring you a look at one of the Flash technologies that is going to be big, very big, in 2010, Papervison. Our first tutorial shows you how to ‘Build a dynamic navigation menu header with ActionScript and Papervison 3D’. If you are new to Papervison 3D, this tutorial gives a great insight into the basics of the technology using ActionScript 3.0 and demonstrates how to add interactivity to a web page. Read on…

PAPERVISION3D HAS TAKEN the web world by storm. This new dimension now available in the Flash Player greatly increases the kind of experience users will have on websites. Popping the flat page out from the browser opens all sorts of new creative avenues and With Papervision3D now being introduced to ActionScript 3.0, it is faster in terms of performance than ever before.

To get a basic handle on how it all works and how you can start using it practically, we are going to build a 3D navigational menu complete with rollover and rollout states. Knowing the basics of ActionScript 3 and TweenLite will help and by the end of this tutorial we will walk away with the skills to render out 3D shapes, place a material on them, add events and animate the shapes using ActionScript.

Author: Clemente Gomez | Originally appeared in Issue 155 | Download Tutorial Files

01. Creating the main file

Create a new folder on the desktop and name it ‘project’. Open up Flash CS3 or higher. Flash CS3 and above are the only versions of Flash that allow you to code in ActionScript 3.0 and in this tutorial we are using CS4. Create a new ActionScript 3.0 file and save it as ‘nav3D.fla’ in our project folder.

02. Getting Papervision3D

First things first; we need to download all the class files for Papervision3D and place them in our root folder. This can be located at http://code.google.com/p/papervision3d/. Go to Feature Downloads and click on the link Papervision3D_2.0.869.zip. Once it’s downloaded, extract the archive into the project folder we created in step one.

03. Main Document Class

We will now need to create an .as file to write our code in since we are going to write the code externally. Go to File>New>ActionScript File. Save this file as DocClass. as and save it into the project folder where nav3D.fla is located. You can also grab this file from the project assets and skip straight to step five.

04. Placing code
We will just copy and paste this code into the DocClass for now and we will step through it and explain what is going on later in the tutorial. The code can be found within the full project assets available to download from the Web Designer magazine site. We’ll focus on the design for now!

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import gs.TweenLite;
import gs.easing.*;
import org.papervision3d.events.
InteractiveScene3DEvent;
import org.papervision3d.materials.
MovieAssetMaterial;

05. Button background 1

Choose the Rectangle Primitive tool and draw out a rectangle 350 pixels wide and 90 pixels high. Next set the Rectangle options to 0. This will square out the corners. Right-click on the drawn object and convert it into a Movie Clip and name it buttonBG.

06. Button background 2

Double-click into our newly created buttonBG symbol to go into edit mode and create a new layer on top of the first one. Get the Rectangle Primitive tool again and draw out a 350 x 90 rectangle. Set the rectangle options to 30 and set the x and y properties to 0.

07. Shaping the background

Select the rectangle on the first layer. Right-click on it and choose break apart. This will turn the rectangle into a shape which will allow us to erase and now we can round out the top left and bottom-right corners. Select the Eraser tool and erase these corners.

08. Joining the two shapes

Now select the rectangle on the second layer and break this apart as well. Press Ctrl+A (Cmd+A on a Mac) to select all the shapes. Cut (Ctrl+X or Cmd+X) the selection and paste it in place. Make sure you remember to delete the empty layer.

09. Let’s add some colour

Select our shape and open the Color Palette and change the type to Linear. Use the following colours: #FBD7C8 with an Alpha of 40%, #F06931, #EB5747, and #E02727 with an Alpha of 100%. Select the Gradient Transform tool and adjust the gradient so the lighter colour is on the bottom.

Use the following technique to create customised web buttons. Experiment with shape, colours, effects and fonts to create bespoke buttons.

01. Start by selecting the Elliptic Shape tool, drawing out your circle.

02. Select Inner Shadow from the ‘Add a layer’ style options.

03. Set Blend mode to Multiply, 35% Opacity.

04. Set Distance and Choke at 0px and 0%, and Size at 10px.

05. Still in the Layer Style options choose Bevel and Emboss. Set Style to Emboss, Technique to Smooth, Depth at 100% and Direction to Up. Set Size at 40px, Soften at 14px.

06. Set Highlight Mode to Screen at a 75% Opacity. Set Shadow Mode to Overlay at the same percentage. Select Gradient Overlay, again in the Layer Style options.
Double-click the Gradient bar, accessing the Gradient Editor options. Select a Background to Foreground gradient, then change the colour scale using your shape colour, to a darker version of this tone. Do this by selecting individual Color Stops, using the Stops>Color option. Click OK once this is done.

07. Now set a Radial Style at a 90% Angle. Set Scale to 150%. Select the Ellipse shape tool and draw a white oval shape, covering the top of your button. Ctrl+click your shape layer and select Rasterize.

08. With your white shape layer still active Ctrl/Apple+click your button layer thumbnail, press Ctrl/ Apple+Shft+I, and hit Ctrl/Apple+X. Ctrl/Apple+click the white shape layer, then choose Select>Modify>Feather, setting a Radius of 50 pixels.

09. Finally, hit the backspace key once and lower Opacity to 30%. Now merge your shape layers only, and apply a Black to White Gradient, with an Overlay Blend Mode at 50% Opacity.

Now we can do complex compositions with ease and do multiple changes to any part of our design. Before we had all this, it was not that easy. If a client wanted to change anything on your proof, you’d be in a situation when you’d need to start again. Today, we can give our elements extra adjustment layers, quick mask, turn them into Smart Vector with Smart Filters, it has become nice and easy to get the results we set to achieve. However, the more the layer, the more the chaos that it can bring. A key to organised workflow lies in mastering the main file you work on. It could be easy to get lost in multiple layers; by being efficient you should avoid the headaches and lost time fishing for the parts of your design, especially in situations when your design is rather elaborate. Furthermore, you have to ensure your file is easy to understand to any person down the line, for example if you work in the team or with developers who transfer your design into working website, how can you do that?

First of all, any new layer should be correctly named as soon as it’s created. Although not always the actual working practice, especially when you’re a spontaneous digital artist, it creates extra work later. Create a new layer by Shift+Cmd+N, put in the right name in the pop-up dialog box. Alternatively, use the icon at the bottom of the Layers palette and double-click to rename. It’s advise to also have a custom shortcut for the Layer properties, where you can also colour-code your layers. There’s an array of colours to choose from, enabling you to assign each type for hidden layers, spare parts or alternative options of each layer. They can play a crucial part in team work, to inform others working remotely in the team which parts of the design have been done and which require attention. If an element is made up of many small parts, simply group them together for easier movement within the document.

When working with layers there a number of rules that should be followed (see below).

Layer Etiquette (Golden Rules)

1) Clear Naming
It’s easy to get carried away with the design work and not naming the layers as you go along. Try to assign shortcut of Shift+Cmd+, for layer properties. Double-clicking the layer in the palette can be a bit annoying and shortcut will become rather intuitive.

2) Arrange Orderly
When you group your layers via Ctrl/Cmd+G, you’ ll benefit from easy stacking and order changes. Also, duplicating whole groups of layers within further documents becomes very simple. This works well with type and filters, when Undo could become rather lengthy. Work on the copy and delete what doesn’t work.

3) Delete Unused
You always have an option to keep the unused layers for backup and later use before you finish the whole site. However, when all is in place and ready to go for the next stages, you can delete all hidden layers by clicking the option in the Layers palette.

4) Switch To Default
Photoshop also makes it easier to switch the Layers view, even working on a large-scale monitor sometimes doesn’t give you enough space to view most of the layers at once. You can change the preferences via Panel Option in Layer Palette.

02. Outline shape

First, carefully and precisely as possible make an outline selection. To acheive this choose the Magnetic Lasso tool and work your way around the outline of the penguin. Move around the edge slowly to ensure an  accurate selection.

03. From selection to path

To create a path from your lasso selection choose Window>Paths. Now click on the Make Work Path From Selection icon at the bottom of the window. Your path will appear in the Paths window.

04. Get into shape

Now choose Edit>Define Custom Shape and enter a name into the Shape Name window. Choose the Custom Shape tool, click on the arrow beside the Shape title in the Options bar and your shape swatch will appear at the bottom.

05. Locating your custom shape

You can use your custom shape in different ways by selecting from the Options bar. Select from Shape Layers, Paths or Fill Pixels. There are other ways you can customise it depending on which option you select.

STYLES AND FASHIONS come and go, but there are those that are always in vogue – timeless designs that work whatever the era. The word ‘vintage’ suggests age, refinement, an air of sophistication and experience, and things that fit into this category will never go out of fashion. In this tutorial we’re going to create a classic fleur-de-lys in Photoshop, starting from a sketch, and work it up into a fantastic vintage wallpaper tile that will repeat perfectly for use on your website. To add to the effect, we will weather and age our design a little to help create that time-beaten look, and take a quick look at the CSS because you will need to get the image into your website once it’s all said and done. If you don’t fancy using a fleur-de-lys then feel free to sketch some other olde world motif. Simply scan it and follow on from step three; the design approach works for any kind of repeating pattern element you choose.

Author: Sam Hampton-Smith | Originally appeared in Issue 159

01 Do your research
We bang on about this, but it really is worthwhile doing your research and getting some real-world reference material. You can go to the library and get a book of interior design, visit your local wallpaper shop, or take the easy option and use a search engine to find images of the motif you have in mind.

02 Sketch your design

Sketch out your design elements on a sheet of paper. Don’t worry about getting all the fine details right at this stage, this is more the idea generation stage of the process so experiment with different shapes and forms. Consider how the design might sit in a pattern and make a note of this in sketch form.

03 Scan in your artwork

Plug in your scanner and get your sketches scanned in to your computer. Open up the sketches in Photoshop and decide on your favourite design. If you would like to incorporate elements from two sketches into one final design, that’s also fine; identify which part you want to start drawing first, and zoom in close around that object.

04 Select the Pen tool

For our particular motif here, we’re going to use the Pen tool to create a path. The Pen tool is ideal for areas with clearly defined edges. Click with the Pen tool to create a point on one corner of your sketch motif. Add a second point by clicking again further along the same edge. Photoshop will draw a straight line between the two points.

05 Paths and the Pen tool

You need to work your way around the element adding points until you can click on the original point to close the path. If you hold the mouse button down after clicking, you can drag your mouse to one side or the other and create a curved segment. When you complete each path double-click on the work path in the Paths panel and name the path.

06 Finish paths

Work your way around each object in turn. Use guides (View>Show>Guides) to get perfect alignment. We created a total of ten paths, one for each of the top and bottom petals, three for the central bands, and one for the central flourish. Once you’ve created all your paths you can turn off your scan layer by clicking on the eyeball icon in the layers panel.

07 Fill each path

On a new layer Ctrl/Cmd+Click on the first path to load it as a selection. You’ll now need to fill your selection with black by using the Paintbucket tool, or instead you can use the shortcut keys Alt/Opt+Delete. After completing this for the first fleur-de-lys, simply repeat the same process for each path in turn, making sure each new path is filled on a new layer.

08 Add layer styles

Choose one of your layers and select Layer>Layer Style>Gradient Overlay. Choose the copper preset. Tick the checkboxes for Bevel and Emboss and Texture. Play with the settings for both to create an effect you’re happy with. When you’re done, right-click on the layer in the layers panel and choose Copy Layer Style. Right-click and paste the layer style onto each layer in turn.

09 Merge and decorate

Turn off any background layers then choose Merge Visible from the Layer panel pop-out menu. Choose the Burn tool from the toolbox and burn in shadows across the fleur-de-lys to create a lightly distressed style. Add a Hue/Saturation adjustment layer (Layer>New Adjustment Layer>Hue/Saturation) and reduce the copper to silver by desaturating the image.

10 Lay out the pattern

Highlight the fleur-de-lys and Adjustment Layer layers and choose Convert to Smart Object from the layer panel menu. Increase your canvas size (Image>Canvas Size) to 1800px square and change your Grid options to Show grid lines every 200px (Photoshop/Edit> Preferences>Guides, Grid & Slices). Copy and position your fleur-de-lys across your canvas at even intervals.

11 Add texture

Choose a duck-egg blue for your foreground, and a slightly darker version for the background colour. On the background layer choose Filter>Render>Clouds. Duplicate this layer and position it at the top of the layer stack. Set the blending mode to Exclusion. Create another copy at the top of the stack and choose Filter>Render>Fibers. Set the blending mode to Overlay.

12 Extra distress

Download a free concrete texture from http://www. bittbox.com/freebies/free-texture-tuesday-concrete/ and then add it to your image. Set it to blend using Darker Color and reduce the opacity to approximately 20% so that there’s some general additional distress to your image.

13 Offset

Merge all visible layers together so that you have a single layer, then choose Filter>Other>Offset. Enter values of 900px for both Horizontal and Vertical; this is half the canvas size. You’ll probably see a slight seam across the middle of your image. Use the Clone Stamp tool to blur this seam.

14 Offset, tweak and save

Your image will now tile perfectly. Add a Curves Adjustment layer and Hue/Saturation Adjustment layer to increase contrast and re-colour the artwork if desired, then choose File>Save for Web and reduce the size of the output to be 450px by 450px. Save the image in JPEG format.