# data_content

c0url: acorn_community.html
c1subject: Acorn Community
c2body:
Acorn's Community 



Acorn has a mailing list you can join and ask questions on: 
http://tech.groups.yahoo.com/group/fmacorn/

Check out Acorn's forum for additional topics and discussions:   
http://forums.flyingmeat.com/

Email support@flyingmeat.com if you have any questions, requests, or ideas.


c0url: acorn_image_browser.html
c1subject: Acorn Image Browser
c2body:
Acorn Image Browser


There are 2 ways to browse images files through Acorn.  The first method is to go to  File ▸ Open Folder  (⇧⌘O).  Choose either a folder that contains images, or an application.  The second method is to hold ⌥ ⌘ (option, command) and drag your file or the icon of the application and drop it on top of the Acorn icon in your Dock.  Either way, the image browser will appear in Acorn with all the images contained within the folder or application.


￼
The file browser window will give you a warning if you open up a folder and it can't find any images in it.



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: acorn's_workspace.html
c1subject: Acorn's Workspace
c2body:
Acorn's Workspace


￼

The Canvas

In the image below you can see Acorn's canvas.  This is where the composite of all your layers are viewed and where you draw, crop, or modify your image in other ways.  The bottom portion of the canvas window is called the status bar.  

On the bottom left hand side of the window along the status bar you can find the image size.   Clicking on the image size label will toggle it between the image size, and the image PPI (Pixels Per Inch).  If you have a selection present, this is where you can find its width, height, and x,y coordinates.

￼

The current zoom (or magnification) level, as well as the option to change the zoom using a slider can be found on the bottom ride hand side of the window's status bar.  To manually enter a specific zoom value, click on the number percentage and an editable field will appear.

The file name and format can be found along the center of the top window bar, and the close, minimize, full screen buttons are at the top left.

Going into full screen mode allows you to expand Acorn to the entire screen.  Toggle between regular screen and full screen mode quickly by using keyboard shortcut 'f'.  To hide or display the tools palette in full screen mode, toggle the tab key.  Move the canvas anywhere in the screen using the pan tool (quick tip- hold down the space bar while using the move tool as an additional way to position the canvas). 

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Tools Palette & Inspector Palette 

Acorn's various tools are available in the tools palette.  When a tool is selected, its options are presented in the inspector palette.  In this case, the crop tool is chosen and the inspector palette gives you the option to modify its size, angle, position, as well as other variables.  

To hide or display the tools palette or inspector palette, choose Window ▸ Tools or Window ▸ Inspector. 

Located at the bottom left hand corner of the inspector palette are 3 buttons.  The '+' button allows you to quickly and easily add a new layer to your image.  The 'fx' button brings up the filter window where you can search and choose from the various filters Acorn offers.  Clicking on the cogwheel allows you to bring up the layer contextual menu where you can add, delete, duplicate, and perform many other tasks with your layer.  

Be sure to read the more in depth descriptions of these palettes available here:
Tools Palette
Inspector Palette
￼
                             Tools                             Inspector



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


The Layers List

The layers list contains a list of all your layers.  Layers are composited together to form a single image which shows up in your canvas.  The layers list is located at the bottom of the inspector palette.  

Also, notice a drop down menu for the blending modes, as well as a slider for the opacity of the selected layer.  A lot more information on this topic is available at Layers Basics.  




￼ 


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


The Menu Bar
￼

The menu bar is located across the top of your screen.  It allows you to access the various options available within Acorn such as saving your image, copying and pasting, and viewing guides.  When you click and hover over a menu item a drop down menu will appear giving you more choices.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: add_a_border.html
c1subject: Add a Border
c2body:
How to Add a Border 



This tutorial will outline a few of the different ways you can add a border to your image in Acorn including using a shape, filters, and a background layer.  


Adding a Border Using a Shape

Open your image in Acorn, File ▸ Open

￼

Go to View ▸ Guides and Grids and make sure 'Snap To Canvas Bounds' is checked.  Then, select the rectangular shape tool from the tools palette.  Make sure the fill box is unchecked, the 'snap to pixels' box is checked, and increase the size of the stroke to something easily visible.  The example below has a stroke of 70.  Draw out a rectangle so that each side of the rectangle snaps to a boundary of the image.  As an alternative, you can enter the canvas image dimensions found in the lower left hand corner of the canvas into the width and height fields of the shape in the inspector palette.

￼
With your shape still selected, adjust the stroke setting up or down to create your desired border thickness.  Click on the foreground color well if you want to change the color of your border.  The color of the border here has been changed to a light gray.


￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Adding a Border Using a Filter

Filter Method #1:  Go to Filter ▸ Add Border to Layer.  A thin border will be added around your image using whatever color you currently have chosen in your front color well.  The width of the border cannot be modified.   


￼


Filter Method #2:  Choose Image ▸ Resize Canvas, and add 50 pixels or so to the width and height of your image. Go to Filter ▸ Stylize ▸ Fuzz Stroke.   Adjust the settings to create the border you desire.  The settings used here can be seen in the window below.

￼


￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Add a Border Using a Layer

Go to Select ▸ Make Selection from Layer.  Then choose Layer ▸ New Layer with Selection.  

￼
Next, go to Edit ▸ Fill.  Make sure 'Use: Color' is chosen, and click on the color well in the window to select the border color you want.  Then click 'OK'.  Deselect (⌘D).

￼
Move the new layer you created below the original layer.  Go to Layer ▸ Rotate and Transform ▸ Scale and Rotate.  Scale the layer up to create the thickness of border you want.  The border seen here is scaled to 103%.  You may need to resize your canvas in order to see the border, Image ▸ Expand Canvas to FIt Layers.

￼



Photo Credit
© Tina Rencelj


c0url: aging_a_face.html
c1subject: Aging a Face
c2body:
Aging a Face

￼ ￼
￼ ￼

Open the image you wish to make look older in Acorn, File ▸ Open.  The one used here can be found in the photo credits below.

￼

Next, add an image of a wrinkled face to your layers list by choosing File ▸ Add Images....  

￼
If the image you added needs to be larger or smaller, choose Layer ▸ Rotate and Transform ▸ Scale and Rotate (⇧⌘T) and adjust as needed.  Now, choose the polygonal or free hand selection tool from the tools palette and select the areas of the wrinkled face image that you want to keep.

￼

Go to Select ▸ Inverse.  Hit the delete key.  Deselect (⌘D).  This will remove all other parts of the wrinkled face image within your canvas that aren't needed.  

￼
Decrease the opacity of the wrinkled face layer to around 50% so that you can see the young man's face below the wrinkled face.  Choose Layer ▸ Rotate and Transform ▸ Free Transform.  Use the handles of free transform to make the wrinkled face cover the young man's face.  Try to roughly line up the eyes of the wrinkled face to the young man's face to make sure that the eye wrinkles fall in the correct location.  Double click to commit the transformation.

￼
Increase the opacity of the wrinkled face layer up to around 70%.  Add a layer mask to the wrinkled face layer, Layer ▸ Add Layer Mask.  Fill the layer mask with the color black using the flood fill tool.  This will completely hide the wrinkled face layer for the time being.  For more information on how to use layer masks, read Layer Masks and Layer Mask Examples.

￼
Choose the paint tool and set the opacity to around 25%.  Set the color of the foreground color well to either white or a light gray.  Begin brushing within the layer mask over areas of the young man's face where you want wrinkles to appear.  Don't worry about being too exact.  You can change the color of your brush to black and brush over any areas you want to repair or undo.

￼
You can change the blending mode of the wrinkled face layer to 'luminosity' which will keep the wrinkles but minimize the skin color of the wrinkled face from showing through.  Also, play around with the opacity of the wrinkled face layer.  You can make it appear as if the young man has aged significantly by changing this setting alone!

Wrinkled face layer opacity at 0%, 50%, 75%, and 100%:

￼ ￼
￼ ￼




Photo Credit
Wrinkled Face -© Bui Linh Ngan; Young Man - © Julien Haler 


c0url: animate_an_image.html
c1subject: Animate an Image
c2body:
Animate an Image


This tutorial will show you how to use Acorn and Apple's Keynote to make a movie of an alpaca moving its mouth.  You can download the free image of the alpaca here.

Open your image in Acorn, File ▸ Open.  Duplicate the alpaca image, Layer ▸ Duplicate Layer ⇧⌘D.
￼
Using the polygonal or free hand selection tool in the tools palette, make a selection encompassing the lower part of the alpaca's jaw.
￼

Choose Layer ▸ New Layer with Selection, then deselect ⌘D.  Repeat these steps and make a selection of the upper part of the alpaca's jaw, choose Layer ▸ New Layer with Selection, then deselect ⌘D.

￼
Make sure you are currently selected on the layer with the lower jaw.  Use Layer ▸ Rotate and Transform ▸ Scale and Rotate to slightly rotate the jaw clockwise.  Move the lower jaw slightly down and to the left.   Double click to commit your transformation.  Repeat for the other layer with the upper jaw.

￼

Click on your top layer in the layers list.  Merge the top layer down to combine it with the jaw layer below it, Layer ▸ Merge Down (⌘E).  Choose the paint tool from the tools palette and set the color to black. Decrease the opacity of the brush to around 50%.   Fill in areas of the mouth that may have hard edges.  Select the eraser tool and set the opacity to around 10%.  Run the eraser around the edges of the jaw layer to smooth out the edges of the fur.

￼
Merge down the jaw layer to the duplicate alpaca image layer (⌘E).  Now click on the visibility eye icon on the left hand side of the duplicate layer to hide the layer.  Repeatedly click the visibility eye to see a preview of your animation of the alpaca's jaw moving.  

￼
Open Keynote, and create a new presentation.  

￼
Go back to Acorn and click on your original alpaca layer and use ⌘C to copy it to the clipboard.  Go to Keynote and use ⌘V to paste.  Choose 'Fit in Window'.

￼
Repeat the above step for the duplicate alpaca layer, placing it into a new slide.

￼
Select both slides you have created by holding down the shift key while clicking on them in the left hand slide column.  Use ⌘C to copy and ⌘V to paste at least 10-15 times.

￼
Choose Play ▸ Record Slideshow.  Use the down arrow key to move through your slides at the speed you desire.  Make noises or talk if you want audio as part of your animation!  Select File ▸ Export To▸ Quicktime.  The settings used here are shown.

￼
Watch your creation, or view the one made here.

Photo Credit
© Yinan Chen 


c0url: applying_texture.html
c1subject: Applying Texture
c2body:
How To Apply Textures

This tutorial will show you how to apply textures to your image using blending modes.  All the textures in this tutorial are from http://www.cgtextures.com.
￼
Open your image in Acorn, File ▸ Open.  The image used here is of 3 bell peppers.  Each of these peppers will have a different texture applied using blending modes. Images of marble, rocks, and clover textures were chosen.  Choose File ▸ Add Images... to add each of your texture images in separate layers.  For more assistance with this, see 'Inserting Images'.

Use the Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T) menu to move the textures images around and change their size and angle.   

￼

Change the blending mode of each texture layer to Overlay.

￼

The texture should be noticeable on the flesh of the peppers, not the stems or shadows. To do this you need to erase the texture on the areas where it is not wanted.  

To make this easier, turn off the visibility on the other texture layers by clicking the eyes to the left of the layers in the layers list.  Leave only the original image and the texture you wish to edit visible.  Select the layer of the texture you wish to edit by clicking on it in the layers list.  Start with the red pepper.  Choose the erase tool in the tools palette and erase any unwanted areas of texture.

￼

Repeat this with the remaining textures.  Now all the peppers have their own texture.   Be sure to experiment with different blending modes and opacity settings!

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: arrows_&_stars.html
c1subject: Arrows & Stars
c2body:
Arrow & Star Shapes



￼
Arrows

To draw a basic arrow, click on the arrow tool in the tools palette and the various options for arrows will be loaded in the inspector palette.  Draw out an arrow on your canvas.  


Arrowhead Size:  The arrowhead can be increased or decreased in size by clicking and dragging on the point at the base of the head. 

Arrow Length:  The length of the arrow can be increased or decreased by clicking and dragging on the points at the tip of the tail or the head. 

To learn more about fill, stroke, and shape rotation, read the 'shape tools' tutoriai.   
￼



Modifying the Arrow Tail and Arrow Width

In order to modify the shape of the arrow tail, choose Shape ▸ Bézier Stuff ▸ Convert to Bézier Shape.  Then, click and hold on the bézier tool in the tools palette until a drop down menu appears.  Choose 'Bézier Anchor Select Tool'.  Click and drag on one of the bézier points of the arrow tail to modify its appearance.

To modify the width of the arrow, choose Shape ▸ Bézier Stuff ▸ Convert to Bézier Shape (if you haven't already).  Select the move tool and click and drag on an edge of the bounding box. 

Note: Converting your arrow to a bézier shape is a permanent operation unless you chose Edit ▸ Undo.

￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

￼
Stars


The star shape tool defaults to a 5 point star when you initially draw it on your canvas.  All of the standard shape tool options are available for the star in the inspector palette.

You can increase or decrease the internal star radius by clicking and dragging on the inner circle of the on canvas controls.  You can also quickly resize, increase or decrease star points, and rotate your star shape by using the on canvas controls. 

Additional options for modifying the star can be found by clicking on the back tick key (`) when you have your shape selected, or by going to the View ▸ Quick Config Popover menu item.  A shape pop-over window will appear.  The back tick key can be found on the upper left hand corner of the keyboard.

You can adjust the number of points of the star, and change the appearance of the star tips by clicking on different 'line join styles'.

￼
￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Triangles, Diamonds, Hexagons, & More!

￼
The star shape tool is the starting point for creating other shapes in Acorn.  To start, select the star shape tool and draw out a star.  

Diamond:  Change the number of star points to 2 using the on canvas controls, or the shape popover window.

Triangle:  Change the number of star points to 3 using the on canvas controls, or the shape popover window.

Tri-Star:  Change the number of star points to 3.  Drag the internal radius of the star inwards.

Pentagon:  Keep 5 star points.  Drag the internal radius on-canvas control outwards until you have a pentagon.

Hexagon:  Change the number of star points to 3.  Drag the internal radius on-canvas control outwards until you have a hexagon.

Octagon:  Change the number of star points to 4.   Drag the internal radius on-canvas control outwards until you have an octagon.

Decagon:  Keep 5 star points.   Drag the internal radius on-canvas control outwards until you have an decagon.




<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: automator_batch_compress_jpeg_files.html
c1subject: Automator Batch Compress JPEG Files
c2body:
Using Automator and AppleScript to compress a folder full of JPEG files

Maybe you have a folder full of JPEG images that you want to re-compress so that they aren't taking up so much room on your disk, or maybe you're delivering them over the web and you don't want to use up all of your bandwidth.  If there are tens or hundreds of images, wouldn't it be great to automate the process?  You can do this using Automator and Acorn!

Open up the Automator application (it's located in your Applications folder), and make a new Workflow.  Next, add a "Get Specified Finder Items" action from the Library on the left of your Automator window.  If you need help finding the action, you can quickly search for it in the search field.  Use the Add… button on the Finder action to select your images.  You can also drag and drop them all into the table.

Now add a "Run AppleScript" action below the Finder action, and paste in the following AppleScript:

on run {input, parameters}
    repeat with fileAlias in input
        tell application "Acorn"
            set doc to open (POSIX path of fileAlias)
            -- if you want to overwrite the original file,
            -- remove the '& "-exported.jpeg"' bit.
            set newPath to (POSIX path of fileAlias) & "-exported.jpeg"
            tell doc
                web export in newPath as JPEG quality 25
                close
            end tell
        end tell
        
    end repeat
    return input
end run


Finally, save your workflow.  Your workflow should look like this:
<%= '<div class="rimg">' %>
￼
<%= '</div>'%>


And your images will be written into the same folder as the originals, with "-exported.jpeg" appended to the end of the name.

You can also download the workflow from here: AcornRecompressJPEGFiles.workflow.zip

<%= startRoundWarningDiv(writer) %>Note For App Store Users: If you've purchased and downloaded Acorn from the Mac App Store, certain AppleScripts, Automator Actions, and JSTalk scripts may not work for you because of sandboxing restrictions required by Apple.  The direct version of Acorn does not have these issues (and if you have run the App Store version of Acorn at least once, the direct version will run registered, so it's easy enough to switch if you need to).<%= stopRoundWarningDiv(writer) %>

<%= startRoundWarningDiv(writer) %>
Automator Warning: If Automator gives you some sort of warning about the Action not working correctly, save your action and try again.<%= stopRoundWarningDiv(writer) %>


c0url: batch_processing_using_automator.html
c1subject: Batch Processing using Automator
c2body:
Batch Processing using Automator

What is Automator?

"Automator is an application developed by Apple for Mac OS X that implements point-and-click (or drag-and-drop) creation of workflows for automating repetitive tasks into batches for quicker alteration, thus saving time and effort over human intervention to manually change each file separately." - Wikipedia

Automator can be used with Acorn to process one or more images, and to change the file format of the images.  You can crop, trim, and combine multiple images.  You may even give Acorn custom commands with JavaScript.  Learn more about Automator from Automator World.

Workflows

Current Acorn Workflows available in Automator:
	•	Change the file type of images
	•	Close images
	•	Crop images
	•	Run JavaScript
	•	Add a layer on images 
	•	Open images
	•	Trim images

Additional workflows you can download:
	•	Change DPI:  http://flyingmeat.com/stuff/BatchChangeDPI.workflow.zip

Examples

Not sure where to start? Try the tutorials below to get your feet wet.
	•	Batch Watermarking
	•	Automator Batch Compress JPEG Files


<%= startRoundWarningDiv(writer) %>Note For App Store Users: If you've purchased and downloaded Acorn from the Mac App Store, certain AppleScripts, Automator Actions, and JSTalk scripts may not work for you because of sandboxing restrictions required by Apple.  The direct version of Acorn does not have these issues (and if you have run the App Store version of Acorn at least once, the direct version will run registered, so it's easy enough to switch if you need to).<%= stopRoundWarningDiv(writer) %>

<%= startRoundWarningDiv(writer) %>
Automator Warning: If Automator gives you some sort of warning about the Action not working correctly, save your action and try again.<%= stopRoundWarningDiv(writer) %>


c0url: batch_watermarking.html
c1subject: Batch Watermarking
c2body:
Watermarking Images with Automator and Acorn



Pretend you have a folder of images on your desktop, named "Originals".  You want to open up these images and add a custom image you've made, which will act as a watermark.  If you don't have one handy, you can use the Flying Meat logo: FlyingMeatWatermark.png.  Save that image next to your Originals directory.

Now that the files are ready, it's time to launch Automator (located in your Applications folder) and make a new workflow:

￼

Choose the "Workflow" option.

Next, drag and drop your Originals folder to the area in your Automator window that says "Drag actions or files here to build your workflow".  Your action should look similar to this now:

￼

The next step is to add the Acorn action "Layer on Images".  You can do this by searching for "Acorn" in the search field, or choosing "Photos" from the Library column and finding it in the next column to the right.  Double click on the "Layer on Images" entry.

Before adding your action, Automator will ask you if you want to add a "Copy Finder Items" action.  Since you likely want to keep your original images as they are, press the "Add" button.  Your workflow should look like this now:

￼

Now tell Automator what to use as a watermark.  Click on the "Image to add" pulldown, and find the watermark image you'd like to use.  For this example, choose "Bottom Left" for the "Location" pulldown to place the watermarks in the bottom left hand corner of the images.  The configured action should now look like this:

￼

Finally, save your Action, and then run it!  A copy of the Originals folder will be made (most likely named "Originals 2").  Acorn will then open up each image in that folder, add the watermark to it, save the image, and close it.  Success!  And completed in a fraction of the time compared to doing this all by hand.


<%= startRoundWarningDiv(writer) %>Note For App Store Users: If you've purchased and downloaded Acorn from the Mac App Store, certain AppleScripts, Automator Actions, and JSTalk scripts may not work for you because of sandboxing restrictions required by Apple.  The direct version of Acorn does not have these issues (and if you have run the App Store version of Acorn at least once, the direct version will run registered, so it's easy enough to switch if you need to).<%= stopRoundWarningDiv(writer) %>

<%= startRoundWarningDiv(writer) %>
Automator Warning: If Automator gives you some sort of warning about the Action not working correctly, save your action and try again.<%= stopRoundWarningDiv(writer) %>


c0url: batman_logo.html
c1subject: Batman Logo
c2body:
Create the Batman Logo

￼
This tutorial will outline how you can create the batman logo using shape operations in Acorn.  The colors used for the fill of the shapes as you follow along with the tutorial does not matter, as you can easily change the shape color in the final steps.

To start, go to File ▸ New and enter the dimensions of 1300 x 800 pixels with a white background.  Choose the elliptical shape tool and draw out an oval with a fill but no stroke.  With the oval selected, change the dimensions to 1056 x 560 in the inspector palette.  Go to View ▸ Guides and Grids and make sure Snap To Canvas is checked.  Center the oval in your canvas using the move tool.

￼
Draw out another oval with a fill but no stroke.  It will be helpful for lining things up if this oval is a different color than the first oval.  Change the dimensions of the oval in the inspector palette to 145 x 231 pixels and the angle to 45 degrees.  

￼
Duplicate the shape you just created, Shape ▸ Duplicate Shape.  Change the angle of the duplicated shape to -45 degrees in the inspector palette.  Add a ruler to your canvas View ▸ Show Rulers.  Drag on the ruler with the move tool to create a guide (for more information on this, read 'Rulers and Guides').  Place a horizontal guide at 586 pixels and vertical guides at 385 and 915 pixels.  The canvas origin here is set to the top left.  You can modify this in the preferences.  Using the move tool, position your ovals so they are centered within the guides.   

￼

Create another oval.  Change the dimensions to 184 x 272 pixels in the inspector palette.  Duplicate your oval and then create a horizontal guide at 630 pixels and vertical guides at 530 and 770 pixels.  Center the 2 ovals you just created within these guides.

￼

Create another oval and change the dimensions to 153 x 334 pixels with an angle of 18 degrees.  Duplicate your oval and change the rotation to -18 degrees.  Create a vertical guide at 650 pixels to define the center of your image and position the 2 ovals you just created so they create a point at the center guide (grey color added to ovals below to show their positions).  

￼
Select all your shapes, Select ▸ Select All.  Choose Shape ▸ Difference Paths.  This subtracts the small ovals from the large oval.  Choose View ▸ Guides ▸ Clear Guides.

￼
Now it's time to work on the top of the bat.  Again, choose the elliptical shape tool and draw out an oval.  Change the dimensions to 187 x 191 and set the angle to -10 in the inspector palette.  Duplicate the oval, Shape ▸ Duplicate Shape and change the angle to 10 degrees.  Drag out a horizontal guide and place it at 228 pixels.  Place vertical guides at 495 and 805 pixels.  Center your ovals within these guides.  

￼
Add a guide that lines up with the uppermost point of the bat shape.  Choose the rectangle shape tool in the tools palette.  Draw out a rectangle that is centered between all the guides currently present but goes slightly beyond the borders of the vertical guides.  

￼


Select all your shapes, Select ▸ Select All.  Choose Shape ▸ Difference Paths to subtract the ovals and rectangle you created from the main batman shape.

￼
To create the bat head and ears, choose the elliptical shape tool and draw out a circle that barely sticks out from the lower portion of the bat head region.  

￼

Create a triangle using the star shape tool (for more information on this read 'Stars').  Go to Shape ▸ Convert to Bezier Shape.  Position and resize the triangle using the move tool to create a bat ear.  Make sure the tip of the triangle touches the guide you created at the top of the bat shape.  Duplicate the triangle and position it to create the second bat ear.  

￼
Select all your shapes, Select ▸ Select All.  Choose Shape ▸ Union Paths to add the oval and triangles you created to the main batman shape.  Go to View ▸ Guides ▸ Clear Guides.

￼
It's time to add the final oval shape.  Chose Layer ▸ New Shape Layer.   Click on the elliptical shape tool and draw out an oval.  Check the stroke box in the inspector palette and set it to a stroke of 30.  Set the dimensions of the oval to 1158 x 658 and center the shape in the canvas.  Choose black as the color in the front color well and a bright yellow in the back color well.  Move this layer below the bat shape layer, but above the white background.

￼

And you're done!
 ￼

Download the finished image: batman_tutorial.acorn


c0url: bezier_curves.html
c1subject: Bezier Curves
c2body:
Bézier Curves


￼
The bézier pen tool is a shape tool used to create custom vector shapes.  You can also select it by using keyboard shortcut "P".  When the bézier pen tool is selected your cursor will look like the tip of an ink pen.

Creating a Bézier Shape

Bézier shapes have line segments, anchor points, and control handles. 
	⁃	Line Segments: Line segments are what make up the form of your shape. They are connected by anchor points.
	⁃	Anchor Points: The anchor points are the points where your line segments meet. They define the position of your line segments and are the foundation for controlling the curve of your line.
	⁃	Control Handles: The control handles allow you to apply and modify curves to your line segments. 


￼
When you click on your canvas with the bézier pen tool, an anchor point will appear. You can then click on another area of the canvas to create a straight line.  Continue placing anchor points by clicking (or clicking and dragging to make curved line segments) until you get the shape you want.  You can hold down the shift key as you are clicking if you want to snap your line segments to the closest 45 degree angle. Double click to finish creating the shape, hit the escape key, or choose Shape ▸ Bézier Stuff ▸ Close Path.

Bézier shapes have the same shape options such as fill, stroke, width/height, and drop shadow available in the inspector palette as the other shape tools.  For more information read the 'shape tools' tutorial.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Bézier Basics

Select Anchor Points (A):  Click and hold on the bézier pen tool and a drop down menu will appear.  Choose 'Bézier Anchor Select Tool' (keyboard shortcut 'A').  You can then click on an anchor point to select it.  
	•	To select multiple anchor points hold down the shift key when selecting.  
	•	To select the next point in a bézier shape, press the > key. The < key will select the previous point. 
	•	Holding down the shift key will keep the current selected points, and add the next one to the selection.

Adding Anchor Points: To add points to an existing bézier shape, select the shape and choose the bezier pen tool.  Hold down the shift key and click on the area of the shape where you want the anchor point to appear.  You can also use Shape ▸ Bézier Stuff ▸ Add Points to add more points throughout the shape.

Deleting Anchor Points:  To delete anchor points, select an anchor point then hit the delete key.  Alternatively, you can select the bézier pen tool and hold down the option and command keys simultaneously and click on the anchor point to remove it.

Reset Bézier Control Points (Shift - C):  Click and hold on the bézier pen tool and a drop down menu will appear.  Choose 'Reset Bézier Control Points Tool' (keyboard shortcut 'Shift - C').  You can then click on an anchor point to straighten an existing curve, or click and drag on an anchor point to create a curve.  There is also an option to reset bézier control points under the Shape ▸ Bézier Stuff menu.

Closing a Bézier Path:  Press the enter or return keys to close a bézier path. Pressing the escape key will finish editing a path, but will keep it open.

Extending a Bézier Path:  Double click on an open bezier shape to continue extending it.  You can also use Shape ▸ Bézier Stuff ▸ Extend Path.

￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Editing Bézier Shapes

You can use the arrow keys to move selected control points in a bézier shape or click and drag on a control point to modify its position.  

Curved Line Segments:  To curve an existing line, you can either use the reset bézier control points tool as described above, or hold down the option key and click on an anchor point. The cursor will change to look like this: ￼.  Drag your cursor and a control handle will be pulled out of the anchor point. Moving the control handle around allows you to adjust the curve of your line. Once you click out of the shape, the handle will disappear.  You can also make the lines curved as you draw them.  Just click and drag when placing a new anchor point to make the line segment curved. 
￼

Straighten Line Segments: To make a curved line straight, use the reset bézier control points tool as described above, or hold down the option key and click once on the anchor point. 

Other Useful Editing Tips  
	⁃	To delete a selected segment in a bézier shape, hold down the option key when pressing the delete key.
	⁃	Hold down the shift key when adjusting the control point will snap it to 45 degree increments as you click and drag. 
	⁃	Use Shape ▸ Bézier Stuff ▸ Align Anchors to Pixels and Align Anchors to Half Pixels (appears by holding down option key for the latter menu item) to align selected anchor points in your shape to the pixel grid (or half of it).  This helps with making crisp lines.
	⁃	You can temporarily toggle the "snap to pixels" setting when moving a bézier anchor by holding down the control key while clicking and dragging.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Converting Text & Shapes into Bézier Shapes

To convert text into a bézier shape, first type out some text.  Then with the text selected, go to Shape ▸ Bézier Stuff ▸ Convert to Bézier Shape.  You can now modify the text with the anchor points and control handles.

To convert a shape into a bézier shape, first draw out your shape.  Then with the shape selected go to Shape ▸ Bézier Stuff ▸ Convert to Bézier Shape.  

To turn the stroke of a shape into a bézier shape, choose Shape ▸ Bézier Stuff ▸ Outline Path.
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

<% if (writer.contextType() == "html") { writer.write('<div class="seeAlso">'); } %>See Also:  Bézier Basics Part 1  (video tutorial), Bézier Basics Part 2 (video tutorial) <% if (writer.contextType() == "html") { writer.write("</div>"); } %>


c0url: black_&_white.html
c1subject: Black & White
c2body:
Changing a Color Photo to Black and White



There are a few different ways to convert a color photo to black and white in Acorn.  The different methods give you various amounts of control over how your image ultimately looks.  

Grayscale Filter

The grayscale filter can be found under Filter ▸ Color Adjustment ▸ Grayscale.  The bias settings adjust the percentage from each channel (red, green, and blue) to use in the final calculation. The default settings are 30% red, 58% green, and 11% blue as this is the standard way to convert RGB to grayscale.  If you have more specific needs, you can adjust those values. 
￼



 ￼         ￼

Left: Original image;  Right: Grayscale filter with default settings.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
                                                                               
Color Controls Filter

An additional method for changing your image to black and white is to use the color controls filter.  The color controls filter can be found under Filter ▸ Color Adjustment ▸ Color Controls.  Drop the saturation value down to 0 to remove all color.  You may want to also adjust the contrast if necessary to your liking.  


￼



￼     ￼

Left:  Original image; Right:  Color controls filter with saturation set to 0 and contrast 1.08.  
                                                     

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: blending_modes.html
c1subject: Blending Modes
c2body:
Blending Modes


Compositing is the process of taking one or more layers and putting them together into a single image.  This is what Acorn does when it draws multiple layers on top of each other, forming a single image in its canvas.  Acorn gives you the ability to decide how each layer is drawn, which is known as its "blend mode".  Most of the time, you will probably have a layer's blend mode set to "Normal".  However, sometimes you will want to change it depending on how you want your image to appear.

To change a layer's blend mode, select the layer you want to change in the layers list, and choose an option from the Blending drop down menu.  Alternatively you can cycle through a layer's blend modes using keyboard shortcuts Option Shift + or Option Shift -.  The best way to become familiar with blending modes is to play around and experiment.  


￼

In the definitions below, the term 'source' refers to the top layer and 'destination' refers to the bottom layer.  The blending mode is being changed for the top layer, and the bottom layer is the layer directly below in the layers list.  


Normal
This one is pretty self explanatory, and is the default blend mode for new layers.  Acorn draws the source layer on top of any layers below it, without any specific blending tricks.

Darken
The Darken blend mode works by keeping whichever pixels are darker on the top layer or the bottom layer.  

Multiply
Multiply blend mode multiplies the top layer with the bottom layer.  The resulting color is at least as dark as either the source or background color.  Multiplying any color with black will give black, and multiplying any color with white preserves the original color.  

Color Burn
Color Burn will darken the bottom layer over the top layer.  White produces no change.  

Linear Burn
Linear Burn mode sums the value in the two layers and subtracts 1. This is the same as inverting each layer, adding them together (as in Linear Dodge), and then inverting the result. Blending with white leaves the image unchanged.

Darker Color
This mode compares the total of all channel values for the source and background color and displays the lower value color. 

Lighten
The opposite of Darken, the Lighten blend mode draws whichever parts are lighter on the top layer or the bottom layer.

Screen
Screen blend mode multiplies the inverse of the top layer with the inverse of the bottom layer to obtain colors that are at least as light as either of the two contributing colors.  Screening any color with white will produce white while screening with black will leave the original color unchanged.

Color Dodge
Color Dodge will brighten the bottom layer over the top layer.  Black produces no change.

Linear Dodge
Linear Dodge sums the values in the two layers. Blending with white gives white. Blending with black does not change the image.

Lighter Color
Compares the total of all channel values for the top and bottom color and displays the higher value color. 

Overlay
Overlay blend mode either multiplies or screens the top layer with the bottom layer, depending on the color of the bottom layer. The result is to overlay the top layer while preserving the highlights and shadows of the bottom layer. 

Soft Light
Soft light blend mode either darkens or lightens colors, depending on the top layer color.  If the top layer color is lighter than 50% gray, the bottom layer lightens, similar to dodging.  If the top layer color is darker than 50% gray, the bottom layer darkens, similar to burning.

Hard Light
Hard light blend mode either multiplies or screens colors, depending on the top layer color.  If the top layer color is lighter than 50% gray, the bottom layer is lightened, similar to screening.  If the top layer color is darker than 50% gray, the bottom layer is darkened, similar to multiplying.  

Pin Light
Replaces the colors, depending on the blend color. If the blend color (light source) is lighter than 50% gray, pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change. If the blend color is darker than 50% gray, pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change. 

Hard Mix
This mode adds the red, green and blue channel values of the top layer color to the RGB values of the bottom layer color.  All pixels are changed to primary additive colors (red, green, or blue), white, or black.

Difference
Difference blend mode subtracts either the top layer color from the bottom layer color, or the reverse, depending on which has the greater brightness value.  Top layer values that are black produce no change; white inverts the bottom layer color values.

Exclusion
Exclusion blend mode produces a lower-contrast version of the difference blend mode.  Top layer values that are black do not produce a change; white inverts the bottom layer color values.

Subtract
This mode looks at the color information in each channel and subtracts the top layer color from the bottom layer color. 

Divide
Divide looks at the color information in each channel and divides the top layer color from the bottom layer color.

Hue
Hue blend mode uses the luminance and saturation values of the bottom layer with the hue of the top layer.

Saturation
Saturation blend mode uses the luminance and hue values of the bottom layer with the saturation of the top layer.  Pure gray areas do not produce a change.

Color
Color blend mode uses the luminance values of the bottom layer with the hue and saturation values of the top layer.  This mode preserves the gray levels in the image.

Luminosity
Luminosity blend mode uses the hue and saturation of the bottom layer with the luminance of the top layer to create an effect that is inverse to the effect created by the color blend mode.
Mask
Mask blend mode works under the same principles as a layer mask.  White in the layer will expose pixels in the layer below, where as black hides them.


Porter Duff Compositing

Source Atop
The area of the source (top image) which overlaps the destination (bottom image) replaces the destination, with the remaining destination retained.

Destination Over
The destination is placed over the source.

Destination In
The area of the destination that overlaps the source is retained.

Destination Out
The area of the destination that falls outside the source is retained.

XOR
The non-overlapping regions of the source and destination are combined, eliminating the area that was overlapping.



<%'<div class="seeAlso">'%>Note: Descriptions taken from Apple's Quartz 2D Programming Guide<%'</div>'%>


c0url: bokeh_effect.html
c1subject: Bokeh Effect
c2body:
Bokeh Effect 


￼


This tutorial will outline how to create a homemade desktop image with a 'bokeh effect' using Acorn’s shape processor, gradients and filters.  Create a new image in Acorn, File ▸ New.  Select the image dimensions using the preset drop down menu, and choose 'monitor resolution'.   Choose a black background.

￼
Go to Shape ▸ Process ▸ Generate Shapes.  Click on the cogwheel at the bottom of the shape processor window and choose “generate shapes” again.  The settings used here can be seen below.  

￼

Make sure both the stroke and fill color wells are set to white.  Then click on one of the fill color wells and decrease the opacity to around 40-50%.  Click on the other fill color well and decrease the opacity to around 20-25%.  Click on any shape tool in the tools palette and adjust the stroke of your shapes to your liking, or remove the stroke altogether.

￼

Add a new layer, Layer ▸ New Layer.  Click on the gradient tool and apply a gradient.  Change the blending mode of the gradient layer to “Overlay”.

￼

Click on the layer with your generated shapes and choose Filter ▸ Blur ▸ Box Blur.  Adjust the blur radius.

￼￼

Add a new layer, Layer ▸ New Layer.  Place the layer just above the black background layer in your layers list.  Go to Filter ▸ Generator ▸ Render Clouds.  Adjust the scale, power, and seed values.  Decrease the opacity of the layer to around 20%.

￼￼



Now, go back and adjust the options in the shape processor, such as the count, radius, and seed.   You can also play around with removing the stroke (as shown in the image below), or adding more randomly generated shapes.


￼


c0url: cartoon_character.html
c1subject: Cartoon Character
c2body:
Create a Cartoon Character

￼

This tutorial will outline how to create a cartoon character similar to the Powerpuff Girls using vector tools in Acorn. 

To start create a new image in Acorn, File ▸ New.  The dimensions of 1000 x 1000 pixels with a white background is used here.  Choose the elliptical shape tool and draw out an oval with a black stroke and a light skin colored fill.  The oval seen below is 556 x 458 pixels with a stroke of 12.

￼
Duplicate the oval shape, Shape ▸ Duplicate Shape.  Uncheck the fill box in the inspector palette.  Choose Layer ▸ New Layer with Cut Selection.  Move this layer down in the layers list so it is just above the white background layer.  This layer will be used to frame the character's face later on.
￼
Click on the top layer in the layer list and draw out a circle with a white fill and a thin black stroke.  

￼
Now draw out an oval with a fill but no stroke.  This oval will be the iris of the eye.
.
￼
Duplicate the last oval.  Change the fill to black and decrease its size slightly so some of the iris is showing on the bottom and right hand side.
￼
Duplicate the last oval.  Change the fill color to white.  Decrease the size of the oval to create the appearance of a light reflection in the pupil.

￼
Repeat the steps above for creating the other eye, except without the outer white oval.  Add a black stroke to the iris oval (the color of the eye).  This eye should be smaller than the first to give the appearance that it is wrapping around the side of the head.
￼
Now it's time to create the mouth.  Draw an oval with a black fill and no stroke.  Duplicate the oval, and move the duplicate up slightly exposing a little of the oval below.  The duplicated oval is shown in white below just to illustrate its position overlapping the oval below it.

￼
Select both ovals you just created using the move tool.  Hold down the shift key to select multiple shapes at one time.  Go to Shape ▸ Difference Paths.  Rotate the mouth slightly to the left.

￼
To create the hair, choose the elliptical shape tool and draw out an oval with a fill and a black stroke.  The upper boundaries of the oval should match the curvature of the head.

￼
With the hair oval selected, choose Shape ▸ Convert to Bézier Shape, then choose Shape ▸ Bézier Stuff ▸ Add Points a couple of times.  Click on the Bézier pen tool in the tools palette.  To learn more about this tool, read 'Bezier Curves'.

￼
Using the Bézier Anchor Select Tool, move the bottom points of the oval up to create the style of hair you'd like.  You can make the bangs of the hair appear either pointed or rounded by using the Reset Bézier Controls Points tool.

￼
Choose the elliptical shape tool again and draw out two circles to create hair buns.  Move one bun to the left side of her head and choose Shape ▸ Arrange ▸ Send to Back.  Place the other bun on the right side of her head.

￼
Now give her some arms.  Draw out two ovals with the same skin colored fill and black stroke as her head.

￼
Select both shapes and choose Shape ▸ Convert to Bézier Shape, then Shape ▸ Bézier Stuff ▸ Add Points.  Using the Bézier Anchor Select Tool, move some of the points to give the arms the appearance you want.

￼
Select each arm shape and choose Shape ▸ Arrange ▸ Send to Back.  Move the arms so the head is slightly overlapping them.  

Now is a good time to go ahead and place the face frame oval into place (this was created in one of the first steps).  Move the face frame oval layer to the top of the layers list.  Moving this layer to the top of the layers list allows the face frame oval to be on top of all the other shapes you created.

￼
Choose Layer ▸ Merge Down.  Select the right hair bun shape and choose Shape ▸ Arrange ▸ Bring to Front.

￼
Choose the rectangle shape tool and draw out a rectangle that has a black stroke and a fill the same color as the iris of the character's eyes.  Rotate the rectangle slightly.  

￼
Go to Shape ▸ Arrange ▸ Send to Back.  Using the rectangle shape tool, draw out a rectangle with no stroke and a black fill.  Rotate and place the rectangle so it appears as a stripe across her shirt.  Choose Shape ▸ Convert to Bézier Shape and play around with moving the points to give the stripe a slight curvature.

￼
Create two oval shapes with a white fill and black stroke.  These will be her shoes.  Rotate the ovals and place the one on the right higher than the one on the left.
￼
Add a small oval with a black fill and no stroke to the bottom third of each of her shoes.

￼
Add a small white oval to each shoe to give her shoes the appearance of Mary Jane's.  

￼
Using the move tool, select the rectangle shape that makes up her body and choose Shape ▸ Convert to Bézier Shape and then Shape ▸ Bézier Stuff ▸ Add Points.  Select the Bézier Anchor Select Tool.  Move the points at the bottom right of her body inwards so that her leg is lined up with her shoe.
￼
Draw out a rectangle with a white fill and black stroke.  This will be her sock.  Rotate and size the rectangle so it fits on her leg.  Choose Shape ▸ Arrange ▸ Send to Back, then Shape ▸ Arrange ▸ Bring Forward so that her shoe overlaps the sock.

￼
Create a new shape layer, Layer ▸ New Shape Layer.  Draw out a rectangle with a fill but no stroke.  The color of the fill doesn't currently matter since a gradient will be added to it shortly.  Choose Shape ▸ Convert to Bézier Shape.  Decrease the opacity of this layer slightly to around 75% in order to see your character underneath.

￼
Using the Bézier Anchor Select Tool, move the points to place the rectangle at a slant so it narrows towards the bottom.

￼
Return the layer to full opacity.  Select the gradient tool and create a two color gradient with one color being the same as the character's eye color, and the other being a slightly lighter shade of the same color.  Draw out the gradient on the shape.  Move the gradient shape layer below the main character layer in the layer list.

￼

And there you have it!  You've created your very own cartoon character!
￼


c0url: clone,_smudge,_burn,_and_dodge.html
c1subject: Clone, Smudge, Burn, and Dodge
c2body:
Clone, Smudge, Burn, and Dodge Tools


The touch-up tools include the clone, smudge, burn, and dodge tools.  You can find them in the middle section of the tools palette.  Hold the shift key and press "O" repeatedly to toggle through the touch-up tools.  To quickly resize a touch-up tool, hold down the control and option keys while clicking and dragging your mouse on the canvas back and forth.	


You can configure and modify any touch-up tool brush via Acorn’s brush designer.  Just click on the brush image present in the inspector palette to open the brush designer window.  From there you can modify spacing, softness, flow, and jitter among other variables.  For more on this topic, read about the Brush Designer.  If you want to use one of Acorn’s preset brushes for your touch-ups, just click on the brush preview window to access the brush drop down menu.  

￼

Pro Tip: When working with the touch-up tools it is best to work on a duplicate layer in order to preserve your original image.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
￼
Clone

With the clone tool you are able to copy a part of your image and apply that over an unwanted item to cover it.  In the Inspector Palette you can adjust the size of the clone tool, modify the flow setting, and turn tablet pressure on and off.   The flow setting adjusts how much paint is laid down with each stroke of the brush.

To see a specific example of the clone tool in use, read 'Using the Clone Tool'.
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

￼
Smudge

The smudge tool takes a color from where you start clicking and smears it into other colors of your image as you drag your cursor, like smearing wet paint.  This is useful for removing flaws from photos.

The smudge options in the Inspector Palette are the same as the clone tool.
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

￼￼
Burn and Dodge

The burn tool darkens the pixels you paint. This is great if you want to darken certain areas of your image.  The dodge tool works in the same way as the burn tool, only it lightens the pixels, rather than darkens them.

The Inspector Palette shows the size, flow, exposure, and range of the burn and dodge tools.  

	•	The exposure adjusts the amount of darkening or lightening the tool will perform. To make subtle changes, change the exposure to a lower setting. 

	•	The range determines which tones are affected by the tool. Highlights will affect lighter tones, midtones will affect the middle tones, and shadows will affect the darker tones.
￼




<%'<div class="seeAlso">'%>See Also:   Using the Clone Tool <%'</div>'%>


c0url: cogwheel.html
c1subject: Cogwheel
c2body:
How to Create a Cogwheel or Gear
￼
This tutorial will guide you through an easy way to create a cogwheel or gear using vector shapes.  To start, create a new image in Acorn, File ▸ New.  The dimensions of 1000 x 1000 pixels with a white background is used here.  Select the star shape tool in the tools palette and make a star with a fill but no stroke.  The color of the star doesn't currently matter.

￼
With the star shape selected, change its width and height to 700 x 700 pixels in the inspector palette.  Go to View ▸ Guides and Grids, and make sure "Snap To Canvas” is checked.  Using the move tool, move the star to the center of the canvas.

￼
With the star shape still selected, choose View ▸ Quick Config Popover from the menu (or use the ‘backtick’ keyboard shortcut).  Change the number of star points to 10 or 11.  

￼

Select the oval shape tool from the tools palette and draw out a circle with a fill but no stroke.  The color of the circle doesn't matter as it can be changed later.  Change the width and height of the circle in the inspector palette to 490 x 490 pixels.  Using the move tool, move the circle to the center of the canvas.

￼
Choose Select ▸ Select All from the menu.  Then go to Shape ▸ Intersect Paths.  

￼
Choose the oval shape tool and draw a circle.  With the shape you just drew still selected, change the width and height in the inspector palette to 400 x 400 pixels.  Using the move tool, move the circle to the center of the canvas.
￼
Choose Select ▸ Select All from the menu.  Then go to Shape ▸ Union Paths. Change the width and height of the shape to 500 x 500 in the inspector palette.

￼
Select the oval shape tool again and make another circle.  Change the width and height of the new circle to 230 x 230 pixels and move the circle to the center of the canvas.  
￼
Choose Select ▸ Select All from the menu.  Then go to Shape ▸ Exclude Paths. 

￼
With your shape selected, change its color to whatever you desire by clicking on the back color well and choosing a color from the colors palette.  Then, click on the 'fx' button at the bottom of the inspector palette.  Choose Stylize ▸ Drop Shadow.  The drop shadow settings used here can be seen below.

￼



￼



Tutorial Credit:  Thank you to Troye Hering for outlining the steps to this tutorial.  


c0url: color_adjustment.html
c1subject: Color Adjustment
c2body:
Color Adjustment



Under  Filter ▸ Color Adjustment there are 5 filters for adjusting the color of your image: Color Controls, Exposure Adjust, Gamma Adjust, Hue Adjust and White Point Adjust.




Color Controls

You can use the color controls filter to change the saturation, brightness, and contrast of your image.  As with all filters in Acorn, you can save your changes as presets.


Saturation
Saturation is the intensity of color in your image. If you slide the slider to the left (to 0), the image will become black and white, and if you slide it to the right (2.00) it will become fully saturated.
￼
￼￼￼
				No Saturation						       Original Image                                                      Full Saturation

Brightness
Brightness is the darkness or lightness in your image.  If you drag the brightness slider all the way to the left your image will become totally black, if dragged to the right it will become completely white. You should only need to adjust the brightness of an image a little bit, especially if the photo has a correct exposure.

Contrast
Contrast is the difference between the lights and darks of your image. A higher contrast will have darker darks and lighter lights.  A lower contrast or no contrast will make the tones in the image appear the same.

￼￼￼
				No contrast  						      Original Image                                                       Full Contrast
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Exposure Adjust

The exposure is how much light is exposed to the film or sensor when taking a photo. If the exposure is too high, the image will be very bright with very little darks. If the exposure is too low, the image will be darker.  You can adjust this using the Exposure Adjust filter.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Gamma Adjust

Gamma Adjust leaves blacks and whites unchanged, while adjusting the mid-point colors of your image.  A high gamma level can create a washed out appearance to an image, but a small adjustment usually creates a pleasing result.  


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Hue Adjust

The Hue Adjust filter adjusts the color of your image, leaving black, white, and gray alone.

There is a dial to adjust the color of your image. Think of the dial as a compass. If the dial is placed south, it will show your original image, to the west and it will become red, north for blue, and east for green.
￼
￼￼￼
		                 Red Hue  							  Blue Hue   					                Green Hue
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
White Point Adjust

The White Point Adjust filter determines what "white" is in your photo. Light isn't usually really white. It can have tints of yellow, orange, or blue. The true color of white depends on the lighting when the photo was taken. For best results choose a natural color that is close to white.



￼￼￼
                                 Blue light                                                           White light                                                          Yellow light

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

<% if (writer.contextType() == "html") { writer.write('<div class="seeAlso">'); } %>See Also:  Curves and Levels <% if (writer.contextType() == "html") { writer.write("</div>"); } %>


c0url: color_changing_tutorial.html
c1subject: Color Changing Tutorial
c2body:
Color Changing


This tutorial will outline how to change colors in your image using filters and blending modes.

Hair

Open up your image in Acorn, File ▸ Open.  Create a new layer, Layer ▸ New Layer (⇧⌘N). Set the blending mode of this layer to Color. 
￼

Choose the color you wish to make the hair by clicking on the front color well and selecting a color in the colors palette. Using a hard brush (B), paint over the hair.  This may look different with different colored hair. You may have to experiment with opacity levels and blending modes to get the effect you want.  With dark hair, you may need to lighten the hair with the dodge tool set to Highlights.
￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Eyes

Open your original image, File ▸ Open.  Create a new layer on top of the original image, Layer ▸ New Layer (⇧⌘N). On this new layer, paint over the original eye color with a color of your choice.  Choose the color by clicking on the front color well and selecting a color in the colors palette.

￼

When you have covered the entire iris, set the blending mode of the layer to Hue.  You can set it to any blending mode to achieve different results. Play around!

￼
You can also choose to add a second color to the eye. To do this, create a new layer. Select a different color and a small hard brush. Paint a circle around the lens of the eye.

￼
Set the Blending Mode to Color.  Go to Filter ▸ Blur ▸ Gaussian Blur and adjust the blur radius.  You can also play around with decreasing the opacity of the layer.

￼

<%'<div class="seeAlso">'%>See Also: Video Tutorial - Touching Up Skin Tone<%'</div>'%>


Photo Credits
Eye © Mykl Roventine 


c0url: color_correction.html
c1subject: Color Correction
c2body:
Color Correction using Curves and Levels



Is your image too dark?  Too light?  Slightly blurry?  Learn how to fix it using levels, curves, and other filters.  Every image is different and there is no one size fits all with color correction.  Once you have an understanding of the basics, play around with your images to hone your technique.  This tutorial assumes you have read the 'Levels', 'Curves', and 'Filters' tutorials.  



Too Dark and Blurry


This image of the Ozarks at sunset is dark and slightly blurry.

￼
Start by adjusting the levels, Filter ▸ Color Adjustment ▸ Levels and clicking the auto levels button ￼ (keyboard shortcut ⇧⌘L).  Then go to Filter ▸ Color Adjustment ▸ Curves (⇧⌘M).  The midtones in this image have been lightened and the highlights darkened.  

￼

You can stop here, or you can continue on and give the foliage a little more definition.  Add the following filters:  Sharpen ▸ Unsharp Mask, and Sharpen ▸ Luminance.  Adjust the values as needed.

 
￼      ￼


					      Before									      		After


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


Too Dark and Blue

This image of snowshoeing in the North Cascades could use a little help.

￼

To start, adjust the levels, Filter ▸ Color Adjustment ▸ Levels (⌘L) .  Then choose Filter ▸ Color Adjustment ▸ Curves (⇧⌘M).  Play around with lightening the midtones, shadows, and highlights in the RBG curve.

￼
You can also experiment with the red, green, and blue curves.  The red highlights have been increased slightly to draw out the warm colors in the clouds.  The blue highlights have been decreased slightly to take some of the blue out of the snow.

￼￼

Now navigate to Filter ▸ Sharpen ▸ Unsharp Mask .  Click on the '+' in the filter window and add Sharpen ▸ Sharpen Luminance.  Adjust the values as needed.


￼          ￼     
						Before                                                	    		       After


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


Too Green and Poor Contrast


This example is of a very green image of the Japanese Garden at the Missouri Botanical Gardens.  
￼
Adjust the levels, Filter ▸ Color Adjustment ▸ Levels (⌘L).  Go to Filter ▸ Color Adjustment ▸ Curves (⇧⌘M).  The histogram shows that this image has a lot of bright midtones.  You can darken them slightly by dragging the middle of the RGB curve down.

￼

If you're happy with the image, you can stop here.  You've improved the contrast.  Or you can continue on and decrease the green in this image. Click on the 'Green' button at the top of the curves histogram.  Drag the green midtones area of the curve slightly downwards.  You can also decrease the appearance of green highlights area by dragging that area of the curve slightly downwards.

￼


￼      ￼
					    Before   											After 
 										
<%' <hr/> '%>


c0url: color_highlight_tutorial.html
c1subject: Color Highlight Tutorial
c2body:
Creating a Color Highlight



￼


A color highlight is great way to create a focal point and contrast in a photograph.  First, open your image in Acorn, File ▸ Open.

￼
Create a duplicate layer by right clicking on the layer in the layers list and selecting "Duplicate Layer...." or using ⇧⌘D.  Change the duplicated layer to black and white.  To do this go to  Filter ▸ Color Adjustment ▸ Color Controls and turn the saturation all the way to 0.  Make sure the black and white layer is placed on top of the color layer in the layers list.

￼
￼
Now, choose Layer ▸ Add Layer Mask.  Select the brush tool from the tools palette and choose a thick brush such as 'Painting 2'.  Set the front color well to black.  Brush over the areas where you want color to show through.  For more detailed information on this topic, read 'Layer Masks'.  

￼

If you make a mistake, it can be easily corrected by changing the brush color to white and brushing over the area.

You can also play around with the opacity of the duplicated layer to create a different look.  The opacity here has been reduced to 65%.


￼





Photo Credits
© Vitaly Korovin 


c0url: coloring_a_sketch.html
c1subject: Coloring a Sketch
c2body:
Coloring a Sketch

￼

Open the sketch image in Acorn, File ▸ Open.  You can scan in your own sketch and open it in Acorn or see the link in the photo credits to use the one in this tutorial.  Also, you can follow the steps in the 'Image to Illustration' tutorial to create an outline from a photo or non-sketch image.  

Add a new layer, Layer ▸ New Layer (⇧⌘N).  Using the flood fill tool, fill the new layer with the color white.  Move this layer to the bottom of your layers list.  
￼
Change the blending mode of the sketch layer to 'Multiply'.  This will allow the black lines of the sketch to stay present, while allowing colors added to take the place of the white.  The sketch layer must always be the top-most layer in the layers list.

Add a new layer, Layer ▸ New Layer (⇧⌘N).  Place it under the sketch layer but above the white background layer in the layers list.  Choose the paint tool in the tools palette and click on the foreground color well to pick your color.  Begin coloring.

￼
Continue to color.  Add new layers for different colors if you want more control over changing the colors as you work.
 
￼

￼
Add a layer to your layers list just above the white background layer, Layer ▸ New Layer (⇧⌘N).  Click on the gradient tool and create a light blue to transparent gradient to give the appearance of sky.  Read up on the gradient tool documentation if you aren't familiar with how to create gradients.
￼

For a little extra fun, try adding a sun to the image.  While still on the gradient layer, choose Filter ▸ Generator ▸ Sunbeams.  Adjust the color of the sun and move the sun into position.

￼


￼




Photo Credit
© jimblodget 


c0url: colors_palette.html
c1subject: Colors Palette
c2body:
Colors Palette


The Colors Palette lets you pick, sample, and store colors in a variety of ways. To open the Colors Palette click on the front or back color well, choose the Window ▸ Colors menu item, or use keyboard shortcut ⇧⌘C.


Selecting Colors

Along the top of the window is a toolbar with various options to pick colors. There are wheels, sliders, spectrums, crayons, and hexidecimal color codes. Playing around with the sliders is one way to get results.

￼ If you already have a picture with the color you want then click on the eyedropper, put the crosshairs over the color you want, and click once. This will set the color to the one you just sampled.  The color will show up in the color bar next to the magnifying glass. 

When using the system eyedropper to pick up a color on the canvas, it takes the composite of the layers.  If you want to pick a specific color (including alpha) from a single layer, use a drawing tool such as the paint tool, and hold down the option key to pick the color. 

An alternative way to bring up the eyedropper is View ▸ Select Color.


Color Space and Color Profile

Sometimes there's a mismatch between the colorspace that the color picker is using, and the colorspace that the image is using.  This results in a color showing up that doesn't match the color that was picked.  You can find the color panel's color space by clicking on the cogwheel color space button next to the RGB sliders.
￼

For the image, you can find out the color profile by selecting the Image ▸ Assign Color Profile menu item.  Set the color profile so that the color picker and image color profile are the same.  

An additional method to try if the eyedropper is getting a color mismatch, is to select one of the drawing tools such as the paint, pencil, or fill tools.  Hold down the option key to bring up the color picker, and select your color in the canvas. 

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Adjusting the Opacity

You can adjust how opaque / transparent your color is by adjusting the opacity slider at the bottom of the color palette. 

A transparent color will have a vertical slash through it in the color bar.  The top portion is what the original color looks like without opacity, and the bottom is with the opacity applied:
￼



Pro Tip:  If you want to see both the color and opacity level of an existing color in your image, select the paint tool then hold down the option key while clicking on the color.  The color and its opacity will be displayed in the colors palette.  









￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Swatches

Colors can be stored by dragging the color from the color bar down onto the grid at the bottom of the palette.  

Keeping a swatch library can save you time later if you consistently use the same colors.  Any color swatch that you drag down into this section can be accessed from most other applications on your computer.  If you have a green you use on all of your stationary, you can store it and use it in Keynote, Pages, Mail, iWeb, etc.

￼



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: comic_text.html
c1subject: Comic Text
c2body:
Comic Book Text


￼

This tutorial will teach you how to create the look of action text seen in comics.  Comic book style text can be a fun addition to your image or project, and it is fun to create too!

Create a new image in Acorn, File ▸ New.  The example used here is 1000 x 1000 pixels with a white background.  Select the text tool.  Write each letter on its own separate layer by choosing Layer ▸  New Shape Layer after writing each letter.  The color of the text doesn't currently matter, it will be changed later.  The font, size, stroke, etc. can be seen in the inspector palette below.  Using the move tool, move each letter of your text so it is roughly lined up and spaced fairly closely.  

￼

Create another Shape Layer, Layer ▸ New Shape Layer.  Move it in the layers list so it is placed between the 'white background' layer and the 'P' layer.  Choose the circle shape tool and draw out an oval.  Preferably choose a color for your oval that is different from the text so it is easy to see.  Make sure the oval is longer than the width of your text.  Rotate the oval slightly by hovering over a corner of the shape selection.  A rotate icon will appear.  

￼

Now click on the 'P' layer.  Choose Layer ▸ Rasterize Shape Layer.  Repeat this process for the rest of the text layers.    Then, choose Layer ▸ Rotate and Transform ▸ Free Transform.  Drag the lower boundary of the 'P' down into the oval.  Double click to commit the transform.  Repeat this process for the other text layers.   Don't drag the 'O' into the oval, just have it touch the boundary.  

￼

Click on the 'oval' shape layer.  Go to Select ▸ Make Selection from Layer.  Click on the visibility eye in the layers list to hide the oval layer.  Click on each layer with text in it and hit the 'delete' key.  Choose ⌘D to deselect when you are done.
￼
Now select the 'P' layer and choose Layer ▸ Rotate and Transform ▸ Perspective Transform.  Push the upper right hand corner in slightly.  Repeat for the rest of the letters.

￼
The letters are slightly further away from each other now, use the move tool to bring them closer again.  Merge your letter layers down into one layer, Layer ▸ Merge Down.  Hit the ’fx' button at the bottom of the layers list and add the following filters.  

￼￼

It's time to skew the letters again.  Go to Layer ▸ Rotate and Transform ▸ Perspective Transform.  Pull the upper right hand corner of the box to the right a little.  Double click to commit the transform.

￼
Add a new shape layer, Layer ▸  New Shape Layer.  Select the Bezier shape tool from the tools palette.  Uncheck the fill and select a stroke of around 10-20 in the inspector palette.  Click on your canvas repeatedly to create a jaggedy edge outline.   

With your bezier shape still selected, hold down the back tick key (`) to bring up the shape pop-over window (or go to View ▸ Quick Config Popover).  Choose the blunt line join style. 

￼￼

Duplicate your Bezier outline layer (⇧⌘D).  Go ahead and hide your original 'Outline' layer by clicking the visibility eye to the left of it in the layers list to make your work clearer.  On the 'Copy of Outline' layer, select your shape and decrease the stroke to 0.  Add a bright red fill by checking the 'fill' box in the inspector palette.  Choose a red color in the back color well in the tools palette   

￼

While still on the 'Copy of outline' layer, click on the 'fx' at the bottom of the layers list and add the following filters:

￼

Then, click on the original 'Outline' layer.  Click the eye again in the 'Outline' layer to have it re-appear.  Click on the 'fx' and add the following filter:
￼

Move the 'outline' and 'copy of outline' layers below the 'POW!' layer.  Click on the 'POW!' layer and using the move tool, re-center it if necessary over the outline layers.  

￼



￼


c0url: copy_merged.html
c1subject: Copy Merged
c2body:
Copy Merged 


Copy merged is a way of flattening your layers or selection into a copy which can then be pasted or made into a new image.  The image below has 3 different layers:  a shape layer, the primary image layer, and a background layer.

￼

To quickly flatten and copy the entire layer list, click on Edit ▸ Copy Merged.  The copy will be placed on your clipboard.  You can then create a new Acorn file by choosing File ▸ New from Clipboard (⌥⌘N).  As you can see below there is now only one layer, 'image from clipboard'.  
￼
Alternatively, you can paste the copy into an already existing file.  Copy merged works with selections as well.  Make a selection of the area of your image you wish to copy.  The top half of the image has been selected below.

￼

Select Edit ▸ Copy Merged, and File ▸ New from Clipboard (⌥⌘N) or paste the copy into your desired location.

￼

Layer ▸ Flatten Image is another method of flattening your layers, but make sure you choose 'Save As' and rename your file immediately after performing this action otherwise you may lose your original work!  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Photo Credit
© BC Living


c0url: create_a_book.html
c1subject: Create a Book
c2body:
How to Create a Book 

￼
First, find a texture for your book cover.  You can always just use a plain color rather than a texture, but this example will outline steps using a texture.  The leather texture seen below can be found at http://cgtextures.com.  Open the texture file in Acorn, FIle ▸ Open.  Using Layer ▸ Rotate and Transform ▸ Scale and Rotate, scale and rotate the image to your liking.  As you can see in the tools palette, the leather texture has been scaled to 25%.   Click ‘Apply’ when you are done.  

￼

To decrease the empty space around your texture, choose Image ▸ Trim to Edges.  Save your texture image with a new name, File ▸ Save As.  Now select the texture by choosing Select ▸ Make Selection from Layer.  Copy your selection to the clipboard by choosing Edit ▸ Copy (⌘C).  

Go to FIle ▸ New.  Enter 1200 x 1200 pixels for the dimensions with a white background.   Click 'OK'.  Now choose Edit ▸ Paste (⌘P) to bring in your texture.  The texture will be the foundation for the cover of your book.

￼
Using File ▸ Add Images,  bring in any images you want on your book cover.  Use Layer ▸ Rotate and Transform ▸ Scale and Rotate to resize the images you bring in appropriately.  The  television image brought in here has been scaled to 10%, and its white background was removed using the instant alpha eraser (for more information on how do to this read 'How to Remove a Background').  

￼
To give the television a little depth go to Filter ▸ Stylize ▸ Drop Shadow.  Click on the '+' on the bottom left of the filters window and choose Stylize ▸ Gloom.  Click 'Flatten' when you are done.

￼

Now add some text.  Choose the text tool from the tools palette and play around with the font, rotation, and placement of the text.  

￼

Using Layer ▸ Merge Down (⌘E), merge your text and apple layers down to the 'book cover' layer.  Be sure that you are happy with the text and image appearance because you cannot edit them without undoing subsequent steps at this point.  

Go to Select ▸ Make Selection from Layer.  Then, choose the Gradient Tool.  Create a transparent to 60% opacity white gradient (for more information on how to do this, read up on 'Gradient Tool').  Draw the gradient out diagonally with the white portion in the upper left hand corner.  Deselect (⌘D).  

￼

Choose Layer ▸ Rotate and Transform ▸ Perspective Transform.  Push the bottom right hand corner in a bit and bring the top right hand corner up to create the appearance of the book sitting at an angle.  Double click to commit the transformation.

￼
Go back to the original texture image you saved in the first step of this tutorial.   Using the rectangular selection tool, make a selection the length of the image but only about 1/6 the width.   This will serve as the binding end of the book.  The selection below is shown as “clipped out” to highlight its position.

￼

Choose Edit ▸ Copy (⌘C), then go back to the book cover image and paste your selection (⌘P).

￼
If you want text on your book binding, type it out, rotate it 90 degrees, and use the move tool to line it up.  

￼
Merge the text layer down to the book binding layer, Layer ▸ Merge Down (⌘E).  Go to Select ▸ Make Selection from Layer.   Choose the gradient tool again and draw out the same transparent to 60% opacity white gradient as you did previously, but this time have the white portion of the gradient along the right side of the bookend.  Deselect (⌘D).

￼

Choose Layer ▸ Rotate and Transform ▸ Perspective Transform.  Push the bottom left hand corner of the bookend in, and bring the top left hand corner up a bit.  Double click to commit the transformation.

￼

Using the move tool, move the bookend to line up with the book cover.  

Select the line tool in the tools palette, and create lines outlining the upper and lower boundaries of the book.  A black line with a stroke of 3 is used here.  

￼

Add a new shape layer, Layer ▸ New Shape Layer.  Draw out even thin gray lines to give the appearance of pages.

￼

It's time to give the book a shadow.  Create a new layer, Layer ▸ New Layer (⇧⌘N).  Choose the paint tool from the tools palette and with a black or dark gray color, draw out a triangular blob.

￼

Move the shadow layer so that it is second from the bottom in the layers list, just above the white background layer.  Choose Filter ▸ Blur ▸ Gaussian Blur.  Set the blur to around 50.   Decrease the opacity of the book shadow layer to around 60%.  Use the move tool or keyboard arrows to move the shadow into place as needed.

￼

Congratulations on creating a book!


￼


c0url: create_a_box.html
c1subject: Create a Box
c2body:
Create a Box 
￼

This tutorial will outline how you can create a gift box using Acorn.  The box can then be printed, cut, folded, and pasted as a fun art project.  To start, create a new image, File ▸ New.  The image dimensions used here are 1200 x 800 pixels, 144 ppi, with a transparent background.
￼

Add the image of a box template, File ▸ Add Images.  The box template used in this tutorial can be downloaded here.

￼

Add a patterned image to be your wrapping paper, File ▸ Add Images.  The image used here can be found at http://www.cgtextures.com. You can also follow the steps of 'Creating a Seamless Tile' to make your own wrapping paper.

If necessary, decrease the size of the wrapping paper layer to match that of the box template layer by going to Layer ▸ Rotate and Transform ▸ Scale and Rotate.  

￼

Move the wallpaper layer below the box template layer in the layers list.  Click on the box template layer in the layers list.  Select the magic wand tool from the tools palette and select the area of the layer outside of the box.  Make sure the 'contiguous wand' option is checked in the inspector palette.  

￼

Click on the wrapping paper layer in the layers list and hit the delete key.  Remove your selection, Select ▸ Clear Selection (⌘D).

￼

Decrease the opacity of the box template layer slightly so the template isn't so pronounced.  The opacity here has been reduced to 30%.

It's time to add some ribbon!  Select the rectangle shape tool from the tools palette and make sure the 'Fill' box is checked but not the stroke.  Set the color for your ribbon in the back color well.  Draw out the thickness of ribbon you want spanning the width of the box.

￼
Draw out another ribbon spanning the height of the box.  Vary the color and thickness if you want!  To get the ribbon to line up exactly when your box is folded, use guides to help with the ribbon placement.  Go to View ▸ Show Rulers.  Click and drag on the vertical ruler to bring out a guide.  Bring out a total of 4 guides and line up your vertical ribbons so they are equidistant from the box folds.  Choose View ▸ Hide Ruler and View ▸ Guides ▸ Hide Guides when you are done.

￼

Give the ribbon some depth by adding an inner shadow filter.  Click on the 'fx' at the bottom of the inspector palette and choose Stylize ▸ Inner Shadow.  The settings used here can be found below.  


￼
￼

Now use File ▸ Add Images to add the image of a bow.  You can download this particular bow here.  Use Layer ▸ Rotate and Transform ▸ Scale and Rotate to make the bow an appropriate size.  

￼

To change the color of the bow, click on the magic wand selection tool in the tools palette and select one of the bow colors.  Make sure 'contiguous wand' is unchecked in the inspector palette.  Choose the color you want to replace it with in the front color well.  Click on the fill tool and fill the selection with the new color.  Deselect (⌘D).  Repeat for the other bow color.

￼

Click on the 'fx' to apply some filters to the bow.  Play around with giving the bow an inner shadow, drop shadow, and bevel to make it stand out from the box.

￼￼

Now, add a note card.  Click on the rectangle tool and draw out a small rectangle where you want the card to be placed.  The rectangle used here has a white fill with an opacity of 35% and a dashed white stroke.  Add a rotation to the shape.

￼

Now click on the text tool and write out your text.  Angle the text so that it is at the same angle as the rectangle.  

￼

Print out your creation in a landscape layout on card stock.  Cut, fold, and paste your box to finish it up!
￼

<% if (writer.contextType() == "html") { writer.write_("<hr/>"); } %>


Tutorial Credit
  
The original concept for this project and the blank box template are by Alan Dickson of Sha Tin College, Hong Kong. Thank you to the International College of Hong Kong, Mr. Parker, and his students for the inspiration for this tutorial.  The students made 'Sell a Teacher' boxes using Acorn and one of their finished pieces can be seen below.

￼


c0url: create_a_sphere.html
c1subject: Create a Sphere
c2body:
Create a Sphere
￼￼￼


Create a new image in Acorn, File ▸ New.  The dimensions used here are 1000 x 1000 pixels with a white background.  Choose the oval shape tool in the tools palette.  Uncheck the fill box, set the stroke to '1' and draw out a circle.  The stroke color in this example is a light gray.  To create a perfect circle hold down the shift key while dragging out your circle. 

￼
Duplicate your shape layer, Layer ▸ Duplicate Layer (⇧⌘D).  Select the circle shape on your duplicated layer (make sure it is the circle on the duplicated layer that is selected and not the original shape layer).  Click on the oval shape tool in the tools palette.  Check the fill box and uncheck the stroke box in the inspector palette.  Make sure your back color well is white in the tools palette.  

Now choose Filter ▸ Stylize ▸ Inner Shadow.  The settings used here can be seen below.  

￼￼
Create a new shape layer, Layer ▸ New Shape Layer.  Draw out an oval with a fill but no stroke.  The color of the fill doesn't matter since it will be changed shortly.  The oval should approximately take up the upper half of the circle and its boundaries should barely touch the edges of the existing circle.

￼
With the oval shape still selected, choose the gradient tool in the tools palette.  Draw out a light gray to transparent gradient from the top to the bottom of the oval.  To learn more about gradients, read gradient tool.

￼
Choose Filter ▸ Blur ▸ Gaussian Blur.  Set the blur to around 5-10.   
￼

It's time to create a light reflection on the sphere.  Create a new shape layer, Layer ▸ New Shape Layer.  Draw out an oval with no stroke and a white fill.  Rotate the oval slightly and place it where you want the reflection to appear.

￼
Choose Filter ▸ Blur ▸ Gaussian Blur.  Set the blur to around 10.  

￼

And that’s it!
￼


c0url: creating_a_seamless_tile.html
c1subject: Creating A Seamless Tile
c2body:
Creating a Seamless Tile

￼

To create a seamless tile in Acorn, first you need an image to tile. It can be an object with a plain background or you can use Acorn's brush shapes.


Using Brushes to Create a Tile

Create a new image in Acorn, File ▸ New.  This example uses image dimensions of 1000 x 1000 pixels with a white background. Stamp a single shape onto the center of the image with your brush.
￼
Now tile the paw prints. Go to  Layer ▸ Rotate and Transform ▸ Offset and Wrap Layer.  Enter the center dimensions of your image into the x,y fields in the inspector palette.  Click 'Apply'.

￼

Create a new layer, Layer ▸ New Layer and stamp another shape onto it.  Play around with varying the direction and size of the prints.  Apply the offset again using different x,y coordinates.  You want the prints to be partially off the edge of the canvas.  Here the offset was applied to 3 different layers:

￼
Now you can just stamp your shapes without using the offset as these shapes won't lie on the edge of the image. If you have multiple layers merge them down (⌘E) to make multiplying the tile easier in the next step.  

￼
In order to tile x4, or any other multiplier, you will need to resize your canvas.  Go to Image  ▸ Resize Canvas.  To tile x4 double the current width and height dimensions.  Just below dimensions where it says "Anchor", click on the bottom left hand corner to move the image to the bottom left.  Click "Ok".  
￼
You should now see your tile in the bottom left hand corner of the canvas.  Copy (⌘C) and paste (⌘V) your tile 3 times.  Using the move tool, line up the copies to create the seamless effect!

This is what it looks like tiled x4:  


￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Using an Image to Create a Tile

Tiling is a little bit different when working with an image. Choose an image you want to tile and open it in Acorn, File ▸ Open . An image with a solid color background is best.  Duplicate your layer, Layer ▸ Duplicate Layer.     

￼
Remove the background of your duplicated layer.  To learn more about how to do this, read 'how to remove a background'.   Go to Layer ▸ Rotate and Transform ▸ Offset and Wrap Layer.  Enter your image's center dimensions in the Offset x,y fields in the inspector palette.  Click 'Apply'.

￼
Merge your layers down (⌘E).  In order to tile x4, or any other multiplier, you will need to resize your canvas.  Go to Image  ▸ Resize Canvas.  To tile x4 double the current width and height dimensions.  Just below dimensions where it says "Anchor", click on the bottom left hand corner to move the image to the bottom left.  Click "Ok".  
￼
You should now see your tile in the bottom left hand corner of the canvas.  Copy (⌘C) and paste (⌘V) your tile 3 times, and using the move tool line up the copies to create the seamless effect!

And this is what it looks like tiled x 4:
￼


Photo Credits
Chocolate © Anna Langova 


c0url: creating_creases.html
c1subject: Creating Creases
c2body:
Creating Creases and Folds



This tutorial will outline how you can add creases and folds to your images in Acorn.  Open your image in Acorn, File ▸ Open.  The decorative paper texture in this example is from http://www.cgtextures.com/.

Create a new layer on top of the original, Layer ▸ New Layer. Using the rectangle selection tool in the tools palette select the top third portion of your image.  The selection is show as “clipped out” below to highlight its position.
￼
Select the gradient tool.  Choose a linear black to white gradient, and lower the opacity of the black in the gradient to 50%.  To learn more about how to do this, read 'gradient tool'.  Create a vertical gradient in your selection.  Holding down the shift key as you draw your gradient will keep it straight.  Deselect (⌘D).

￼
Select the move tool in the tools palette. While holding down the option key, click and drag the gradient area downwards. By holding option and dragging you will make a copy of the gradient area. Place this copy below the original. Do this again to cover your entire image as shown below. 
￼
Merge your gradient layers down into one layer, Layer ▸ Merge Down (⌘E).  Set the blending mode of the folds layer to "Multiply".  You can also adjust the opacity of the layer to create more subtle folds using the opacity slider at the top of the layers list.

￼
You can create more folds by duplicating the layer with the gradients on it, Layer ▸ Duplicate Layer.  Using Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T) you can rotate and adjust the layer so that the creases intersect.  Set the blending mode of the new layer to ‘screen’.  

￼


c0url: creating_pressed_text.html
c1subject: Creating Pressed Text
c2body:
Creating Pressed Text



￼


A pressed text appearance is a fun way to give text depth, and it is fairly easy to accomplish.  Open the image you will use as the background in Acorn, File ▸ Open.  This tutorial will use an image of Puget Sound.
￼
Next, create the shape your text will rest on.  If you want a perfect circle, hold down the shift key as you create the circle shape.  Make your shape with a fill, but no stroke.

￼

With your shape still selected, click on the gradient tool and draw a linear light grey to white gradient in the shape.  

￼

Rasterize the shape layer, Layer ▸ Rasterize Shape Layer.  Using the text tool, write out some text.  Get the font, size, and layout the way you want it.  Usually bold thick fonts work best.  Impact is the font used here.  

￼
If you have multiple text layers, merge those layers down into one (Layer ▸ Merge Down).  Once you have a single text layer, choose Select ▸ Make Selection from Layer.  Hide the text layer by clicking on the visibility eye to the left of the layer in the layers list.  Click on the layer with your shape.  Click the "delete" key and deselect (⌘D).  You should now be able to see your background layer through the text!

￼
To give the punched out text some depth, apply a drop shadow.  Select Filter ▸ Stylize ▸ Drop Shadow.  Play around with the shadow color and x/y offsets to achieve your desired effect.

￼

Move the punched out text layer around until you get it lining up with your background correctly.  Use the crop tool if you need to trim down the edges of your image.  


￼


c0url: creating,_opening,_and_saving_images.html
c1subject: Creating, Opening, and Saving Images
c2body:
Creating, Opening, and Saving Images

<%'<div class="seeAlso">'%>See Also:  Video Tutorials - Opening an Image, Creating a New Image, Saving an Image <%'</div>'%>



Opening Up Acorn

When you first open Acorn you will be greeted by an image similar to this one:

￼
You can choose to create a new image, open an image, or choose from a list of images recently opened in Acorn.  If you do not want this window to appear every time you launch Acorn, uncheck the box in the lower left hand corner.  If you want this window to re-appear, choose the Help ▸ Welcome To Acorn menu item.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Creating a New Image

To create a new image, choose File ▸ New (⌘N) from the menu bar.  
￼
You can choose a preset image size, or you can enter your desired dimensions manually.  If you are manually entering the dimensions, you have the option to use different measurement values including pixels, inches, and centimeters.   You can also select your image resolution and background color.  For more information on resolution and PPI, read all about DPI, PPI, and printing.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Creating and Deleting New Image Presets

To create a new image preset, enter the width and height values into the appropriate fields then click on the preset drop down menu.  Choose 'Save Preset'.  You will be prompted to give your preset a name.  In order to delete a preset you have created, hold down the option key while clicking on the preset name.  A window will appear to confirm that you want to delete the preset.  You can only delete custom presets.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Opening Existing Images

To open an image, choose the File ▸ Open menu item.  You can also drag and drop images onto Acorn's icon in the dock.  If you would like to combine two or more images together, use the File ▸ Add Images... menu or drag and drop your images from the Finder into Acorn's canvas or layers list.  If you add a single image via the File ▸ Add Images… menu item and it doesn't fit on the canvas, Acorn will begin a scale and rotate transform for you.  The image will automatically be scaled to fit into the canvas.  If you want to pop out of the scale, pressing the ESC key will end it.

If Acorn is running and you have an image on your clipboard that you would like to open in Acorn, right-click on the Acorn icon in the dock and select "New Image from Clipboard". 

<%'<div class="seeAlso">'%>Also make sure to read up on Inserting Images, which describes how to combine and resize images.<%'</div>'%>

Tip:  If you can only see a small portion of your image, try zooming out using View ▸ Zoom Out or dragging the slider found on the lower right hand corner of the window to the left.  Alternatively, you can use View ▸ Zoom To ▸ Fit in Window.   If you are wanting a specific zoom percentage, click on the zoom percentage number located on the lower right hand corner of the canvas and enter a value.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Saving Images

You can save images by selecting File ▸ Save or File ▸ Save As.   When working with an image editor such as Acorn, it is a good idea to always work off a copy of an image rather than the original.  When in doubt, select File ▸ Save As and re-name the file so you don't accidentally make permanent changes to your original image!  Also, be aware that saving certain file types will "flatten" your layers so that you cannot edit them easily later.  Acorn will warn you if you are at risk of losing your layers when saving, unless you have checked the 'do not show this message again' box.    

￼
When in doubt, be sure to save a copy of your file as .acorn.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Autosave and Versions

Using Acorn on OS X 10.7 or later gives you the ability to use autosave and access previous versions of your image using Time Machine.  This feature is off by default, but can be enabled in Acorn's Preferences under the General tab.   With autosave your changes are saved automatically for you.   Versions of your image will automatically be created every hour, and every time you open the file.

To view previous revisions of your file, use the File ▸ Revert To ▸ Browse All Versions… menu item.

You can find out more about Autosave and Versions from Apple: OS X Lion: About Auto Save and Versions.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Image File Formats Acorn Supports

<% if (writer.contextType() == "html") { %>
<%'
<style type="text/css">

#main td {
    width: auto;
    padding: 0px;
    padding-left: 8px;
    padding-bottom: 10px;
    padding-top: 10px;
    border: solid 0px;
    vertical-align: top;
}

#main tr {
    border-bottom: solid 1px #eee;
}

#main td:first-child, #main td:first-child+td+td  {
    width: 80px;
}

#main td:first-child+td {
    xwidth: 100px;
}
</style> 
'%>
<% } %>

Acorn
Acorn files are the native file type of Acorn.  This is the most robust file format that Acorn supports.  When saving in this format all of your layers, grid settings, text and shapes are saved.  You are able to edit them when you re-open the image.  This is the recommended format for editing images with layers in Acorn.  If in doubt, save your image in this format.

The file extension for Acorn images is .acorn
JPEG
JPEG is a very popular image format used primarily for photographs.  Since JPEG is a lossy format, it is not ideal for graphics with text.

File extensions for JPEG are .jpeg and .jpg.  If you prefer to save with the .jpg extension, manually enter it in the "save as" field as the file extension.  Acorn will remember that you prefer .jpg over .jpeg next time you save. (Only available in the direct version, due to restrictions Apple places on applications distributed via the App Store).

Acorn can read and write JPEG images.  Read more about JPEG on Wikipedia.
JPEG 2000
JPEG 2000 was designed to be the successor to JPEG.

The file extension for JPEG 2000 is .jp2

Acorn can read and write JPEG 2000 images.  Read more about JPEG 2000 on Wikipedia.
PNG
PNG stands for Portable Network Graphics, and is a lossless 32 bit image format.  If you need to have crisp text or transparency in your image, PNG is the way to go.

The file extension for PNG is .png

Acorn can read and write PNG images.  Read more about PNG on Wikipedia.
GIF
GIF stands for Graphics Interchange Format, and is a lossless 8 bit image format.  Since GIF files can only use up to 256 colors in an image, you will only want to use this format for specific web applications.

The file extension for GIF is .gif

Acorn can read and write GIF images.  Read more about GIF on Wikipedia.
BMP
BMP is a popular image format on Microsoft Windows.

The file extension for BMP is .bmp

Acorn can read and write BMP images.  Read more about BMP on Wikipedia.
TIFF
TIFF stands for Tagged Image File Format.  TIFF is a lossless 32 bit image format and can preserve transparency.

The file extensions for TIFF are .tiff and .tif

Acorn can read and write TIFF images.  Read more about TIFF on Wikipedia.
FXG
FXG (Flash XML Graphics) is an XML based graphics interchange format created by Adobe.  FXG is still in development, but Acorn supports limited reading and writing of FXG files.
The file extension for FXG is .fxg
Read more about FXG on Wikipedia.
PSD
PSD is the native file type for Adobe Photoshop images.  Acorn does its best to open PSD images, and if possible, preserve layers.   Photoshop layer styles, and editable text are not supported.  Vector and text layers are opened as bitmap layers  Acorn supports writing PSD files via File ▸ Export.

The file extension for PSD is .psd
WebP
WebP (pronounced "Web-Pe") is a lossy image format similar to JPEG.  WebP is a highly compressed image format created by Google to help speed up the web.  Acorn can read WebP images, and can save WebP images via the Web Export panel.

The file extension for WebP is .webp

Read more about WebP on Wikipedia.
PDF
PDF stands for Portable Document Format, and is an open standard developed by Adobe Systems.  Acorn can read and export PDF files.

When opening a PDF in Acorn a window will appear allowing you to set the resolution and background color.

The file extension for PDF is .pdf

Read more about PDF on Wikipedia.
RAW
Quoting Wikipedia, "A camera raw image file contains minimally processed data from the image sensor of either a digital camera, image scanner, or motion picture film scanner. Raw files are so named because they are not yet processed and therefore are not ready to be printed or edited with a bitmap graphics editor."

Acorn can import any RAW image that Mac OS X can natively read.  Occasionally, Apple will add support for new RAW formats via system updates.

There are many file extensions for RAW files.

See also: RAW Image Support
PICT
Quoting Wikipedia, "PICT is a graphics file format introduced on the original Apple Macintosh computer as its standard metafile format."  Acorn supports opening .pict files.

The file extension for PICT is .pict

Read more about PICT on Wikipedia.


c0url: crop_tool.html
c1subject: Crop Tool
c2body:
Crop Tool


￼
Select the Crop Tool (Shortcut key "C") and a crop will be placed on your image.

You can then click and drag in the middle of the crop to move it around,  use the arrow keys to move your crop by small increments, or make a new crop by clicking and dragging outside the crop area.  You can resize the crop by moving the edges and corner handles, or using the width and height fields in the inspector palette.

To finalize the crop, press the Return key, press ⌘⌥K, or click the "Crop Image" button in the crop palette.

You can rotate the canvas while cropping by clicking and dragging on the canvas outside the crop boundary, or by using the angle field in the inspector palette.  

In order to maintain the aspect ratio of a crop while resizing the crop, hold down the shift key while moving a corner of the crop edge in or out.

Tip:  Pressing 'h' while in crop will toggle hiding the areas outside of your crop frame.  
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Cropping Presets

Acorn provides preset cropping choices which are useful if you want your image cropped to a standard width and height.  

If you wish to swap the dimension of the crop preset (for example, you want 3x2 instead of 2x3), hold down the option key while clicking on the crop preset you want.  Be sure not to release the option key until after you have clicked and released your choice.  Alternatively you can select the dimensions, then hit the ‘x’ key to swap the width and height.  

The crop preset 'Document' adds a crop to the canvas at 90% of the canvas size, and will keep its aspect ratio when resizing.

You can also create your own crop presets.  This is especially useful if you frequently use crop dimensions not already present in the preset list.  Enter a width and height into the crop fields, then click "save as preset" in the crop palette.  You will be asked to name the preset.  Your preset will show up towards the bottom of the "choose preset" list.  To delete a custom preset, hold down the option key while clicking on that preset.

Cropping presets maintain their aspect ratios if you drag in or out on a corner boundary of the crop.
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Keep Crop Bounds Inside Canvas

Crop gives you a check box option to keep the crop inside the canvas.  If you turn this option off, you can make a crop outside the canvas.  Why would you want this?  Well, consider the crop below.  When the crop is applied, transparent pixels will be present in the area of selection outside the canvas.  This is handy if you would like to resize your canvas while doing your crop.  Pressing 'b' while in crop mode will toggle the “keep crop bounds inside canvas" option.

￼￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Cropping by Resizing the Canvas Window

This is the fastest way to crop ever invented.  Simply hold down the Control key and resize the window by dragging an edge or corner.  This will let you quickly enlarge or shrink an image you are working on.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Fancy Crop

Fancy crop is a built in function that attempts to look at what is on the screen and crop out the extraneous space. This is perfect for any picture with a solid color border you are trying to remove.  To do this, choose the Image ▸ Crop menu item.  If fancy crop can help you, it will.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Cropping a Selection

If you have a selection (using the various selection tools), you can use the  Image ▸ Crop  command to crop to the bounds of the selection.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Trim to Edges

Located under Image ▸ Trim to Edges, this little command will automatically crop out anything that is a constant color, or no color at all.  Here is an image before and after the Trim to Edges command has been used:

￼￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Select All

When cropping, you can use Select All to set the crop to the entire canvas.  First, apply a crop to any part of your image with the Crop tool.  Then go to  Select ▸ Select All (⌘A) to adjust the crop to the entire canvas.
￼￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Panning While Cropping

If you are cropping a large image where scroll bars are present, you can pan the image while in crop by holding down the space bar then clicking and dragging.  This makes getting to the area of the image you want to crop easier.  


<%'<div class="seeAlso">'%>See Also:   Cropping a Photo and Straightening a Crooked Photo<%'</div>'%>


c0url: cropping_a_photo.html
c1subject: Cropping a Photo
c2body:
Cropping a Photo for Printing


Acorn can assist you with sizing your photos correctly in preparation for printing.  The key is to match the aspect ratio of the image to the printing paper dimensions.

For example, many types of point and shoot digital cameras have a set aspect ratio of 4:3.  If you want to print a photo that has an aspect ratio of 4:3 as a standard 4 x 6 sized photo (which is a ratio of 2:3) you will want to take advantage of the crop tool.   Any time you change the aspect ratio of an image, you are going to lose a portion of the image.  If you submit your image for printing without changing the aspect ratio yourself, the printing service will usually cut off parts of your image, or add white bands along the sides.  It's best to change the aspect ratio yourself, so you can decide what part of the image to remove.

Open your image in Acorn, File ▸ Open.  To start, be sure to choose File ▸ Save As and rename your image so that you don't make permanent changes to your original.
￼
Click on the crop tool in the palette.  For more on the basics of the crop tool, read cropping.  Click on the crop preset drop down menu and select '4 x 6'.  If your image is wider than it is tall such as the image in this example, hold down the option key when clicking on 4 x 6 in order to reverse the dimensions.  You can also use keyboard shortcut ‘x’ to swap the dimensions once the crop preview is placed on your image.

￼
A crop preview will be placed over your image.  You can click and drag within the crop preview in order to reposition the crop.  When you click and drag you will see a temporary grid pop up to help you position your crop evenly.  You can make the crop larger or smaller by dragging on a corner of the crop.  The aspect ratio will remain the same.

￼


Hit the return key or click ‘Crop Image’ in the inspector palette when you are happy with your crop placement. 

￼
Notice that the canvas size was originally 1024 x 768 px (displayed in the lower left hand corner of the canvas), which has an aspect ratio of 4:3.  After performing the crop it is 1024 x 682 px which is a ratio of 3:2.  This image can now be printed as a 4x6 photo without risk of the printing service cutting off significant portions of the image.  Save your work and upload it to your favorite printing service!

<%'<div class="seeAlso">'%>For more information on obtaining good printing results read 'All About DPI, PPI, and Printing'.  <%'</div>'%>

Photo Credit
©  metaphoricalplatypus  


c0url: curves.html
c1subject: Curves
c2body:
Curves



Curves can be found under Filter ▸ Color Adjustment ▸ Curves, keyboard shortcut ⌘⇧M.

Curves allows you to non-destructively adjust an images’ tonal range or contrast by modifying the diagonal line on the graph via control points.  The left portion of the x-axis represents the shadows of the image, while the right portion represents the highlights.  The middle of the x-axis represents the mid-tones of the image.  

Adding Control Points:  To add a control point to the curve, click and drag on the diagonal line where you'd like to make your adjustment. 

Deleting Control Points: Click and drag the control point off the graph.

￼ Curves Visibility:  Click this button to toggle between the original image curve and the modifications you have made to the curve.  

￼ Reset Curves:  The reset button removes any changes you have made to the curve.  

￼ Remove Curves Filter: To completely remove the curves filter, hit the ‘x’ button.  

￼
Creating a Curves Preset:  Create your desired curve.  Click on the cogwheel in the lower left hand corner of the filters window and choose ‘Save Filter Preset’.  Give your filter a name and click save.  Your preset can then be applied in the future by clicking on the cogwheel and navigating to the presets drop down menu.

Be sure to read up on the Filters tutorial to learn more about how filters work.  You can stack the curves filter with endless combinations of other filters to create interesting and unique effects to your images non-destructively!  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
RGB Curve

The RGB curve can be seen by clicking on the first button at the top of the histogram.  The RGB curve is where you can modify the lightness, darkness and contrast of the shadows, highlights and mid-tones of your image without affecting the color balance.  The bottommost point of the curve in the lower left hand corner represents the blackest blacks while the upper righthand corner represent the whitest whites.

How to Darken/Lighten Highlights:  To darken highlights add a control point near the top of the diagonal line and then drag the point downwards.  To lighten highlights drag a point near the top of the line upwards.

How to Darken/Lighten Shadows: To darken shadows add a control point near the bottom of the diagonal line and then drag the point downwards.  To lighten shadows drag a point near the bottom of the line upwards.

How to Darken/Lighten Midtones: To darken midtones add a control point near the center of the diagonal line and then drag the point downwards.  To lighten midtones, drag a point near the middle of the line upwards.

How to Increase/Decrease Contrast: Dragging a control point to the left or right increases or decreases the contrast. Additionally, the steeper the curve between two points, the greater the contrast.  Flattening the curve between two points decreases the contrast 

How to Set the Black and White Points:  To set the black point of your image (this represents the blackest black), drag the control point located at the bottom left hand side of the diagonal upwards.  Dragging the black point upwards lightens the blacks in your image.  If you drag the black point all the way to the top, the blacks in your image become white.  To set the white point of your image (the whitest whites) drag the control point located at the upper right hand side of the diagonal downwards.  This will darken the whites, and if you drag it all the way to the bottom the whites in your image will become black.

RGB Examples:  The most common curves used to correct the tonal range of an image are the S-Curve and inverted S-Curve.  The S Curve darkens the shadows and lightens the highlights, while the inverted S-Curve does the opposite.  

￼
Original 

￼
S Curve to Darken Shadows and Lighten Highlights


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Individual Color Channel Curves

The individual color channel curves are available by clicking one of the buttons along the top of the histogram.  You can modify the red, green and blue color balance in an image to create a "warmer" or "cooler" effect.  The principles are the same as for the RGB curves, except you are focusing on a single color's shadows, midtones, and highlights with each curve.  

The image of an aurora borealis is used here to demonstrate how modifying the red, green, and blue curves can affect the appearance of an image.

Original image.
￼

Lighten red midtones by dragging the middle of the curve upwards:

￼


Lighten blue shadows by dragging the bottom of the curve upwards:

￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: custom_clouds.html
c1subject: Custom Clouds
c2body:
Custom Clouds


￼

Follow along with this tutorial to learn how to create clouds from scratch in Acorn.  To start, create a new image in Acorn with a white background, File ▸ New.  Go to Filter ▸ Generator ▸ Render Clouds.  Click on the 'From Color' well and change its color blue.  Click on the 'To Color' well and change its color to white.  

￼￼

Click on the '+' at the bottom of the filters palette, and select Distortion Effect ▸ Twirl Distortion.  Add 2 to 4 more twirl distortion filters.  Adjust the twirl radius and angle values, and move the twirl centers using the center position.  The values used in this example can be seen in the image below.  Click 'Flatten' when you have everything looking good.

￼
￼
Now make a selection of the area of clouds you want to keep.  Choose Layer ▸ New Layer with Selection (⌘J) and then deselect (⌘D).  You should now have two layers in your layers list.  Go to Layer ▸ Rotate and Transform ▸ Free Transform.  Stretch your cloud layer out to whatever size you desire.  The cloud layer seen below was stretched beyond the image canvas boundaries to eliminate the transparent areas.  Double click to commit the transformation.

￼

Apply a white to transparent gradient to make the clouds and sky more realistic.

￼

Remove the background of another image and insert your home-made clouds!


￼



 
Tutorial Credit:  Thank you Troye Hering for outlining the steps to the clouds tutorial.


c0url: cutout_type.html
c1subject: Cutout Type
c2body:
Cutout Type



This tutorial will guide you through a basic technique for creating the appearance of text that looks cut out from its background.  Open a new image in Acorn, File ▸ New. Using the flood fill tool (K) in the tools palette, fill the layer with a color of your choice. 

￼
Select the text tool and type out some text.  This effect works best if the text color is lighter than the background color.

￼

With your text layer selected in the layers list, go to Filter ▸ Stylize ▸ Inner Shadow.  Click on the 'Shadow Color' color well to pick a different color from the colors palette.  Play around with the offset, blur radius, and opacity values.

￼


Finished Product:

￼



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: depth_of_field.html
c1subject: Depth of Field
c2body:
Depth of Field



Creating a shallow depth of field will help the eye focus in on your subject. The eye is more attracted to objects higher in detail, so blurring out what is less important makes the subject more distinguishable.  This tutorial will outline two different techniques for modifying depth of field.


Using a Filter

Open your image in Acorn, File ▸ Open.
￼
Go to Filter ▸ Stylize ▸ Tilt Shift.  Move the tilt shift location to the area you want to focus on.  Play around with the blur and radius values to create a stronger or more subtle effect

￼

And that's it!
￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Using Layers

Open your image in Acorn, File ▸ Open.  

￼

Duplicate the original layer, Layer ▸ Duplicate Layer.  On the top layer apply a Gaussian Blur by going to Filter ▸ Blur ▸ Gaussian Blur. You don't want too much of a blur. For this image the setting is at 3. 

￼￼
Next, choose a selection tool and select the area you want to be in focus.
￼

Click on the eraser tool in the tools palette and set the opacity to 50%.  Erase the area inside the selection with a fairly large size eraser. The reason to use the eraser for this is that a soft transition looks better between the focused and blurry areas. Erasing the layer with the filter applied shows the clear original layer underneath. 

Deselect the selection by going to Select ▸ Clear Selection or hitting ⌘D. You will have an area of your image that is clearer than the foreground and background.
￼
Now, take your eraser with a low opacity (10% is used here) and clear up some of the foreground and background areas around your subject. Use the eraser at 100% and go over your subject to make it as clear as possible. You want to make it so there is a subtle transition between what is in and out of focus. 

Click on the bottom layer and choose Filter ▸ Sharpen ▸ Unsharp Mask.  Play around with the settings.

￼
￼


￼     ￼

Before                                                                                                   After


c0url: digital_postcard.html
c1subject: Digital Postcard
c2body:
Digital Postcard



This tutorial will show you how to create your own personalized digital postcard.  Create a letter sized image in Acorn, File ▸ New.  The settings used here are 1224 x 1584 pixels with a white background.  Choose an image to be part of your postcard and bring it into your white background by using File ▸ Add Images... Use Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T) to adjust the size of your added image so it takes up the top half of the postcard .


￼

Set your foreground color well to the color black.  Click on the line tool in the tools palette, and make a vertical line down the center of your white space. Then, make three horizontal lines on the right side of the vertical line as shown.   

￼

Choose the text tool from the tools palette, and caption your photo in the upper left corner of the white space.

Create a text box on the left side of the vertical line. This will be the area to type your message. On the right enter your address.  Or, since this is a digital postcard, enter your email address and other contact information. Create a text box for each line of type.

￼
Add an image of a stamp for a more finished look.


￼


c0url: dpi,_ppi,_and_printing.html
c1subject: DPI, PPI, and Printing
c2body:
All about DPI, PPI, and Printing


￼


There are a few different factors that go in to determining image print quality, and it can be difficult to understand their relationship to one another.  To start, here are a few general definitions of terms:

Pixel Count:  The amount of pixels an image contains is the pixel count (for instance, a "10MP / 10 mega-pixel" image has 10 million pixels in it).  How the image is displayed on your monitor is determined by this value.  In general, the more pixels you have in your image the better it will look since the more pixels there are, the greater the detail.   Pixel count is usually displayed in dimensions:  "1200 x 900 pixels" or "1200 x 900 px".  If you have a digital camera or scanner, you can usually create higher pixel counts by changing the settings of your device prior to taking a picture or scan.

One thing to remember- scaling up an image to increase the pixel count will not make your image higher quality or sharper.  Adding pixels to your image this way will only increase the file size, since your computer isn't good at guessing what the extra details should be.  It'll just double the existing pixels, not add new and better ones.  Scaling down your image however (where pixels are thrown out) does not have this problem.  Scaling down will usually result in a loss of quality however.

Physical Size Dimensions:  This is usually displayed in centimeters or inches, such as "5 x 7" or "4 x 6".  When printing to typical photo sizes, you will need to accordingly resize your image to fit standard photo printing dimensions if they aren't already the appropriate size.  Displaying the ruler (⌘-R) will show you your image dimensions.  You can also control-click on the ruler to change the units that it uses (pixels, inches, or centimeters).

Pixels Per Inch (PPI): Refers to printing resolution quality and is measured in "pixels per inch" or PPI.  In general you do not want to go lower than 180 PPI for acceptable printing results.  360 PPI is a typical standard for high quality printing results.  Many web images and computer images are at 72 or 96 PPI.  DPI (dots per inch) is another term that is occasionally used interchangeably with PPI when discussing resolution.  DPI is a measurement of printers, not a measurement of a digital image.  Typically a printing DPI value of 300 produces good quality photos.

Resample Image:  This is an option available under Image ▸ Resize Image.  If you are changing the PPI of your image in order to improve printing results, you want this box unchecked.  If you have "resample image" checked when increasing the PPI of your image, you are increasing the number of pixels without increasing their density.  This will result in poor printing appearance.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

The Math!

Example 1:  Pretend you have an image that is 1600 x 2400 pixels with a PPI of 240.  You want to know if your image will have good printing results at a size of 4 x 6.  

To figure this out, multiply the PPI by the size dimensions you desire:  (240 x 4)  and (240 x 6).  The results are 960 x 1440 pixels.  Since your image is larger than these dimensions, and your PPI is greater than 180, you should have good printing results.

Example 2:  Your image has a PPI of 72.  The print shop wants your image to have a minimum PPI of 300.  Your original image size is 1200 x 1800 pixels.  You want your image to print out as a 4 x 6 photo.   You want to make sure that by increasing the PPI of your image (and unchecking the "resample image" option), you are still going to have a good quality print outcome.

Divide the pixel count by the PPI you have set:  (1200/300) and (1800/300).  The results are 4 x 6.  You should have a good quality print outcome since your PPI is greater than 180, and the boundaries of the image exactly match the print size you desire (if the boundaries turned out to be larger then you would still be okay).

Example 3:  You want the highest PPI possible for your image to be able to print at 5 x 7.  The image pixel count is 1500 x 2100 and its current PPI is 72.

Divide the pixel count by the image dimensions you want:  (1500/5) and (2100/7).  The result is 300.  You can set the PPI to 300 (with "resample image" unchecked) for the best printing results.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Learning by Example

You want to print the image below as a 4 x 6 photo.  Its original pixel count is 1742 x 1161 with a resolution of 72 ppi.  
￼
You aren't sure by how much you can increase the PPI to improve your printing results, so you get out your calculator.  Divide the pixel count by the dimensions you want your image to print:

(1742 pixels/6 inches) = 290.33      (1161 pixels/4 inches) = 290.25

It looks like you can increase your PPI to a maximum of 290 and your image will still be large enough to fit in the 4 x 6 dimensions.  Enter 290 in the resolution box and uncheck "resample image".  
￼
Now you need to make sure your image is sized appropriately for a 4 x 6 print.  Select the crop tool.  It is easiest to use the preset crop values.  For this example we want to hold down the option key while selecting 4 x 6 in order to swap the width/height, or use keyboard shortcut 'x'. 
￼
Click "crop image" once you have your crop lined up the way you want.  Be sure to "save as" a different file name so that you don't lose your original image file.  Your image is now ready to print at a 4 x 6 size with the highest quality resolution possible with the original pixel count.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Key Points

	•	You will lose image quality if you try to increase the pixel count of an image beyond its original dimensions.  It is better to change the settings on your digital camera or scanner to create a higher pixel count in your images in the first place.  
	•	Uncheck "resample image" if you are changing the PPI of your image to improve printing appearance.     
	•	It is helpful to use the crop tool presets to resize your image to standard photo dimensions.  Be sure to hold down the option key when selecting a crop preset if you want to swap the width/height values.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Helpful Links

	•	Image Resolution - The Key to Excellent Prints
	•	The Arithmetic of DPI/PPI
	•	Display, Printing, DPI and PPI


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Photo Credits
© Mark Sebastian 


c0url: drop_shadow_variations.html
c1subject: Drop Shadow Variations
c2body:
Drop Shadow Variations

 

Acorn offers the ability to quickly apply drop shadows to your image with filters.  If you are looking for a different drop shadow appearance you can read up on the 'Lifted Image Edges' tutorial, or follow the examples below.

Open your image in Acorn, File ▸ Open.  The image used here can be found in the photo credits below.
￼
Resize your canvas to give yourself some room around your image, Image ▸ Resize Canvas.  Select the rectangle shape tool in the tools palette and make sure your shape is set to have a fill but no stroke.  Draw out a rectangle.   The color of the rectangle doesn't matter, but you want to pick a color that is easy to see in contrast to your image.  

￼
If you want your drop shadow to be exactly centered, then choose View ▸ Guides and Grids and make sure ‘Snap To Canvas’ is checked.  Using the move tool, snap the center of the shape to the center of the canvas.  You want your shape to be set in slightly from the edges of your image, so resize your shape if necessary.  

￼

Now make sure your rectangle shape is selected and click on the shape tool.  Click on the bottom-most item in the shape tool palette, which allows you to add a drop shadow to shapes.  Check the 'Shadow' box.  The settings used here can be seen below.  

￼

Move your shape layer below the fruit bowl layer in the layers list.  

￼

At this point, play around with how strong you want your drop shadow to appear.  You can decrease the opacity of the shadow layer in the layers list, modify the color of the drop shadow by clicking on the color well in the shape shadow inspector palette, or increase the shadow's boundaries by modifying the 'y axis' value of the shadow. There are many options!

In this example, the opacity of the shape layer has been decreased to around 50%.


￼


You can also use the above steps, but substitute an oval shape to create a more rounded drop shadow appearance:
￼

A border has been added to the final product images shown here.  For more information on how to do this, read the tutorial 'Add a Border'.  


Photo Credits
© Dudarev Mikhail 


c0url: drop_shadows.html
c1subject: Drop Shadows
c2body:
Drop Shadows



There are a few different techniques for giving text and shapes a shadow.  The shapes shadow option in the inspector palette and drop shadow filter methods are described below.  Since text and shapes are essentially treated the same (they are both vector based), text will be used as the example.  


Shapes Shadow Option

With the text box selected, click on one of the shape tools in the tools palette.  This will bring up the vector shape options in the inspector palette.

￼
Click on the bottommost option in the inspector palette which is the Shape Shadow:  

￼

Check the shadow box, then adjust the blur and shadow position.  To adjust the shadow color, click on the color well below where it says ‘Offset’ to bring up the colors palette.

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Drop Shadow Filter

Another method for giving text or shapes a drop shadow is to use the drop shadow filter.  Type out your text.  Make sure the text layer is selected in the layers list.  

￼

Go to Filter ▸ Stylize ▸ Drop Shadow.  You can adjust the way your drop shadow looks by using the Y Offset, X Offset, and the Blur Radius sliders.  You can also change the color of your shadow by clicking on the shadow color well to bring up the colors palette. You can see the changes you make in real time on your text.

￼
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: eraser_and_instant_alpha.html
c1subject: Eraser and Instant Alpha
c2body:
Eraser and Instant Alpha Tools



Acorn has two erasing tools: Eraser (E) and Instant Alpha (E).  Toggle keyboard shortcut 'E' to switch between the two tools.  The eraser and instant alpha are used for removing pixels from a bitmap image.  

￼
Eraser (E)

The eraser tool can be changed in size, softness, and flow in the inspector palette.  The softness setting allows you to modify the softness and hardness of the edges of the eraser.  The flow percentage changes how much is erased with each stroke of the eraser brush.  There is also the option to have a "block eraser" which is especially useful when erasing single pixels.

If you click on the brush preview window, a drop down menu will appear for selecting different types of preset brushes, all of which can be used to erase.  You can select from brushes, pens, pencils, and more.  You can also design your own eraser brush in the brush designer.  To open the brush designer, click on the paint brush icon to the left of the brush preview window in the inspector palette.

￼

Eraser shortcuts:

	•	Hold down the control and option keys at the same time while clicking on the mouse and moving it left (to decrease size) or right (to increase size).
	•	Hold down the [ key (left bracket) to decrease size, and the ] key (right bracket) to increase size
	•	Hold down the shift key to erase in straight lines
	•	When using the paint tool, you can quickly convert any brush to an eraser just by holding down the command and option keys


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

￼
Instant Alpha (E)

Instant alpha is an erasing tool that has similar qualities to the magic wand selection tool.  Click on the color you want erased and simultaneously drag outwards to increase the erasing tolerance, or inwards to decrease.   Instant Alpha is great for removing backgrounds or unwanted pixels in your images.


<%'<div class="seeAlso">'%>Video Tutorials - Removing a Background<%'</div>'%>


c0url: example_applescript_and_jstalk_scripts.html
c1subject: Example AppleScript and JSTalk Scripts
c2body:
Example AppleScript and JSTalk Scripts

Below you'll find lots of examples on controlling Acorn from AppleScript and JSTalk.


Open an image:

AppleScript:
tell application "Acorn"
    open "srv:Users:gus:Pictures:MyImage.acorn"
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");



Open and save an image as another type:

AppleScript:
tell application "Acorn"
    open "srv:Users:gus:Pictures:MyImage.acorn"
    tell document "MyImage.acorn" to save as PNG in "srv:Users:gus:Pictures:MyImage.png"
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.dataOfType("public.png").writeToFile("/Volumes/srv/Users/gus/Pictures/MyImage.png")



Making a new image:
(new in Acorn 3.2)

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.makeDocumentWithSize(NSMakeSize(200, 100));



Resize the canvas:

AppleScript:
tell application "Acorn"
    tell document 1
        resize canvas width 1000 height 1000 anchor position middle left
    end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.setCanvasSize_usingAnchor(NSMakeSize(1000, 1000), "top left");




Crop an image:

AppleScript:
tell application "Acorn"
    open "srv:Users:gus:Pictures:MyImage.acorn"
    tell document "MyImage.acorn"
        -- crop to a rectangle, located at 100,100
        -- and with a width and height of 400
        crop rect {100, 100, 400, 400}
    end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.cropToRect(NSMakeRect(100, 100, 400, 400));




Resize an image, and then undo:

AppleScript:
tell application "Acorn"
    open "srv:Users:gus:Pictures:MyImage.acorn"
    tell document "MyImage.acorn"
        resize image width 200
        activate
        undo
    end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.scaleImageToWidth(200)
acorn.activate();
doc.undo()





Change the resolution of an image:

AppleScript:
tell application "Acorn"
    open "srv:Users:gus:Pictures:MyImage.acorn"
    tell document "MyImage.acorn"
        resize image resolution 144
    end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.setDpi(NSMakeSize(144, 144));



Find the name of the first layer:

AppleScript:
tell application "Acorn"
    open "srv:Users:gus:Pictures:MyImage.acorn"
    tell document "MyImage.acorn"
        name of layer 1
    end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
var name = doc.layers()[0].layerName();



Find the width and height of the image:

AppleScript:
tell application "Acorn"
    open "srv:Users:gus:Pictures:MyImage.acorn"
    set w to width of document 1
    set h to height of document 1
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
var size = doc.canvasSize()
print("The size is: " + size.width + " x " + size.height);



Duplicating a document, resize it, and save it as a PNG:

AppleScript:
tell application "Acorn"
    open "srv:Users:gus:Pictures:MyImage.acorn"
    duplicate document 1 with properties {name:"New Document"}
    
    tell document "New Document"
        resize image width 200
        save as PNG in "tmp:foo.png"
    end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
var newDoc = doc.duplicate()
newDoc.scaleImageToWidth(200)
newDoc.dataOfType("public.png").writeToFile("/tmp/foo.png")





Get all the names of the top level layers:

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	set layerNames to ""
	repeat with l in layers in document 1
		set layerNames to (layerNames & name of l & ", ")
	end repeat
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
for (i = 0; i < doc.layers().count(); i++) {
    var layer = doc.layers()[i];
    print(layer.layerName());
}



Trim a document

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	trim document 1
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.trim();



Set the blend modes for a layer:

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	tell document "MyImage.acorn"
		set l to {pass through, color blend, color burn, color dodge, darken, destination atop, destination out, destination over, destination in, exclusion, hard light, hue, lighten, luminosity, multiply, normal, overlay, plus darker, plus lighter, saturation, screen, soft light, source atop, source in, source out, xor}
		repeat with loopVar in l
			set blend mode of layer 4 to loopVar
			delay 1
		end repeat
	end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.orderedDocuments()[0];
var layer = doc.layers()[1];

var blendModes = ["clear", "color blend", "color burn", "color dodge", "copy", "darken", "destination atop", "destination out", "destination over", "difference", "exclusion", "hard light", "hue", "lighten", "luminosity", "multiply", "normal", "overlay", "pass through", "plus darker", "plus lighter", "saturation", "screen", "soft light", "source atop", "source in", "source out", "xor"];

for (var idx in blendModes) {
    print(blendModes[idx]);
    layer.setBlendMode(blendModes[idx]);
}


Duplicating a layer:

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	tell document "MyImage.acorn"
		duplicate layer 1
	end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
var layer = doc.layers()[0];
var newLayer = layer.duplicate();
// then do something with it.
newLayer.callFilterNamed("CIColorInvert");



Web Export:

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	tell document "MyImage.acorn"
		trim -- cut down on any extra whitespace
		web export in "tmp:foo.png" as PNG
		web export in "tmp:foo.jpeg" as JPEG quality 25
		web export in "tmp:foo.jp2" as JPEG 2000 quality 25
		web export in "tmp:foo.gif" as GIF
		undo -- undo our trim.  Or we could just close the doc
	end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");

doc.trim() // cut down on any extra whitespace

doc.webExportWithOptions({'uti': 'public.png', 'file': '/tmp/foo.png'});
doc.webExportWithOptions({'uti': 'public.jpeg', 'quality': 25, 'file': '/tmp/foo.jpeg'});
doc.webExportWithOptions({'uti': 'public.jpeg-2000', 'quality': 25, 'progressive': true, 'file': '/tmp/foo.jp2'});
doc.webExportWithOptions({'uti': 'com.compuserve.gif', 'file': '/tmp/foo.gif'});
doc.undo(); // undo our trim.  Or we could just close the doc

Copy Merged:

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	tell document "MyImage.acorn"
		copy merged
	end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.copyMerged()


How to tell if a document is around or not:

AppleScript:
tell application "Acorn"
	if exists document 1 then
		-- do whatever
	end if
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var docs = acorn.orderedDocuments();
if (docs.length() > 0) {
    // do whatever
}





Filling a layer:
-- choose a color
set aColor to choose color

tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	tell document 1
		
		-- fill the current layer with our selected color
		fill with color aColor
		
		delay 1
		undo
		
		-- let's do it again, but by adding a 50% alpha to the color list, so it'll be transparent
		set aColor to aColor & (65535 * 0.5)
		
		fill with color aColor
		
	end tell
end tell




Flipping the canvas:

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	tell document 1
		
		flip canvas direction horizontal
		-- we could also say "vertical" here.
	end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.flipCanvasWithDirection("vertical");



Having fun with selections:

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	tell document 1
		select all
		delay 1
		deselect
		select rect {100, 100, 400, 400}
		invert selection
	end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.selectAll();
doc.deselect();
doc.selectFrame(NSMakeRect(100, 100, 400, 400));
doc.invertSelection();

Merge visible layers:

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	tell document 1
		merge visible layers
	end tell
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.mergeVisibleLayers()


Setting a preference:
In this example, we show how to set the registration name and number for our copy of Acorn.

AppleScript:
tell application "Acorn"
	set preference key "registrationName" value "August Mueller"
	set preference key "registrationNumber" value "FMAC20-XXXXXXXXX"
	quit
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
acorn.setPreference_forKey("1", "drawMarchingAntsSelection");




Calling a filter:

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	tell document 1 to do filter name "CIColorInvert"
	tell document 1 to do filter name "New Image With Curved Drop Shadow"
end tell

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.orderedDocuments()[0];
var layer = doc.layers()[0];
doc.callFilterNamed("CIColorInvert");
doc.callFilterNamed("New Image With Curved Drop Shadow");



Selecting a layer:

JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
var layer = doc.layers()[0];
doc.setSelectedLayer(layer);



Calling Auto Levels:

AppleScript:
tell application "Acorn"
	tell document 1
		auto levels
	end tell
end tell

Target a specific layer with AppleScript:

tell application "Acorn"
	tell document 1
		tell layer 2
			auto levels
		end tell
	end tell
end tell



JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.orderedDocuments()[0];
doc.autoLevels();

// or target a specific layer:
doc.undo();
var layer = doc.layers()[1];
layer.autoLevels()




Making an Oval Selection:

AppleScript:
tell application "Acorn"
	open "srv:Users:gus:Pictures:MyImage.acorn"
	tell document 1
		deselect
		select oval rect {100, 100, 400, 600}
		close without saving
	end tell
end tell



JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
doc.deselect();
doc.selectOval(NSMakeRect(100, 100, 400, 400));
doc.close();



Add an image as a layer:
JSTalk:
var acorn = JSTalk.application("Acorn");
var doc = acorn.open("/Volumes/srv/Users/gus/Pictures/MyImage.acorn");
var layer = doc.layers()[0];
doc.setSelectedLayer(layer);

// 0 puts it at the bottom.  1 or higher would put it on top..
var newLayer = doc.baseGroup().insertLayerWithImagePath_atIndex("/Volumes/srv/Users/gus/Pictures/AnotherImage.png", 3)



<%= startRoundWarningDiv(writer) %>Note For App Store Users: If you've purchased and downloaded Acorn from the Mac App Store, certain AppleScripts, Automator Actions, and JSTalk scripts may not work for you because of sandboxing restrictions required by Apple.  The direct version of Acorn does not have these issues (and if you have run the App Store version of Acorn at least once, the direct version will run registered, so it's easy enough to switch if you need to).<%= stopRoundWarningDiv(writer) %>


c0url: export_&_web_export.html
c1subject: Export & Web Export
c2body:
Export & Web Export


Export

You can bring up the export window by navigating to the File ▸ Export menu item.  Exporting your image creates a copy of your original image.  You can choose to compress the image when exporting, while still keeping the fidelity of your original.  Exporting is different than File ▸ Save As... because when you export, the duplicate image is placed in a folder of your choosing and your original image remains open in Acorn.  With Save As... your original image is immediately closed and the duplicate image is now open for editing.
￼
Available file formats for exporting your image include all the file formats available under the File ▸ Save As... menu item as well as PDF and PSD.  In addition, when exporting as a JPEG or TIFF you have the option to change the color profile of the image to CMYK. 

It is important when editing images to always save a copy of your work as a .acorn file.  Saving in the .acorn file format is the only way to preserve your layers for future editing.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Web Export

The time may come when you want to share your images with the internet.  Fortunately, Acorn comes with a Web Export panel that will help you choose which image format to use, along with an easy way to compare formats.  You can bring up Acorn's Web Export panel via the File ▸ Web Export menu.

￼
To toggle between a preview of your exported image and the original, click on either the "Preview" or "Original" labels in the top left of the window.  You can also click on the image to toggle back and forth.

Choosing a format to export your image is as easy as selecting from the list of formats on the left.  Some options, such as JPEG and JPEG 2000, will allow you to set how much compression to use via the Quality slider.  The higher the quality setting, the bigger the file size.  Adjust the quality slider to find the best setting for you.  The file size of the current preview is available in the bottom window bar.

If your image has transparent edges that you'd like to minimize, click on the Trim option.  This will allow your image to be as small as possible.  If your image has transparent pixels, and you would rather not have them changed to white when exporting as JPEG, you can alter the matte color with the Matte option.

The script icon in the bottom left of the window contains the same entries found in the File Actions menu.  Choosing one of these will send your web optimized image to the selected application in the list.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: extra_plugins.html
c1subject: Extra Plugins
c2body:
Extra Plugins for Acorn


Grab some extra plugins that you can use with Acorn!


BeLight Community Image Filters:  A collection of various filters you can use in Acorn 5. 


c0url: faq.html
c1subject: FAQ
c2body:
Acorn's Frequently Asked Questions

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Where can I find old versions of Acorn?

Here is a list of links to older versions of Acorn, just in case you need one for some reason.  However, you should always be running the latest version of Acorn since it has important bug fixes that older versions do not contain.

Acorn 1.5.5, for use with 10.4 and later:  http://flyingmeat.com/download/Acorn-1.5.5.zip
Acorn 2.6.5, for use with 10.6 and later:  http://flyingmeat.com/download/Acorn-2.6.5.zip
Acorn 3.5.2  for use with 10.6 and later (and accepts Acorn 4 registrations):  http://flyingmeat.com/download/Acorn-3.5.2.zip
Acorn 4.5.6  for us with 10.8 and later (and accepts Acorn 5 registrations)::  http://flyingmeat.com/download/Acorn-4.5.6.zip


Currently Acorn 5 is the only version for sale.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

I'm not running 10.10+, can I still use Acorn?

Acorn 5 requires 10.10+.  Acorn 4 requires 10.8+.  Both Acorn 2 and 3 require 10.6+.  Acorn 1.5.5 runs on 10.4+.  If you wish to purchase Acorn 1, 3, or 4 go ahead and buy Acorn 5.  Acorn 4.5.6 will accept Acorn 5 registration numbers.  But if you need an Acorn 3 or 1 registration, email support@flyingmeat.com and let us know your registration name and number and we will make you a registration that works with it.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Why does Acorn have a button labeled "Purchase" in the window?

Acorn runs in two modes: "paid", and "trial".  In trial and paid modes all the functions of Acorn are operational.  If you see the "Trial" button in the upper right hand corner of the canvas window, that means Acorn is in trial mode.  If you like Acorn, you can click where it says 'trial' in order to make the purchase.  After the 14 day trial period has ended, a watermark will appear over your images.  No worries- you can purchase Acorn (by clicking on purchase) to make the watermark go away!

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

<%'<a name="MASDifferences">'%>Are there differences between the Mac App Store version of Acorn and the direct version?<%'</a>'%>

Yes. The direct version of Acorn (downloaded from our website) has a few more tricks up its sleeves.

	•	When saving a file in the direct version of Acorn, you can type a file extension (such as .png or .tiff), and Acorn will notice that and automatically pick the right file type from the popup.
	•	The direct version has the ability to create a new layer or document from your computer's camera.  
	•	The direct version isn't confined to a sandbox.  So if you want to do hassle free scripting or write plugins which can write to anywhere on your computer, you're going to want the direct version.
	•	You get timely updates with the direct version.  You can also have access to beta versions when available.  Since we can update the direct version whenever we'd like (the App Store version might take a week or more waiting for review), you get fixes and new features faster.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

What's the difference between an Acorn update and an upgrade?  

Updates are minor releases that usually occur fairly frequently.  When you purchase Acorn 5, all updates that occur within version 5 are included with your purchase (such as 5.1, 5.2, etc).  Major releases of Acorn occur less frequently (generally every 18-24 months).   Major releases involve a lot of new features and enhancements, and they require purchase from both prior users of Acorn (those who are upgrading) and new users.  There is no obligation to upgrade if you wish to continue using an older version of Acorn.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Why is Acorn the same price for upgrades and for new users?

In the past, our store would have two ways to purchase Acorn: a brand new purchase, or a discounted price which would generally be around 60% of the original purchase price.  Then the App Store came along and only provided a single purchase price.  To enable people to get an "upgrade" price on the App Store, we would run intro sales or other temporary sales.  It became confusing and slightly discriminating, so we decided in August of 2014 to sell Acorn to everyone at the lower upgrade price.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

I bought Acorn on the Mac App Store.  Why am I still running the trial version?

You will need to delete the trial version of Acorn from your computer.  Perform a spotlight search for "acorn kind:app" (without the quotes).  Delete all copies of Acorn that are not located in your Applications folder.  Install or re-install Acorn from the Mac App Store.  It should be listed under your 'Purchases' tab.  If you clicked the 'Install' button and Acorn isn't showing up in your applications folder once it has completed installing, try re-booting.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

I bought Acorn on the Mac App Store.  Where's my registration number?

The Mac App Store does not provide a registration number for Acorn, since the store manages all the applications you purchase through it for you.  You will notice in Acorn preferences that there is no registration tab if you bought Acorn on the App Store.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

How do I update or upgrade to the latest version of Acorn?

If you bought Acorn from the Flying Meat Store:  Open Acorn.  If a dialog box doesn't pop up telling you about the latest version, you can select Acorn ▸ Check for Updates.  You will be guided to download the latest version of Acorn if you don't already have it.  For paid upgrades, you will be placed in 'trial' mode.  If you wish to upgrade, click where it says 'trial'.  You will be directed to the Flying Meat Store to provide payment.

If you decide you want to stick with the previous version and do not want to upgrade, delete the latest version of Acorn from your computer.  You can download the previous version via the links shown above under 'where can I find old version of Acorn'.

If you bought Acorn from the Mac App Store:  Updates are managed through the store under 'Updates'.  At this time the Mac App Store does not allow us to direct customers to a new major release to upgrade.  The best way to stay on top of major releases is to subscribe to the Flying Meat newsletter:  http://www.flyingmeat.com/newsletter/.   

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Can I use the same registration on multiple computers?

Yes, you may use your Acorn registration on multiple computers as long as it is only you using the license.  And if you have a single Mac with multiple people using it, you do not need to purchase an additional license.  However, if you have multiple computers and multiple people wanting to use Acorn, you will need to buy an additional license for each computer.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Does Acorn support Photoshop files?

Acorn does its best to open PSD images, and if possible, preserve layers.  Photoshop styles, and editable text are not supported however.  To save a layered PSD file, choose the File ▸ Export menu, and select PSD from the Format menu.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

What types of RAW files can Acorn open?

Acorn has the ability to open RAW files that are supported by Mac OS X.  A list of supported RAW formats can be found here.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

I'm a student, can I receive a discount on Acorn?

Yes, Flying Meat offers a $10 discount on Acorn for students through our store only.  We require that you send the request to support@flyingmeat.com using your student email address ending with .edu.  We will then send the discount code to your student email address.  The student discount is not available during promotions and sales.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Do you offer bulk discounts if I want to purchase a lot of copies of Acorn?

Yes!  Contact support@flyingmeat.com and let us know how many copies you are interested in purchasing and we’ll respond with the available options. 

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

What is the recommended resolution for printing?

This is a complicated topic.  In general a PPI (pixels per inch) of around 200 - 300 gives good printing results.  Read more here about the relationship between pixels display and printing.  You can also check out our tutorial: "All about DPI, PPI, and Printing".

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Is there an online forum for Acorn?

Yes!  Check out Acorn discussions and topics at Flying Meat's forum:  http://forums.flyingmeat.com/

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Is there a newsletter for Acorn?

Yes!  The newsletter is the best way to stay on top of the latest Acorn news.  You can subscribe here:  http://www.flyingmeat.com/newsletter/.
 


c0url: file_actions.html
c1subject: File Actions
c2body:
File Actions

￼

You can set up file actions for images that you are working on in Acorn.  File actions will take your image out of Acorn and into another application.   The actions that come pre-installed include PDF Workflow, Add to iPhoto, Open in Mail, and Open in Preview.  To access this feature, navigate to File ▸ Actions.

If you are curious about making or installing new ones, follow these steps:

1. Open the Finder.
2. Hold down the Option key while clicking on the 'Go' menu item.  Choose 'Library'.  
3. Navigate to the ~\Library\Application Support\Acorn\File Actions\ folder.
4. Start Messing around!

From here you can duplicate the actions that are in there, edit them (open the action in an editor such as TextEdit), or move in pre-made actions.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Creating Custom File Actions

If you are curious as to how to make your own file actions, the easiest way is to open up one of the pre-installed ones in TextEdit and fiddle with it.  For example:

#!/bin/bash
/usr/bin/open -a iPhoto "$*"

This tells Acorn to open the image in iPhoto.

You may have noticed that you can drag images into the Dock and applications that have the ability to open them will respond by becoming highlighted. Any of those applications can be named in this script instead of iPhoto. Simply changing it to say "Safari" will open the image in Safari instead of iPhoto.




<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: filling_text.html
c1subject: Filling Text
c2body:
Filling Text


￼

There are a couple of methods for filling text with a pattern or image.  This tutorial will cover how to use Edit ▸ Paste Into and Edit ▸ Fill to achieve this effect.  Also read the 'Placing a Photo into Text' tutorial for additional ideas.


Paste Into

First, find an image or pattern you want inside your text and open the image in Acorn, File ▸ Open.  The spotted image shown below can be found at http://cgtextures.com.

￼
Copy the image to the clipboard (⌘C).  Now, create a new image in Acorn, File ▸ New (⌘N).  The dimensions used here are 1200 x 900 pixels with a white background.  

Select the text tool from the tools palette and write out some text.  The color doesn't really matter, but grey is used here.  The font, stroke, and size can be seen in the palette below.  
￼

Go to Select ▸ Make Selection from Layer.  Then choose Edit ▸ Paste Into.  The second step takes whatever is copied to your clipboard (you previously copied the spotted image), creates a new layer with the copied image, and creates a layer mask with the boundaries of your selection.  For more info, read layer masks.  

￼
Click on the eye to the left of the 'giraffe' text layer in the layers list to hide it (this is the second layer from the top currently).  Click on the top-most layer, and click on the layer mask to select it.  Using the move tool, play around with moving the layer mask to have different areas of the spots show up inside the text.  

If you want to make the spotted layer smaller or larger, click on the the thumbnail in the layers list that displays the spotted image.  A black line will appear towards the bottom of the thumbnail letting you know it is selected.  Then you can use Layer ▸ Rotate and Transform ▸ Scale and Rotate (⇧⌘T)  to make modifications.

￼


To really make this text pop, try applying an inner shadow filter.  Click on the giraffe pattern thumbnail in the layers list to select it.  Go to Filter ▸ Stylize ▸ Inner Shadow. Click on the '+' at the bottom of the filters window and add Stylize ▸ Bevel.  Play around with the settings.  

￼




￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Fill

The fill method works especially well if you have a small image pattern that you want repeated inside your text.  If you want control over the placement of the pattern, then the 'paste into' method covered above is preferred.

Open the pattern image in Acorn, File ▸ Open.  A very small image of a brick wall is used here.  The image can be found at http://cgtextures.com.

￼

Copy the image to the clipboard (⌘C).  Now, create a new image in Acorn (⌘N).  The dimensions used here are 1200 x 900 pixels with a white background.  

Write out some text.  The color doesn't really matter, but grey is used here.  The font, stroke, and size can be seen in the inspector palette below.

￼
Go to Select ▸ Make Selection from Layer.  You should now have marching ants around your text.  Then, choose Layer ▸ New Layer (⇧⌘N).  Finally, choose Edit ▸ Fill.  A little window will appear.  Choose 'Use:  Clipboard'.  This will place the image you copied to the clipboard in the first step into your text.  Click 'OK'.
￼  
Deselect by using ⌘D.  Did you notice that the brick pattern is repeated in the fill?  If the pattern had more color variation around its boundaries then the edges of demarcation would be more obvious.  If you want to get rid of any abrupt edges, read up on creating seamless textures.

￼
To add a little flair, go to Filter ▸ Stylize ▸ Bevel.  Click on the '+' button on the bottom lefthand corner of the filters window and choose Stylize ▸ Drop Shadow.

￼



￼


c0url: filter_examples.html
c1subject: Filter Examples
c2body:
Filter Examples



There are endless possibilities for combining filters and adjusting filter parameters.  This tutorial will show you what various filters look like when applied to an image of the Space Needle, and a single rectangular shape.  


Single filters applied to an image of the Space Needle

￼

Original Image
￼

Color Effect ▸ Color Invert

￼

Color Effect ▸ Color Posterize

￼

Color Effect ▸ False Color 
(using pink and green)

￼

Color Effect ▸ Sepia Tone


￼

Distortion Effect ▸ Circle Splash Distortion

￼

Distortion Effect ▸ Twirl Distortion

￼

Distortion Effect ▸ Glass Distortion

￼

Generator ▸ Sunbeams

￼

Generator ▸ Lenticular Halo

￼

Halftone Effect ▸ Circular Screen

￼

Stylize ▸ Bloom

￼

Stylize ▸ Line Overlay

￼

Stylize ▸ Gloom

￼

Stylize ▸ Shaded Material

￼

Stylize ▸ Height Field from Mask

￼

Tile Effect ▸ Kaleidoscope

￼

Tile Effect ▸ Affine Tile


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


Tiling filters applied to a rectangle shape

The following tiling filters have been applied to a single long skinny rectangle with a black stroke and a blue fill.  Many interesting patterns can be created starting with just a simple shape!

Original Shape:
￼

Tile Effect ▸ Eightfold Reflected Tile

￼
Tile Effect ▸ Fourfold Reflected Tile
￼
Tile Effect ▸ Twelvefold Reflected Tile

￼
Tile Effect ▸ Twelvefold Reflected Tile

￼
Photo Credit
© prayitno  


c0url: filters.html
c1subject: Filters
c2body:
Using Filters in Acorn  


Filter Introduction

Filters are an amazingly easy way to change your image in original and unique ways.  What are filters?  Filters are effects that can be applied to single layers, group layers, shape layers, and selections.  With a little bit of fiddling, filters can create things you never even imagined! 

To get started, select the layer you wish to work with in the layers list. This example will use an image of a sunflower. 

Bring up the filter window by either picking a filter from the filter menu item or clicking the 'fx' button in the lower left hand corner of the inspector palette.  You can also use keyboard shortcut ⇧⌘F.  

In the example below to the right, Filter ▸ Tile Effect ▸ Kaleidoscope was chosen.  Acorn shows the effect the filter has on your image immediately.

Once you have chosen filter, you will see 'fx' on the right-hand side of the layer in the layers list.  

￼

If you need to change the values of the filter later, just return to the filters window by double clicking the 'fx'.  If you wish to make a filter effect permanent, select 'Flatten' in the filters window.  Once you have flattened a filter, you will no longer have the ability to modify it and the 'fx' will disappear from that layer in the layers list.  

The power of the filter window comes in stacking filters together to make workflows.  In the image below, the 'hue adjust' filter has been added on top of the kaleidoscope filter.  Play around with adding, deleting, and moving filters around in your filters window to create endless effects! 
￼
￼
￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Filter Basics

Adding Filters:   Once you have selected a filter, you can add more filters to the same layer by clicking on the '+' button in the lower left hand corner of the filter window.  

Removing Filters: To remove any filter, click on the 'X' in the upper right hand corner of that filter’s parameters. 

Moving Filters:  To move a filter up or down in the filters list, just drag and drop it to the location you desire.

Search Filters:  The first time you click the 'fx' button, the filter search field will appear.  Once you've added a filter, you can click the '+' button again to access filter search.

Copying Filters: To copy a filter, click on the cogwheel in the lower lefthand side of the filter window and choose 'Copy filter'.  You can then select a different layer in your layers list and paste the filter in (⌘V or Edit ▸ Paste). 

Committing Filters: To make the filter effect permanent on your layer, click the 'Flatten' button at the bottom righthand side of the filter window.  You can also choose Layer ▸ Flatten Layer Filters.  To flatten all filters across multiple layers present in your image go to the Layers menu item, hold down the option key, and the "Flatten Layer Filters" menu item changes to "Flatten All Layer Filters".  You can leave your filter effects open to further modification in the future if you don't click 'Flatten'.  

Visibility:  Click on the eye next to the filter in the filter window to toggle its visibility.  If you wish to toggle the visibility of all the filters in your list you can hold down the option key while clicking the 'fx' in the layers list.  

Reseting Filter Values:  You can reset all the values in a filter by clicking the circular arrow located between the filter visibility and delete buttons.  To reset individual values in a layer filter double click on that values name label.

Enable/Disable Layer Filters: Control click (or right click) on the layer in the layers list to bring up a contextual menu with these options.  You can also navigate to Layer ▸ Enable/Disable Layer Filter.

Filter Description:  If you select a filter in the filters window, a brief description will appear at the bottom of the window.

Last Filter:  The Filter ▸ Last Filter menu item is enabled when when you hit the "Flatten" button in the filter window. You can then use keyboard shortcut Command-F to add the last filter chain to another layer.
￼


￼





Adjusting Filter Parameters  

Many filters have values you can adjust in the filters window through sliders or number entry.  Some filters contain options that can be manipulated directly on your image such as the 'Center' and 'Radius' options for the radial gradient filter.  To toggle the visibility of 'on image' filtercontrols, click the button to the right of the cogwheel in the lower left hand corner of the filter window.

￼

You can also see how this works in the filters video tutorial: Filters Basics.  

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Creating, Exporting, and Importing Filter Presets

Creating Presets:  In order to create a filter preset, first add all the filters you want included in the preset to your filters list.  Then click on the cogwheel and select 'Save FilterPreset'.  Name your new preset and click 'save'.  The filter combination you created will now show up in the presets list for easy use in the future.  

Deleting Presets:  To delete a preset, hold down the option key while clicking on the preset in the preset list.  

Exporting Presets: To export a filter preset, have the preset currently pulled up in the filter list.  Click on the cogwheel and select 'export filter preset'.  You will be asked to name it and save it to a directory.  Share and trade your filterpresets with friends!  

Importing Presets:  To import a filter preset (a file ending in .acstyle) just double click on the file.  Acorn will install it automatically.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Filters on a Selection  

Filters can be placed on a selection, but once you deselect the filter becomes permanent and cannot be modified again unless you undo subsequent work.  To bring up additional options for filters on selections, click on the cogwheel located on the lower left-hand corner of the filters window.  Options include:
	•Blend with canvas selection:  This is the standard behavior when applying filters to the selection. Acorn will apply your filter(s) to the currently selected area on your bitmap layer, and then draw the results of that filter over your layer.
		
	•Copy over canvas selection:  This option will apply your filters to the current selection, and then replace the pixels in your selected area with the results of the filter. For example, if the filter returns transparent pixels, your layer will become transparent in those areas.

	•Ignore canvas selection:  This option will ignore the canvas selection, and the filter will be applied over your entire layer.
Acorn will remember your selection when you save your image.  If you have a selection and you are modifying the filters- you can close your file and quit Acorn. When you re-open the image, your selection will still be there, and you can change the values of the filters.
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Filter Example


A drop shadow filter is applied to the gray background layer in this image.  

￼￼

The drop shadow filter is applied to the text layer.  The gray background is a separate layer therefore it does not have the drop shadow.

￼￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Try playing around with some of the filters and experiment, experiment, experiment.  For more information, check out the Tutorials or send an email to support@flyingmeat.com and request a tutorial.


<%'<div class="seeAlso">'%>See Also:  Filters Basics (video tutorial) Drop Shadows, Filter Examples, Extra Plugins<%'</div>'%>


c0url: flood_fill.html
c1subject: Flood Fill
c2body:
Flood Fill Tool



￼
The Flood Fill tool (also known as the paint bucket tool) is the tool that looks like a bucket with paint spilling out of it. (Keyboard shortcut "K").  

This tool is used to fill in areas of your image that are connected together by a common color.  Click anywhere on your blank canvas, and it will fill it in with your selected color.



￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Adjusting the Tolerance

Flood Fill has a option called "Tolerance". When you are using Flood Fill on an image with a gradient or an area with more than one color, you can adjust the tolerance to fill in more than one color on the canvas. The higher the tolerance is set, the more colors it will fill in with your selected color.  You can adjust the tolerance in the inspector palette, or by clicking and dragging on the canvas.

Here is an example:


￼

Below tolerance is the option to select "Anti-alias".  If this box is not checked, then flood fill will have a sharp boundary at its edges.  If checked, the flood fill tool will bleed a little on its edges, for a smoother transition.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Flood Fill and Shapes

You can also use Flood Fill to fill in Shapes.

With the Flood Fill tool selected, just click inside the shape to fill it with your color.

Note: The Anti-alias option has no effect on shapes.

￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Fill an Entire Layer with a Color

In Acorn, there is an easy way to fill an entire layer with a color without using the Flood Fill tool.  Pick your desired color in the colors palette, then drag and drop the color swatch into the appropriate layer.  The entire layer will then be filled with that color.  


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Edit ▸ Fill

If you want additional control over filling a layer with color, try Edit ▸ Fill.  This command will bring up the options of what color, opacity, and blending mode you want to apply to the fill.  
￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: frame_your_image.html
c1subject: Frame Your Image
c2body:
Frame Your Image

￼


This tutorial will guide you on how to create a custom frame for your image using Acorn.  

Color Frame

Open your image in Acorn, File ▸ Open.  To assist with showing the framing process, a white background has been added to the example image using Layer ▸ New Layer and filling it with white.  

￼

Add a new layer above your main image, Layer ▸ New Layer (⇧⌘N).  Create a long skinny rectangular selection using the selection tool.  Make sure 'corner radius' is unchecked in the inspector palette.

￼

Select the gradient tool and create a black to white vertically oriented gradient within your selection.  Hold down the shift key while drawing your gradient to easily make it straight.  

￼

Deselect by clicking ⌘D.  If necessary, adjust the width of your rectangle by selecting Layer ▸ Rotate and Transform ▸ Free Transform.  Now is a good time to make this adjustment, as it will be much more difficult to make your frame skinnier or fatter later.  

Go to Filter ▸ Tile Effect ▸ Kaleidoscope.  Decrease the count to 1 and change the angle to 45 degrees.  Drag the kaleidoscope center to the right until your frame is a little over half the width/height of your image.  Click 'Flatten'.

￼
￼
Duplicate the frame layer, ⇧⌘D.  Rotate the new layer by selecting Layer ▸ Rotate and Transform ▸ Rotate Layer 90° Clockwise.  Move your new layer to its appropriate corner and line it up using the move tool.  

￼

Repeat this process two more times for the remaining two corners.

￼

Once you have your frame lined up and sized the way you desire, you can merge your frame layers down Layer ▸ Merge Down (⌘E) to make the frame contiguous.  This will make it easier to make small placement adjustments.  

￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Texture Frame

Experiment making frames with different textures, colors, and gradients!  Using a texture involves just a few different steps from what is outlined above.  Open a texture in Acorn, File ▸ Open.  The texture seen here is from http://www.cgtextures.com.  Using the selection tool, make a long skinny rectangular selection.   

￼

Copy (⌘C) and paste (⌘V) your selection into the image you want to frame.   Then choose Select ▸ Make Selection from Layer.  Apply a white to transparent gradient to the wood layer.   Deselect (⌘D).

￼

Follow the previous steps to apply a gradient to the wood, change its width with free transform, and use the kaleidoscope filter.  A white to transparent gradient was used in this example to give the wood an appearance of depth or curvature.

￼


Tutorial Credit:  Thank you to Troye Hering for creating the steps to this tutorial.

Photo Credit
© d3vilh 


c0url: give_yourself_a_tattoo.html
c1subject: Give Yourself a Tattoo
c2body:
Give Yourself a Tattoo


Giving yourself a tattoo has never been so easy!  Open your main image in Acorn, File ▸ Open.  Add the image of a tattoo, File ▸ Add Images....

￼

Scale and rotate the tattoo layer using Layer ▸ Rotate and Transform ▸ Scale and Rotate.  It is helpful to move the tattoo into the general area where you want it during this step.  Click ‘Apply’ when you are happy with the size and rotation. 

￼

Choose the polygonal selection tool from the tools palette, and roughly outline the areas of the tattoo that you want to keep.  Go to Select ▸ Inverse.  Click 'delete' then deselect (⌘D).  This will remove the unwanted areas of the tattoo.

￼

Change the blending mode of the tattoo layer to 'Multiply'.  This will remove all of the white in the tattoo, making it appear as though the tattoo is on skin.  If the tattoo you are using has a different background besides white, you may need to use a different blending mode.  Or, you may need to follow a different technique outlined in 'How to Remove a Background'.

￼
If you want the tattoo to appear to be wrapping around the waist or an arm, you will need to use the eraser tool to remove part of the tattoo that is off the body.  Also, play around with Layer ▸ Rotate and Transform ▸ Perspective Transform.

￼


Photo Credits
Girl © wonderferret; Tattoo © Blondas 


c0url: giving_text_shadows_and_reflection.html
c1subject: Giving Text Shadows and Reflection
c2body:
Giving Text Shadows and a Reflection
￼

Shadows and a reflection can really make text pop in an image.  Start by creating a new image in Acorn, File ▸ New.  This tutorial will use a white background, but feel free to use gradients or other color backgrounds as you follow along.

Type out some text using the text tool.  Choose the text size, font, and color.  Once you have everything looking good make 2 copies of the text layer Layer ▸  Duplicate Layer (⇧⌘D) .  Name the first copy "reflection" and the second copy "shadow".  You should have four layers in your layers list. 

￼

For now, hide the shadow layer by clicking on the eye symbol on the left side of its layer in the layers list.  Click on the reflection layer and go to Layer ▸  Rasterize Shape Layer.  Now go to Layer ▸ Rotate and Transform ▸ Flip Layer Vertical.  Using the move tool, position this layer so that it lines up appropriately under the original text.  

￼

The reflection needs to be slightly smaller and softer appearing.  To make it smaller choose Layer ▸ Rotate and Transform ▸ Free Transform.  Decrease its height slightly.   Double click to commit the transformation.

￼


To make the reflection appear softer, add a layer mask to the reflection layer by clicking on the cogwheel towards the bottom left side of the inspector palette.  Click on the gradient tool in the tools palette and choose the linear black to white gradient.  Draw a gradient spanning the area of text.  Decrease the opacity to achieve your desired look.  In the image below the opacity is set at 50%.

￼

Now that the reflection is looking good, it's time to work on the shadow.  Click on the visibility eyes to the left of the original text and reflection layers to hide those layers.  Click on the visibility icon on the shadow layer to make it re-appear.  Select the text and change its color to black.  Choose Layer ▸  Rasterize Shape Layer.  Decrease the size of the text substantially using Layer ▸ Rotate and Transform ▸ Free Transform.  Double click to commit the transformation.

￼

Choose Filter ▸ Blur ▸ Gaussian Blur.  Choose a radius of around 2.  Click on the '+' at the bottom of the filters window and choose Blur ▸ Motion Blur.  Set the radius to around 20.  

￼
￼

Click on the eyes on the original text layer and the reflection layer so they re-appear.  Move the original text layer to the top of the layers list so the shadow stays behind the original text.  Use the move tool to place your shadow in the correct spot.  You can also play around with decreasing the opacity of the shadow layer.


Final product:
￼


<%'<div class="seeAlso">'%> Additional things to try:  create a layer mask on the shadow layer, and apply a gradient similar to the one on the reflection layer.  This will make the shadow appear to taper off.  Play around with words that contain "g" or "y".  The reflection will be trickier! <%'</div>'%>


c0url: gold_text.html
c1subject: Gold Text
c2body:
Gold Text


￼


Open a new image in Acorn, File ▸ New.  The dimensions used here are 500 x 500 pixels with black as the background color.  In the tools palette, set your front color well to black.  Set the back color well to anything you want.  A medium gray is used in this example.

Choose the text tool and using the settings shown below, type out your text.  Make sure the stroke is set to '1'.  

￼

Choose Filter ▸ Stylize ▸ Inner Shadow. Click on the '+' button in the lower left hand corner of the filter window and choose Stylize ▸ Drop Shadow.  Click on the '+' button again and choose Gradient ▸ Linear Gradient.  Color 1 is light orange, Color 2 is a bright orange.  Click on the '+' button and choose Stylize ▸ Bevel.

￼


Your text should be looking like gold!


￼


c0url: gradient_text.html
c1subject: Gradient Text
c2body:
Gradient Text



This tutorial will teach you how to apply a gradient to your text.  First, add text to your image using the text tool. 
￼

Click once outside the text box to end editing, but keep the text box selected.  Gradients cannot be immediately seen while the text is being edited.  Click on the gradient tool in the tools palette. You can read here for more information on gradients.  Once you have a gradient you like, click and drag it across your text box.  You can play around with the placement of the gradient, change the linear/radial setting, and modify its colors.  


￼



Tip:  A gradient cannot be applied to text if the "fill" box is unchecked in the shapes palette.  This is because the gradient is the fill.  With your text box selected, click on one of the shape tools in the tools palette and make sure "fill" is checked.  
￼



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: gradient_tool.html
c1subject: Gradient Tool
c2body:
Gradient Tool


￼
Gradient Tool Basics

The gradient tool allows you to create a blend of colors fading into one another on your image.  The colors of your gradient depend on the colors you have selected with the tabs located just below the gradient display.  A rainbow linear gradient is shown to the right.  You can see in the gradient palette that it shows a sample of what these colors will look like as a gradient.  You can choose a linear or radial gradient by clicking one of the buttons towards the top left of the gradient palette. 

Below the gradient display bar is a drop down menu offering you different blending modes for your gradient.  The blending mode you wish to use must be selected prior to drawing the gradient.

Saved gradients presets can be found below the gradient blending mode menu.  Acorn comes stocked with a handful of useful gradient presets.   Just click on a preset and it will load in the gradient preview.
￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Linear Gradient
￼

Select the gradient tool from your tools palette (keyboard shortcut “G”).  You can choose a linear gradient by clicking on the square button towards the top left in the gradient palette.  When you move your cursor over your canvas, it will become a crosshair.  Click and drag your cursor over your canvas and the gradient will grow as you drag.  When you release the click, the gradient you have drawn can no longer be modified. The further you drag the cursor, the more mixed the colors will be in the gradient.  To create a perfectly horizontal, 45 degree diagonal, or vertical gradient, hold the Shift key while dragging out your gradient.

Here are examples of horizontal, vertical, and diagonal linear gradients:


￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Radial Gradient 

Select "Radial Gradient" by clicking on the circular button towards the top left in the gradient palette.  Moving the tabs in the radial gradient has different effects than in a linear gradient, so there are two gradient displays showing how the gradient looks both radially (top display) and linearly (bottom display).

Creating a radial gradient is similar to a linear gradient, but the point where you start your cursor will be the center of the gradient. The farther you drag your cursor, the more the colors expand.
￼




<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Gradient Colors

The gradient color positions are controlled by the tabs just below the gradient display.  Moving the tabs left and right will change the position and ratio of the colors.

To remove a color, just click and hold on that color's tab then drag and drop it off of the gradient palette.  Poof!  It's gone!

To add a color to your gradient, open the colors palette.  Select your desired color so that it shows up in the colors palette top display window (just to the right of the magnifying glass).  Drag and drop the color from the colors palette top display window into the gradient display.  

￼


￼



￼
￼

An additional method to add a color to your gradient is to click just below the preview of the gradient where the tabs are located.  A tab will be added to your gradient, and its color will be whatever color you currently have present in your front color well.  

To change a color in your gradient, double click on that color's tab.  Its current color will show up in the colors palette.  Now you can change the color by selecting a new color.

To duplicate a color in your gradient, hold down the option key while clicking and dragging on that color's tab.  



Creating a Transparent Gradient

To create a transparent gradient, you must make one of your tab colors transparent.  To do this, double click on the gradient tab of the color you wish to transition into transparency.  Once you double click on the tab, the colors palette will open.  Slide the opacity of the color down to zero.  The color box to the left of the swatches will become half black and half white.  This means your color is transparent.

And the gradient in your Inspector Palette will look similar to this:


￼


￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Saving and Deleting Gradients

You can store gradients you create for future use.  Just create your gradient, then click on the "+" button towards the bottom left of the gradient palette.  You can also click on the gradient display window and drag it down to the list of gradients. Or, right click in the gradient list area and choose "Add Current Gradient".  Acorn comes with a handful of gradients pre-loaded.  You can delete previously stored gradients by right clicking on the gradient in the list, then selecting "Delete Gradient".  
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Applying a Gradient to a Shape

To apply a gradient to a shape, first draw out your desired shape (read shape tool for more details).  The shape must have a "fill" in order to be able to apply a gradient, so make sure the fill box is checked.  A stroke is not necessary, but the gradient will not be applied to the stroke.  Using the move tool, select your shape.  Next, click on the gradient tool.  Set your gradient colors.  Drag the gradient across your shape.  

￼


<%'<div class="seeAlso">'%>See Also:   Gradient Text <%'</div>'%>


c0url: hdr_effect.html
c1subject: HDR Effect
c2body:
HDR Effect



This tutorial will guide you in how to give your photos a HDR (high dynamic range) effect.  You can read more about HDR here.  Start by opening your image in Acorn, File ▸ Open.  Adjust the levels by selecting Filter ▸ Color Adjustment ▸ Levels and clicking the auto levels button ￼ (keyboard shortcut ⇧⌘L).

￼

Duplicate your original layer by selecting Layer ▸ Duplicate Layer (⇧⌘D).  Go to Filter ▸ Color Adjustment ▸ Color Controls and decrease the saturation to 0.   
￼
Click on the '+' on the lower left hand corner of the filter window and choose Color Effect ▸ Color Invert.  In the Inspector Palette, change the blending mode of the duplicate layer to 'Overlay'.  
￼
Go back to your original image layer and duplicate it again, Layer ▸ Duplicate Layer.  Move this layer to the top of your layers list, above the inverted layer.  Change the blending mode of the layer to "Linear Dodge" and decrease the opacity to around 30%.
￼
Select Filter ▸ Color Adjustment ▸ Color Controls and play around with increasing the saturation and decreasing the brightness and contrast sliders.
￼

If any areas appear too bright, use the eraser tool on the first or second duplicated layers to darken them.  Set the eraser tool opacity to around 15-20% to prevent any obvious lines.


￼


c0url: holiday_card.html
c1subject: Holiday Card
c2body:
Holiday Card


￼


This tutorial will guide you on how to make your own greeting card.  Gather images you would like to include on the frame of the card.  If you wish to use the images shown here, links to them can be found in the photo credits at the end of the tutorial.    

￼￼￼￼


For the snowflake and star, follow the instructions given in the shape brushes tutorial to make them into a shape brush.  For the candy cane and gingerbread men, the background needs to be removed.  For more detailed information on removing a background, read How to Remove a Background.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Create a new image in Acorn, File ▸ New (⌘N).  If you are planning on printing your holiday card, be sure to set the resolution to around 200 ppi.  The color of the background doesn't matter since you'll be changing it in a minute.  Set the dimensions of the image to a multiple of 4 x 6 to allow for easy printing later.  This tutorial will use 800 x 1200.  Click "OK".   

Select the fill tool from the tools palette and click on the foreground color well.  Pick a color from the colors palette for your background and click on your canvas to fill the layer with that color.

￼

It's time to use the shape brushes you created from the snowflake and star.  Select the color you want to use in the foreground color well and click on the paint tool in the tools palette.  With each snowflake or star you brush on, change the brush size and opacity.  Go ahead and put them all over the canvas leaving a little space for other images you may want to include.  If you don't like where you brushed, just use ⌘Z to undo it.

￼

Now drag and drop your other images into the layers list.  Be sure to place them above your background layer.  Make duplicates of the layer if you want the image to appear multiple times in your card by using Layer ▸ Duplicate Layer (⇧⌘D).  Use Layer ▸ Rotate and Transform ▸ Scale and Rotate (⇧⌘T) to change their size and rotation to suit your desired look.  Use the move tool to place the images.  

￼

Repeat this process for all the images you are bringing into your card frame.  

￼

Now select the rectangle shape tool in the tools palette.  Make sure the "fill" box is checked and the "stroke" box is unchecked.  Draw out a rectangle and change the rectangle dimensions in the inspector palette to fit the entire canvas, 800 x 1200.  Make sure the edges of the rectangle snap to the edges of the canvas.  

￼

Now draw a second rectangle.  The color of the rectangle must be white.  The dimensions used here are 600 x 800.  To line up the rectangle, choose View ▸ Guides ▸ Show Guides.  Two vertical guides placed at 100 and 700 pixels and two horizontal guides placed at 150 and 950 pixels works well.  Once you have your rectangle lined up, you can hide the guides via View ▸ Guides ▸ Hide Guides.

￼

Now select both shapes, Select ▸ Select All.  Choose Shape ▸ Exclude Paths.  Change the blending mode of the shape layer to ‘Mask’.

￼

Go to Layer ▸ New Group Layer.  Select all your layers and drag and drop them into the group.  Change the blending mode of the group layer to “Normal”.  

￼
Drag and drop the image you are displaying in your holiday card to the very bottom of your layers list.  If the image doesn't line up perfectly, use the arrow keys or move tool to center it.  You may need to use Layer ▸ Rotate and Transform ▸ Scale and Rotate (⇧⌘T) if the image is too large for the framed area.  

￼

To add a white border around the main image, click on your top most layer in the layers list.  Then go to Layer ▸ New Shape Layer.  Select the rectangle tool again, but this time uncheck fill, check stroke with a setting of around 10, and corner radius with a setting of 10.  Select white as the color of the border in the front color well.  Draw out your rectangle with the dimensions of 600 x 800 and using the move tool, place it to frame the main image.

￼

To give the white rectangle frame some depth, add a shape shadow.  You can learn more about how to do this in 'Drop Shadows'.  

Add a new shape layer to the top of your layers list.  Click on the text tool and choose your font.  Play around with size, placement, color, etc.  This example uses Lucida Calligraphy.  Once you have the text the way you want it, add a shape shadow.  

￼

To wrap up your card, use the move tool to move around any of the border images that may need re-placement to create a more balanced look.  



￼

   

Photo Credits
Snowflake
Star
Candy Cane 
Gingerbread Man 
Santa Baby


c0url: how_to_fade_out_your_image.html
c1subject: How to Fade Out Your Image
c2body:
How to Fade Out Your Image



This tutorial will show you a few different techniques for transitioning your image to a transparent background.

Technique 1:  Using a Gradient in a Layer Mask

Creating a gradient in a layer mask is by far the easiest technique for fading out an image.  Open your image in Acorn, File ▸ Open.  Click on the cogwheel on the lower left hand corner of the layers list in the inspector palette.  Select 'Add Layer Mask".    

￼
Be sure the layer mask is selected.  You know it is if it has a black line across the bottom as you can see in the image above.  Choose the gradient tool from the tools palette.  Using the black to white linear gradient, draw out the gradient on your image.  Black areas of the gradient will expose the layer below (in this instance it's transparent since there is no layer underneath), white areas will preserve the layer.  Hold down the shift key when you draw your gradient if you want it straight.  

￼
Voila!  That's all it takes to fade out an image.  When you save this file, you'll want to save it as either a PNG, TIFF, or an Acorn file.  Whatever you do, don't save it as JPEG since JPEG files don't support transparency, and it'll turn the background white.

Be sure to also check out the Fade Out Techniques video tutorial.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Technique 2: Using a Gradient Without a Layer Mask


To start, add a new layer to your image, Layer ▸ New Layer (⇧⌘N).  You can also get away with pressing the little + button at the bottom left corner of the inspector palette.

Next, select the gradient tool.  Choose the linear black to white gradient.  Double click on the white gradient widget.  The colors palette should appear.  Decrease the opacity slider all the way to the left like so:

￼

With the gradient tool selected, and the new layer selected and highlighted in the layers list, draw a gradient.  If you need help drawing a gradient in a perfectly vertical line, just hold down the shift key as you move your mouse.

￼

These next couple of steps can be tricky- 

First, hold down the command key, and click the thumbnail of the gradient layer in the layers list.  This turns the layer into a selection.  Next, hide the gradient layer by clicking the visibility icon (the little eye) next to the thumbnail in the layers list.  

￼
Select the bottom layer, and press the delete button.  Deselect (⌘D).  These steps have to be done in the right order, so be sure to watch the Fade Out Techniques video tutorial.

The final image will look like this:

￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Technique 3: Using Gradients and Blending Modes

This technique uses layer blending to achieve the fade out effect.  Make a new layer, Layer ▸ New Layer.  Draw a black to transparent gradient on the new layer.  

￼


Change the blending of the gradient layer to "Destination Out".

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Technique 4: Using the Feather Tool 

Choose a selection tool from the tools palette.  The elliptical selection tool is used here.  Select the area of the image you want to keep.  

￼
Pro Tip: When using the elliptical selection tool, holding down the option key lets you grow your selection from the middle.  Holding down the shift key allows you to make a perfect circle.

Next, choose the  Select ▸ Feather.  A little window will come up.  The amount you enter in the radius field depends on the size of your image.  A radius of 65 is used here. Click the OK button.

Notice anything different?  Probably not.  But what has happened is that the selection has changed slightly so that it's softer on the edges.  Choose the Select ▸ Inverse menu item.  This will take the selection and turn it inside out, selecting the areas that weren't selected before, and unselecting the areas that were previously selected.  Hit the delete key and deselect (⌘D).  
￼
If it turns out you want to change the feather value, you can use Edit ▸ Undo (⌘Z) to undo the last couple of steps.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Fading Two Images Together

To take this a step further, you can blend two images together.  This example uses the layer mask fade out technique outlined previously.  Then, using File ▸ Add Images...bring in your second image. Move the new image layer down to the bottom of the layers list.  Using the move tool, position the new layer, and tada!  You have 2 images blended together.
￼


c0url: how_to_register_acorn.html
c1subject: How to register Acorn
c2body:
How to Register Acorn
￼
Once you have your registration number for Acorn, you will want to plug it in so Acorn knows you have done the good deed and that pesky watermark goes away.

To do this, choose Acorn ▸ Preferences ▸ Registration  from the menu bar.

A panel will appear, with fields to enter your registration name and number.  Make sure when you enter them they are spelled exactly the same way as given to you when you completed your order (either via email or the web page).  It is recommended that you cut and paste into these fields.

Then press the "Register" button and you are good to go.

If you have already purchased Acorn and you do not know what your registration number is, visit Flying Meat's support page and we will send you an email with the information: http://www.flyingmeat.com/support/.


Mac App Store Version

The Mac App Store does not provide a registration number for Acorn, since the store manages all the applications you purchase through it for you.  You will notice in Acorn preferences that there is no registration tab if you bought Acorn on the App Store.

If you installed the trial version of Acorn prior to purchasing on the Mac App Store, you will need to delete the trial version of Acorn from your computer.  Perform a spotlight search for "acorn" (without the quotes).  Delete all copies of Acorn.  Install or re-install Acorn from the Mac App Store.  It should be listed under your 'Purchases' tab.  If you clicked the 'Install' button and Acorn isn't showing up in your applications folder once it has completed installing, try re-booting.  


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: how_to_remove_a_background.html
c1subject: How to Remove a Background
c2body:
Different Ways to Remove a Background



This tutorial will cover how to use the Magic Wand, Instant Alpha Eraser, Blending Modes, and Filters to remove the background of an image.

The original image in this example is asparagus with a green background.  The goal is to remove the green background. 

￼
The Magic Wand Method

Select the magic wand in the tools palette.  Notice in the inspector palette there is a field labeled Wand Tolerance. This number adjusts the range of colors that the magic wand will select. To remove all of the green background seen here and not just sections of it, a tolerance of around 60 should work.  Using the magic wand, select the green background.  You can tell the background has been selected by all of the little ants marching around it.
￼
Another option for fully selecting the background is to use the magic wand tool and place your cursor over the background.  Then click and drag with the mouse to increase or decrease the tolerance of the selection.  You will see a circle near your cursor increase or decrease in size in response to the change in tolerance.  You can see in real time how your selection grows or shrinks.  The first image below shows an appropriate selection of the green background.  The second image shows the wand has selected too much and is overflowing into the asparagus.

￼￼


Now hit the Delete key and deselect by going to Select ▸ Clear Selection (⌘D).  You can see the original background has been removed completely.  The checkered pattern indicates transparency.

￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

The Instant Alpha Erase Tool Method

Click on the instant alpha tool in the tools palette.  Instant alpha is an erasing tool that has similar qualities to the magic wand selection tool.  Click on the color you want erased and simultaneously click and drag outwards to increase the erasing tolerance, or inwards to decrease.  The results will be seen in real time as you drag inwards and outwards.


￼￼

As you can see in the above image, the green background is removed leaving transparency.  This is because there is no layer below the asparagus to show through the erased green area.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

The Transparentomatic Filter Method

Go to Filter ▸ Color Adjustment ▸ Transparentomatic.  Click once on the color well to the right of where it says 'Color to Remove'.  This will bring up the colors palette.  Click on the magnifying glass to the left of the colors display in the colors palette.   Using the magnifying glass click on the green background in the image.  The green background will be removed.  Play around with the tolerance level of the filter until things look right.  

￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

The Replace Color Filter Method

Go to Filter ▸ Color Adjustment ▸ Replace Color.   Click once on the color well to the right of where it says 'Color to Remove'.  This will bring up the colors palette.  Click on the magnifying glass to the left of the colors display in the colors palette.   Using the magnifying glass click on the green background in the image.  The green background will be removed and replaced with whatever color you choose to have in the 'Color to Replace' color well.    Play around with the tolerance level until things look right.  
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

The Blending Modes Method

Select your background using the magic wand tool.  Go to Layer ▸ New Layer with Selection.  Deselect (⌘D).  Now change the blending mode of the layer to Destination Out.  This will create a transparent background that is easily hidden or visible by turning the visibility of the new layer on and off.
￼


c0url: image_depth_and_bit_depth.html
c1subject: Image Depth and Bit Depth
c2body:
Image Depth and Bit Depth


Bit depth is the amount of color information contained in each pixel in an image.  An image with a bit depth of 1 means each pixel in the image can either be black or white, as the pixel can only contain 2 values (1 bit is either "on" or "off").  As the bit depth of an image increases, the colors each pixel can contain increases.  New images in Acorn are created as 8 bit per component / 32 bit pixel images, which is suitable for most images used today.  However, if you'd like to have a "deeper" image depth, navigate to the Image ▸ Image Depth menu item.  You have the choice of selecting 8 or 16 bits per channel. 

If you open up a 64 or 48 bit image in Acorn, Acorn will place your image into a 64 bit workflow and save the image in a 64 bit format.

If you open up a 96 or 128 bit image in Acorn, Acorn will place your image into a 128 bit workflow and save the image in a 128 bit format.  For most cases, 128 bit depth is going to be overkill.  If you want deep images, but don't know wether to go with 64 or 128 bit, go with 64.  If you need 128, you'll know it.

Bit depth (as well as image resolution) also affects the size of an image.  Images with higher bit depths tend to be larger in size than images with lower bit depths as the amount of information in the file pertaining color is greater.


Why would you want a higher bit depth?

	•	You have a camera that produces RAW files that are greater than 8 bits per channel. You may want to keep your image in that format to preserve fidelity for the future.
	•	Having a 64 or 128 bit image gives Acorn more breathing room to work on your image.  Things like alpha pre-multiplication problems disappear and image adjustments are more precise.
	•	Scientific computing.  Things like working with satellite or medical imagery can benefit from deeper colors.  Just because the human eye can't see a difference between two colors doesn't mean it isn't there.

￼


From left to right: 1 bit, 2 bit, 4 bit, 8 bit, and 32 bit images.
Images courtesy of Wikipedia


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: image_measurements.html
c1subject: Image Measurements
c2body:
Image Measurements


Images in Acorn can be in units of pixels, inches, or centimeters.  When creating a new image in Acorn, you will be given the choice of which measurement unit you wish to apply.  
￼
If you wish to change the measurement unit in an existing image, you have a couple of options.  You can go to Acorn ▸ Preferences ▸ General ▸ Ruler Units and make your selection.  

￼

Or you can modify the base measurement unit if you have rulers present on your image (View ▸ Show Rulers).  Right click on one of the rulers and make your selection.  

￼



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: image_metadata.html
c1subject: Image Metadata
c2body:
Image Metadata
￼
To view and edit image metadata, go to the File ▸ File Info…menu item to bring up the image metadata edit window.  From there you can navigate to the general, camera, IPTC, and everything categories to add, view, or remove information associated with your image.

According to the wikipedia entry on metadata, “Metadata may be written into a digital photo file that will identify who owns it, copyright and contact information, what camera created the file, along with exposure information and descriptive information such as keywords about the photo, making the file searchable on the computer and/or the Internet. Some metadata is written by the camera and some is input by the photographer and/or software after downloading to a computer.”


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: image_to_illustration.html
c1subject: Image to Illustration
c2body:
Turning an Image into an Outline Drawing 



This tutorial will teach you how to turn a photo of a guitar into an outline drawing using two different methods.


￼   ￼

Method #1

Start by duplicating your layer so you have 2 layers with the guitar photo on it, Layer ▸ Duplicate Layer.  Then, on the top layer, apply the Edges filter under Filter ▸ Stylize ▸ Edges.  When the filter menu appears adjust the intensity of the outline. 


￼


Your image will now look like this:

￼
Now create a new layer on top of your outline layer, Layer ▸ New Layer. Fill this new layer in with black using the flood fill tool and set the blending mode to Saturation. This will make the outline white. Merge the black fill layer down, Layer ▸ Merge Down (⌘E) into the outline layer so they become one layer. 
￼
Now, use the Filter ▸ Color Effect ▸ Color Invert menu. This will make the background white, and the outline black.

￼

And your outline is done and free to colorize any way you choose!

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Method #2

Start by duplicating your layer so you have 2 layers with the guitar photo on it, Layer ▸ Duplicate Layer.   Desaturate the duplicated layer by choosing Filter ▸ Color Adjustment ▸ Color Controls.  Decrease the saturation to 0.  

￼
Now, duplicate the desaturated layer, Layer ▸ Duplicate Layer.  Choose Filter ▸ Color Effect ▸ Color Invert.  

￼
Change the blending mode of the inverted layer to 'Color Dodge'.  It is likely your canvas will be almost completely white at this stage.  Choose Filter ▸ Blur ▸ Gaussian Blur and play around with the radius setting.  The setting used here is a radius of 4.

￼

￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: index.html
c1subject: Index
c2body:
Acorn
So awesome, it’s nuts.


Frequently Asked Questions
Such as, where do I find an older version of Acorn?
Creating, Opening, and Saving Images
How to create, open, and save images in Acorn, as well as the file types Acorn supports.  

Acorn's Workspace
Acorn's canvas, tools palette, and inspector palette are explained in detail. 

Resizing and Rotating Your Image and Canvas
Acorn offers you a few ways to resize and rotate your image and canvas.

Layers Basics 
Layers are the foundation of Acorn.  This is a must read to discover the basics of how layers work.

Resizing and Rotating a Layer
Get started on manipulating your layers.
Inserting Images 
This tutorial will guide you on how to add multiple images to your canvas.
Type
How to add text and adjust fonts for an image.


Selecting
How to use Acorn's powerful selection tools, including the magic wand and quick mask.

Filters
Navigating Acorn's filter window and Quartz Compositions.
Shape Tools
Learn how to create and modify vector based shapes in your images.
DPI, PPI, and Printing
Printing can be complicated.  Hopefully some of your questions can be answered here.

Tutorials
How to use Acorn by example.





Other Helpful Things
	⁃	How to register Acorn
	⁃	Release Notes
	⁃	Tips & Tricks
	⁃	Acorn Community
	⁃	Download Acorn's documentation in PDF format

Are we missing anything?  Send your requests and ideas to support@flyingmeat.com

<% if (writer.contextType() == "html") { %>
<%'
<style type="text/css">

#main tr {
    border-bottom: solid 1px #eee;
}

#main td {
    padding: 6px 0px 0px 0px;
}

</style>
'%>
<% } %>

<%-- 

 --%>


c0url: inserting_images.html
c1subject: Inserting Images
c2body:
Inserting and Resizing Images


￼


This tutorial will go over how to insert and resize images.  Create a new image, File ▸ New.  The canvas dimensions used here are 1600 x 1200 pixels with a white background.  Use File ▸ Add Images... to add your first image.  Alternatively you can copy and paste images into your canvas, or drag and drop the files onto the canvas.  

Tip:  If you add a single image via the File ▸ Add Images… menu item, and it doesn't fit on the canvas, Acorn will begin a scale and rotate transform for you.  The image will be automatically scaled to fit into the canvas. If you want to pop out of the scale, pressing the ESC key will end it.

￼

As you can see, the image of the flower is much larger than the canvas.  To resize the image, use Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T). Handles and an outline will appear around your image.  Increase or decrease the size of the image by dragging in or out on a corner handle, or you enter a value in the 'scale' field in the inspector palette.  You can also move the image around the canvas by clicking in the middle and dragging it around.  Once you have the image placed where you want it, double click to end the transformation, or click ‘Apply’ in the palette.

￼

Add a few more images and repeat the steps outlined above for resizing them and moving them around on the canvas. If you wish to remove or "crop" parts of an image you have added, use the selection tool.  Make sure you are currently selected on the image layer you are going to modify.  Choose the rectangular select tool and select the area you wish to keep.  For more information on how to use the select tools, read 'Making Selections'.  The selection here is shown as ‘View Selection Clipped Out’ to illustrate its location.

￼

Choose Select ▸ Inverse.  Then, hit the delete key.  Deselect by using keyboard shortcut ⌘D.  Use the move tool to reposition the layer if needed.

￼

Repeat this process with other images you wish to add to your canvas.  You can use guides to get your images lining up precisely (see rulers and guides from more information), and the crop tool to trim off any blank areas of canvas that are left over.  

This technique is useful for placing many images into a single image, compositing, or creating storyboards.


￼




Photo Credits
Leaves © Peter Gudelia; Clover © Nailia Schwarz; Flower © Kati Molin; Poppies © Nailia Schwarz 


c0url: installation.html
c1subject: Installation
c2body:
Acorn Installation Guide


Purchasing and installing Acorn directly from Flying Meat

If you haven't already, take advantage of Acorn's 14 day trial period by downloading it from the Flying Meat website: http://flyingmeat.com/acorn/.  Click on the button that says "Download and Try Acorn", and Acorn will be transferred over the Internet directly to your Downloads folder.  Once that's done, navigate to your Downloads folder and find Acorn.  If your browser didn't unzip the Acorn file for you, you might have a file named Acorn.zip - double click on that and OS X will unzip the file revealing Acorn.app.  Double click on Acorn to launch it and you will be asked if you want to move Acorn to your Applications folder.

After using Acorn and deciding that it's right for you, you can purchase Acorn directly from the Flying Meat secure website: https://secure.flyingmeat.com/store/.  When the purchase is complete you will receive an email with registration information which will unlock the trial period for Acorn.  To enter your registration information, launch Acorn and choose the Purchase ▸ Enter Registration Information… menu item.  In the window that comes up, enter your registration information (copy and paste works best).  If you ever misplace your registration you can retrieve it from our website: http://www.flyingmeat.com/support/.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Purchasing Acorn from Apple via the Mac App Store

You may also purchase Acorn from Apple via the Mac App Store. To do so, open the App Store on your Mac, and either search for Acorn or use this link to navigate to it.  To purchase, click the 'Buy App' button in the App Store.  You will then be presented with a button to 'Install'.  Click 'Install' and Acorn will be placed in your Applications folder.

When Acorn is purchased from the Mac App Store, it does not require a registration number.  If you previously were running the trial version of Acorn, you will need to delete the trial from your computer.  Perform a spotlight search for "acorn" (without the quotes).  Delete all copies of Acorn.  Install or re-install Acorn from the Mac App Store.  It should be listed under your 'Purchases' tab.  If you clicked the 'Install' button and Acorn isn't showing up in your Applications folder once it has completed installing, try re-booting. 

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Previously purchased Acorn from the Flying Meat Store and need to re-install

Here is a list of links to download older versions of Acorn.  However, you should always be running the latest version of Acorn since it has important bug fixes that older versions do not contain.

Acorn 1.5.5, for use with 10.4 and later:  http://flyingmeat.com/download/Acorn-1.5.5.zip
Acorn 2.6.5, for use with 10.6 and later:  http://flyingmeat.com/download/Acorn-2.6.5.zip
Acorn 3.5.1 for use with 10.6 and later:  http://flyingmeat.com/download/Acorn-3.5.1.zip
Acorn 4.5.6 for us with 10.8 and later:  http://flyingmeat.com/download/Acorn-4.5.6.zip

Acorn 5 is currently the only version for sale and can be run on 10.10 and later.  Click where it says 'Download and try Acorn" on this page:  http://flyingmeat.com/acorn/.

Acorn will be placed in your Downloads folder.  Open up your Downloads folder and drag and drop Acorn into your Applications folder.  Open Acorn and enter your registration information.  If you have misplaced your registration you can retrieve it here:  http://www.flyingmeat.com/support/.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Previously purchased Acorn on the Mac App Store and need to re-install

Open the App Store application on your Mac.  Log in to your App Store account if you aren't already logged in.  Click on the 'Purchases' tab located along the top of the window.  If you previously purchased Acorn it will be listed there and you can click 'Install' to have it downloaded directly into your Applications folder.

If Acorn is not listed in the Purchases tab, make sure you are logged into the account that purchased Acorn.  You can change accounts using the Store menu item.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: invitation_tutorial.html
c1subject: Invitation Tutorial
c2body:
Invitations



This tutorial will go over how to create an invitation using Acorn.  Choose a nice paper texture for your background and open the image in Acorn, File ▸ Open.  Both the red floral pattern and the teal paper textures are from http://www.cgtextures.com.
￼
Add a second texture to your image, File ▸ Add Images...  Resize it if necessary by selecting Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T).

￼
Select the line tool in the tools palette.  Draw two thin white lines to create a barrier between the two paper textures. 

￼

Go to Layer ▸ New Shape Layer.  Select the rectangle shape tool in the tools palette and create a rectangle with a white fill and no stroke. The text of the invitation will be placed here.   Set the blending mode of the rectangle shape layer to "Soft Light".

￼
Rasterize all your shape layers, Layer ▸ Rasterize Shape Layer.  Select the rectangle selection tool from the tools palette.  Set the corner radius to around 50.  Create a selection that goes close to the boundaries of the image.  Now, go to Select ▸ Inverse.  The selection below is shown as “clipped out’ to highlight its placement.
￼
Hit the delete key. Go through and click on each of your layers in the layers list (with the selection still active) and hit delete. This will trim off a part of each layer.  Deselect (⌘D).  Your image should now have a transparent border and rounded edges. 

￼

Select the bottom layer (the red floral print) and go to Filter ▸ Stylize ▸ Drop Shadow. Adjust the drop shadow to your liking.

￼

Select the text tool in the tools palette and write out the contents of your invitation.  Play around with the font type, size and layout to achieve your desired appearance.  To give the text more depth, add a drop shadow.  For more information on how to do this, read 'Drop Shadows'.   Play around with the x, y offset of the shadow and the blur.  


￼




￼


c0url: iphoto.html
c1subject: iPhoto
c2body:
iPhoto, Photos, and Flickr

Setting up iPhoto to use Acorn as its external editor
iPhoto lets you choose an external editor for photos.  While a lot of image correction can be done inside of iPhoto itself, Acorn is here to help with the more advanced editing.

1. Open up iPhoto.
2. Select from the menu iPhoto ▸ Preferences.
3. Make sure the Advanced tab is selected (in older versions of iPhoto this was located in the General tab).  
4. Locate the pull down that says Edit Photos.
5. Select the pull down and choose In application...
6. A dialog box will open up, navigate to Applications and select Acorn.

Now when you hit the edit button with a photo selected in iPhoto, it will open the photo up in Acorn.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Quickly edit a photo from iPhoto
This will allow you to quickly edit a photo from iPhoto, and keep it in iPhoto.  Letting iPhoto take control of managing where the files are on your computer can be a great way to keep your computer clean and organized.  With this method you will not be able to go back and undo, correct, or modify the changes you have made.  For example, if you put text on your photo, once you hit save you will not be able to edit the text again. 

1. Select the photo you would like to edit in iPhoto.  You might want to take this opportunity to duplicate it by choosing from the menu Photos ▸ Duplicate.  Now you have a copy of the photo in case something goes awry.  You can always delete the original one later.  
2.  If you have Acorn set up as your external editor, then click the 'Edit' button in iPhoto to have your image open in Acorn.  If you don't want to set up Acorn as the external editor, then drag and drop the duplicated photo onto Acorn's icon in the dock.
2. Now your photo is open in Acorn.  Add text, edit, and play.
3. Choose File ▸ Save.
4. Say "Save Anyways" if Acorn pops up with a "File Format Warning".
5. Close the picture in Acorn.
6. Now go back to iPhoto.  If you double click the image to enlarge it, you will see your changes.

Note: Sometimes the thumbnail in iPhoto will not update right away to reflect the changes you have just made.  However, if you open the photo up in iPhoto or add it into a book or calendar the changes that you have made will be present.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Share an Image with iPhoto

You can quickly share an image you have open in Acorn with iPhoto using the File ▸ Share ▸ Add to iPhoto menu item.  iPhoto will open and your image will appear under "Last Import".

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Photos

Click on the image you want to edit in the Photos App, then click on the ‘Share’ icon.  Click where it says ‘more’ and select Acorn.  Then close the window and click the share icon again.  Choose Acorn.  Make your edits and then save your image.  To bring your edited image back into Photos, go to the Acorn menu item File ▸ Share and choose Photos.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Uploading from Acorn to Flickr
You can quickly share an image you have open in Acorn with Flickr using the File ▸ Share ▸ Flickr menu item.  A window will appear for you to add a title, description, tags, and set the privacy access prior to publishing the image.  


<%'<div class="seeAlso">'%>See Also: Using Acorn with iPhoto (video tutorial)<%'</div>'%>


c0url: isight.html
c1subject: iSight
c2body:
Acorn and iSight


￼
Using Acorn with iSight is easy.  if you have iSight on your Mac and want to create a new image, go to Image ▸ New Image from Camera .  iSight will be invoked and the image you take will be immediately brought into Acorn.  If you want to create a new layer from an iSight image go to Layer ▸ New Layer from Camera.  

**Currently this feature is only available on the direct version of Acorn.  



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: jagged_image_edge.html
c1subject: Jagged Image Edge
c2body:
Jagged Image Edge


￼


This tutorial will outline how you can give your image a jagged edge.  To start, open your image in Acorn, File ▸ Open.

￼
Create a new layer, Layer ▸ New Layer.  Using the flood fill tool, fill the layer with white.

￼

Go to Filter ▸ Stylize ▸ Crystallize.  Play around with the settings to achieve more or less of a jagged appearance.  Click 'Flatten'.

￼

￼

Go to Select ▸ Make Selection from Layer, then Select ▸ Inverse.  Click on the visibility eye of the white layer to hide it.

￼

Click on the main image layer and hit the delete key.  Deselect (⌘D).  Make your canvas slightly bigger to really see the boundary, Image ▸ Resize Canvas. 

￼

You can also add a border around the jagged edge.  For more information read the 'Add a Border' tutorial, and follow the steps for 'Add a Border Using a Layer'.  

￼


c0url: keyboard_shortcuts.html
c1subject: Keyboard Shortcuts
c2body:
<% if (writer.contextType() == "html") { %>

<%'
<style type="text/css">

#main td {
    width: auto;
    padding: 0px;
    padding-left: 8px;
    padding-bottom: 5px;
    border: solid 0px;
    vertical-align: top;
}

#main td:first-child, #main td:first-child+td+td  {
    width: 80px;
}

#main td:first-child+td, #main td:first-child+td+td+td {
    width: 200px;
}
</style>
'%>

<% } %>
Keyboard Shortcuts

If you often find yourself using the mouse to change the current tool you are using, you might be able to speed up the process by memorizing a few keyboard shortcuts.  If you forget which key goes to which function, take a look at the menus.

<%'<div class="seeAlso">'%>Don't like a particular shortcut, or wish a menu item had one?  You can change or add shortcuts via the Keyboard System Preferences, under the "Application Shortcuts" section.<%'</div>'%>


Tool Palette Shortcuts:

<Tab>
Toggle Palette
C
Crop
V
Move
D
Reset front and back colors 
B
Paint
H
Pan
K
Flood Fill
I
Eye dropper / color picker
E
Erase, Instant Alpha
Z
Magnify / Zoom
O
Oval Shape
R
Rectangle Shape
T
Text
;
Line
Q
Quick Mask
F
Full Screen
⇧O
Smudge, Dodge, Burn, Clone
X
Swap the front and back colors
P
Bézier curve
N
Pencil
]
Increase brush size.
Hold down the shift key to increment 10x.
Spacebar
Switch to the pan tool momentarily

[



Decrease brush size
Hold down the shift key to decrement 10x.

M,  S,  L



Marque / Selection / Lasso
M selects the rectangular selection tool.  Pressing shift-m or s multiple times will cycle through the rect, oval, free select, polygonal, and magic wand selection tools.  Pressing L will toggle the free select and polygonal selection tools.






Layers

0,1-9
Cycle the current layer through various levels of transparency


⌥ ]
Select next layer


⌥ [
Select previous layer




Magnification / Zoom

⌘+
Zoom in
⌘-
Zoom out
⌘1
100%.
⌘2
200%
⌘3
400%
⌘4
Toggle between 800% and 3500% 
⌘5
Toggle between 50% and 25%




Misc

⇧ Drag
Constrain the oval or rectangle selections and shapes to equal sides.
⌥ Delete
Fill the current selection or canvas with foreground color.
⌘⇧6
Make a new image from a screenshot
⌥⇧Delete
Fill the current selection or canvas with background color
ESC
Cancel current transform or crop operation
⇧Delete
Brings up the Fill… panel.
⌘^\
Anchors the Tool Palette to the top right
Delete
Deletes contents of currently selected layer

⌘⇧C
Show / Hide the Color Palette


⌘F
Perform the last filter again


⌘A
Select All


⌘D
Remove Selection


  ⌘Z
Undo previous action








Legend:

⌘
Command Key
^
Control Key
⌥
Option Key
⇧
Shift Key


c0url: layer_mask_examples.html
c1subject: Layer Mask Examples
c2body:
Layer Mask Examples


Layer Mask Example Using Magic Wand  

To start, add an image of a starfish and an image with some boats to Acorn in separate layers.  The layer with the starfish needs to be above the layer with the boats.  

￼

Click on the starfish layer in the layers list to select it.  Choose Layer ▸ Rotate and Transform ▸ Scale and Rotate.  Scale the starfish layer down to about 20%.  Click ‘Apply’.

￼
Next, select the layer that includes the starfish and add a layer mask by clicking on the cogwheel towards the bottom left hand side of the palette and selecting "add layer mask".  The layers list should now look like this: 

￼

Click on the layer mask to begin working on it.  You will know the layer mask is selected when there is a black line towards the bottom of the mask in the layers list.  Now "mask" everything in the starfish image except the starfish.  To do this, select the magic wand tool, click on the water surrounding the starfish, and drag outwards to increase the selecting tolerance.   
￼

Then choose Edit ▸ Clear (or hit the delete key) to allow the boat layer below to show through.  Don't forget to deselect after doing this by clicking  Select ▸ Clear Selection (⌘D).  Use the move tool in the tools palette to place the starfish where you want it on the boat.

￼
Right now the layer mask is doing its job of exposing exactly the part of the layer below that is situated under the starfish.  Notice how the starfish and the boat layers were not actually altered.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Layer Mask Example Using Gradients

You can have a lot of fun combining images seamlessly with layer masks using gradients.  Similar to the previous example, open the images you want to combine in Acorn.  Place the image that you wish to mask areas from in the top most layer.  In this example a cloudy sky above a country road will be replaced with stars.  The country road image is the top most layer with the stars image layer underneath.  

￼
Following steps outlined previously, add a layer mask to the layer you wish to conceal areas on.  Here a layer mask will be added to the country road layer.  Select the layer mask by clicking on it in the layers palette.  

￼
Now add a gradient to the layer mask.  Click on the gradient tool in the tools palette and choose a black to white "linear gradient".  The goal is to have the stars show through on the country road image from the horizon to the top of the image, so add a gradient spanning this section of the image.  The white line below is showing the span of the gradient.  

￼

Once the gradient is applied, the layer below will be exposed!  Move the star layer around using the move tool so that the stars are where you want them.  Have some fun adjusting the opacity and blending settings to get things looking just right.  

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Layer Mask Example Using 'Paste Into'


Another layer mask technique is using "Paste Into".  With Paste Into you select all or part of one image, then select the area(s) on another image that you would like the initial image to appear on.  Since this uses layer masks neither image is being altered, so it is easy to go back and change things later.  As an example, take a blank television screen.  The goal is to change the television screen to show your image, in this case a married couple.  

 ￼

Open both images in Acorn with the television image in the top layer, and the wedding image in the layer below it.  Click on the wedding image layer.  Choose Select ▸ Select All (⌘A), then make a copy Edit ▸ Copy (⌘C).  Now go ahead and clear your selection (⌘D).  Next, click on the layer with the television image.  Go to the tools palette and pick one of the selection tools.  With this particular example it will be easiest to use the rectangular selection tool with a corner radius (for more information on selection tools read Making Selections).  Select the screen of the television.

￼


Now for the fun part!  Go to Edit ▸ Paste Into (⇧⌘V) and the wedding image will appear to be on tv.  Using the move tool, move the wedding image around until you get it lining up where you want it.  If the wedding image is too large or small, click on that layer and use Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T) to fix things.

￼



Photo Credits
Starfish © Clinton & Charles Robertson; Boat ©  Galyna Andrushko; Country Road © Studio 37; Stars © Mark Sebastian; Television © Pablo Scapinachis; Married Couple © conrado 


c0url: layer_masks.html
c1subject: Layer Masks
c2body:
Layer Masks



Layer masks allow you to show or hide certain parts of a layer without actually having to modify the layer itself.  This can be tremendously helpful when working with layers without committing to permanent modification.  


Creating a Layer Mask

Select the layer that you would like to add on a layer mask.  At the bottom of the layers list, click on the cogwheel and select "Add Layer Mask".  You can also control-click on the layer to bring up the canvas contextual menu, or choose Layer ▸ Add Layer Mask.

The mask shows up to the right on the layer as you can see highlighted on the image to the right.  

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Working with Layer Masks

In layer masks, black that is drawn or painted on the mask hides pixels in the linked layer thus exposing the layer below in those areas.  In this example the bird layer has the layer mask, and the lion is in the layer below.  By selecting a brush and the color black, the bird's background can appear to be removed by drawing on the layer mask. 

￼


White does the opposite of black in layer masks. Anything drawn or painted in white on the layer mask will preserve that area of the linked layer.  If you feel like you have exposed too much of the layer below, you can correct this by changing the color of your pen or brush to white, and draw on the layer mask until you have achieved your desired effect.  Play around with the opacity and style of your pen or brush to maximize smoothness between your layers.  

Drawing on the layer mask in different shades of gray changes the opacity.  A light shade of gray will expose less of the layer below than a dark shade of gray.  If you are drawing on the mask using a color, Acorn converts the color to a shade of gray between black and white.  

￼

Selections are a great tool to use in layer masks.  Use the magic wand tool to select the desired area, then hit the delete key and deselect.  It will have the same effect as brushing with black.

To edit and see your work on the layer mask directly option click on the layer mask thumbnail.  Option click on the thumbnail again to return to the full layer view.

￼

<%'<div class="seeAlso">'%>Important Tip:  Be sure that the layer mask is selected if you want to work on it.  Click on the mask in the layers section of the palette and a black bar will appear towards the bottom of the mask as shown on the highlighted layer mask at the top of the page.  If you want to work on the image rather than the mask, click on the image to select it and the black line will move from the mask to the selected image.  <%'</div>'%>

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Moving, Disabling, Selecting, Committing, and Deleting Layer Masks

To move a layer around on the canvas without also moving the layer mask, click on the "+" that is located between the layer and layer mask in the layers list.  Re-clicking in this location will cause the "+" to appear again and allow the layer mask to move with its layer in the canvas.  

Disabling a layer mask allows you to see what things look like in your project without the layer mask present.  You can disable a layer mask by right clicking on the layer to bring up the contextual menu and selecting "Disable Layer Mask".  The layer mask will turn dark gray to show that it is disabled.  The layer mask can be turned on again by selecting "Enable Layer Mask" from the contextual menu.  You can also perform these functions via the Layer ▸ Disable Layer Mask/Enable Layer Mask menu items.

To make a selection out of the mask, command click on a layer mask's thumbnail.

To commit a layer mask, hold down the option key and choose the Layer ▸ Apply Layer Mask menu item.

To delete a layer mask, make sure you have the mask selected.  Then you can right click on the layer and select "Delete Layer Mask".  Another way to accomplish this is to click on the cogwheel at the bottom of the layers list and the option to delete the layer mask will be presented.   You can also choose the Layer ▸ Delete Layer Mask menu item.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Vector Shapes and Layer Masks

Currently layer masks are bitmap only, which means you cannot draw shapes in them.  If you would like a shape in a layer mask, there is a technique you can perform as outlined in the Shapes in Layer Masks tutorial.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Photo Credits
Bird, Lion 


c0url: layers_basics.html
c1subject: Layers Basics
c2body:
Layers Basics


￼
Overview
Layers are what make most image editors so powerful.  Images are stacked on top of each other in the layers list.  You see a flattened version of the layers in the canvas.  If you take the text tool and write something on your image, you will notice that a new layer called a shape layer has been created. By using the move tool, you can move around this layer without affecting the layer underneath.  Similarly, if you apply a filter it will only apply to the layer you currently have selected in the layers list.  Using this properly will give you the best possible results, and will also allow you to be more flexible if you want to change something later. When in doubt, make a new layer.



Hiding and Renaming Layers

Layers can be hidden and renamed in the layers list.  From left to right you can see a visibility mark (the eye), picture of the layer, and the title of the layer.  Toggling the little eye next to the thumbnail layer will hide and display the layer, leaving all the other layers visible.  Layer names can be changed at any time by selecting the layer then clicking on the existing text.  

Pro Tip:  To hide all other layers, select the layer you want to remain visible then hold down the option key while clicking the eye.  To return all the layers to visibility hold down the option key while clicking the eye again.    

￼

Blending Modes and Opacity
Above the layers list there are layer blending options as well as the opacity slider.  Opacity is the opposite of transparency.  If you pull the slider all the way to the left, it will be 0% opaque and you will not be able to see the layer.  If you pull it all the way to the right, the opacity will be 100% and you can see the layer at its fullest.  

Layer blending modes can be difficult to understand.  They control the way the layer that you have selected interacts with the layers below it.  Multiply for example will make all the whites of the image transparent, but leave the blacks alone.  Screen does the opposite of multiply by leaving the whites alone, but making all the blacks transparent.  The best way to figure out what they do is to play with them or read the blending modes tutorial.



Adding, Deleting, Selecting, and Duplicating Layers
Navigate to the Layer... menu item and you will find options to create a new layer (⌘N), a new shape layer , and to delete the currently selected layer (^⌘-).

You can also right click (or control click) on your layers list to bring up a contextual menu with the options to create and delete layers.  Below the layers list, there is a plus button.  The plus button will create a new bitmap layer.  

To select a single layer in the layers list, just click on it.  To select multiple layers you can hold down the command key while clicking on each layer you want selected.  To select a range of layers, click on the first layer you want selected then hold down the shift key while clicking on the last layer you want selected.

To duplicate a layer, select that layer in the layers list.  You can then right click on the layers list to bring up the contextual menu, or you can choose Layer ▸ Duplicate Layer from the menu.  An additional method is to hold down the option key while clicking the '+' button in the inspector palette.

￼

Grouping Layers

You can group layers together by creating a group layer in your layer list. A group layer works just like a folder. You can create a group by right-clicking inside your layers list to bring up the contextual menu, or you can choose the Layer ▸ New Group Layer menu item.  An additional method is to hold down the command key while pressing the '+' button in the inspector palette. 

If you have multiple layers selected and want to put them in a group, you can use keyboard shortcut command-g.  If you have a group layer selected and would like to ungroup it, then use keyboard shortcut command-shift-g.

A folder icon will appear in your layers list. You can now drag your layers into this group layer. Notice there is an disclosure triangle next to the visibility icon. Clicking on this triangle will show or hide all the layers within this group.

You can rename the group folder by double-clicking the name and entering your own.  Grouping layers is also a good way to move multiple layers at once.

<%'<div class="seeAlso">'%>Pro tip: If you have a group layer selected and you use the Edit ▸ Copy menu item, you will get a composite of the entire group layer on the clipboard.<%'</div>'%>



￼

Locking Layers

Locking layers is useful if you have an object on a layer that you do not wish to move. Locking the layer it rests upon will prevent you from making unwanted changes. 

To lock a layer, right click on the layer you wish to lock.  Then select "Lock Layer" from the menu. This is also available under Layer ▸ Lock Layer.

You will notice that a small lock icon appears in the right side of the layer.

Use the same process to unlock the layer.

￼


Merging Layers

Layers can be merged in a few different ways.  Layer ▸ Merge Down allows you to combine layers one at a time with the currently selected layer being merged with the one below it.  Layer ▸ Merge Visible merges all layers that are not hidden into one single layer.  Layer ▸ Flatten Image merges all layers regardless of visibility.  Merging layers can be a good way of keeping your work clean and organized, but it also decreases your ability to change things later on.  Consider using Edit ▸ Copy Merged and making a new image from the clipboard so that your layers can be preserved in the original file.  Layer ▸ Stamp Visible (⌘⌥⇧E) will add a new layer, which is a composite of all the visible layers. The menu item for Merge Visible will switch to Stamp Visible when the option key is pressed.

Bitmap and Shape Layers Defined

In Acorn, there are two different kinds of layers that can be created.  One is a bitmap layer and the other is a shape layer.  Bitmap layers can be image files, pictures that you bring in from iPhoto, or things that you draw. In their simplest form they are a grid of pixels on the screen.  Shape layers are more like a set of mathematical instructions rather than pixels.  You can go back at any time in a shape layer and change the font, the colors, or the size easily.  

Shape layers cannot be drawn on with the brush or erased using the eraser tool.   Shape layers cannot be transformed using the transform tools.  For example, if you want your shape to have a perspective transform applied, you would need to "rasterize" the layer.  Rasterization is the process of turning a shape layer into a bitmap layer.  Once a shape layer has been rasterized you lose the editing capability you have with shapes, but the bitmap tools become available to you.  If your layer name originally started with "Shape Layer", Acorn will replace it with "Bitmap Layer" when you rasterize. 

<%'<div class="seeAlso">'%>Important Word of Warning
JPEG, the format that most images are stored in, cannot have layers.  Saving out to a JPEG will flatten all of the layers into one. If you would like to save your layers so you can come back later and do more edits, save as the file format .acorn.<%'</div>'%>

If you are curious about the project file used in this example, you can download it here: http://flyingmeat.com/fs/images/acorn/LayersDemo.zip.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: leaves_on_text.html
c1subject: Leaves on Text
c2body:
Leaves on Text 

￼

This tutorial outlines how to make it appears as if leaves are covering text.  Feel free to use other images besides leaves!  To start, find at least 5 - 6 images of leaves.  You will likely need to separate each leaf from its background and save it as a new file.  For detailed instruction on how to perform this, read the "How to Remove a Background" tutorial.    

Open a new file in Acorn, File ▸ New.  This tutorial will use a white background, but you can easily incorporate a texture, gradient, or image background.  The canvas size here is 1200 x 900 pixels.  Drag and drop each of your individual leaf images into the layers list, or use File ▸ Add Images...   
￼

Write out your text using the text tool.  Drag your text layer below the leaf layers but above the background layer in the layers list. 

￼

It's time to start making a lot of copies of the leaves.  Click on each leaf, and create at least 4 or 5 duplicates of the layer, Layer ▸  Duplicate Layer (⇧⌘D).  If you don't use keyboard shortcuts, this will take a lot longer!  Try to use ⇧⌘D to create your duplicates.  Once you have 4 or 5 duplicates of each leaf (for a total of 20-25 leaf layers), change the size and rotation of each leaf layer using Layer ▸ Rotate and Transform ▸ Scale and Rotate (⇧⌘T).  Each of the leaves in this example were given various rotations with a scale varying between 40-60%.

￼

Now that you have 20+ different leaf layers with varying sizes and rotations, use the move tool to start placing your leaves over the text.  You will quickly run out of leaves, but all you have to do is click on a leaf then use ⇧⌘D over and over again.   Create more of each style of leaf as you go along to create a random looking layout.

￼

Still duplicating....

......until you fill in all the areas of the letters.

￼

To give the text more depth, apply a drop shadow.  Make sure your text layer is selected, then choose Filter ▸ Stylize ▸ Drop Shadow.  Play around with the x/y coordinates and radius to achieve your desired effect.  

￼

To have a little more fun, duplicate a couple more leaves (⇧⌘D) and move them higher in the canvas to give the appearance of leaves falling.  Apply a motion blur to each of the falling leaves by clicking on the leaf, then selecting Filter ▸ Blur ▸ Motion Blur.  Keep the radius of the blur fairly small (around 1) so they appear realistic.  You can also use perspective transform to give the falling leaves more of an angle.  Click on a falling leaf, then select Layer ▸ Rotate and Transform ▸ Perspective Transform.



￼


Photo Credits
Leaf  © Siddy Lam; Leaf  © Brenda Starr 


c0url: levels.html
c1subject: Levels
c2body:
Levels

To bring up levels, go to Filter ▸ Color Adjustment ▸ Levels (⌘L).  

To correct or modify levels, simply drag the triangular slider controls located on the left, right, and center at the bottom of the histogram.  The left slider controls the black point, the right slider controls the white point, and the middle slider controls the midtones.

￼ Auto-Levels:  Click on the auto-levels button and the sliders will automatically move to where Acorn thinks they should be located.

￼ Levels Visibility: Click this button to toggle between the original image levels and the modifications you have made.

￼ Reset Levels: The reset button removes any changes you have made to the curve.  

￼ Remove Levels:  To completely remove the levels filter, hit the ‘x’ button. 
￼


Histogram

Levels are a different way of looking at an image.  Instead of the picture being displayed in its normal viewable state, it is shown as a bar graph called a histogram. The histogram is essentially a count of how many times each color shows up in the image.  In the image above, dark colors and midtones are showing up a lot, as you can see by the high spikes in the graph at the left end and just to the right of the middle.  The image is lacking very light colors and white as you can see by the absence of peaks on the right.  

To improve this image, leave the slider on the left alone since it is already under the color peaks.  Pull the right slider in towards the left until it rest under the start of where the closest peak tapers off.  Then play around with dragging the midtones slider to the left to darken the midtones a bit.  Every image is different, so experiment to get the hang of things.

Be sure to read up on the Filters tutorial to learn more about how filters work.  You can stack the levels filter with endless combinations of other filters to create interesting and unique effects to your images non-destructively!  


Example
￼
Before Levels Adjusted


￼
After Levels Adjusted


Output Levels

￼


Below the histogram is a slider with two control tabs.  These control how black the blacks are, as well as the whites. If you bring both tabs in towards the middle you will decrease the contrast of your image.  Try experimenting with them to get the hang of it.  You will see how your histogram changes when you change the output slider positions.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: lifted_image_edges.html
c1subject: Lifted Image Edges
c2body:
Lifted Image Edges 



This tutorial will show you how to create the effect of lifted image edges using two different techniques.


Lifted Image Edges Using Layers

Create a new image in Acorn, File ▸ New.  The image used here has canvas dimensions of 1500 x 1000 pixels with a white background.  Using File ▸ Add Images, choose the image you want to use with this effect.  You may need to use Layer ▸ Rotate and Transform ▸ Scale and Rotate to decrease the size of your layer.

￼
Add a guide to the center of your image.  Select View ▸ Guides ▸ New Guide.   Create a vertical guide placed at the center of the image.  In this case, the center is at 750 pixels. 

￼

Add a new layer to your image, Layer ▸ New Layer.  Select the paint tool and set the size fairly large.  Make sure black is the color in the top color well in the tools palette.  See the other brush settings used here in the image below.  Click once in the center of the image just a little bit above the bottom of the layer.  Holding down the shift key, click once at the bottom left corner of the image to draw a straight line.  

￼
Duplicate the new layer you just created, Layer ▸ Duplicate layer.  Select Layer ▸ Rotate and Transform ▸ Flip Layer Horizontal.  Using the move tool, move the duplicated layer so that it mirrors the original brush stroke.

￼

Merge the copied layer down, Layer ▸ Merge Down.  Move the drawn layer below the image layer in the layers list.  Hit the downward arrow key until the drawn layer begins to show up below the image.

￼
Hide the guide by choosing View ▸ Guides ▸ Hide Guides.  While still selected on the brush strokes layer, choose Filter ▸ Blur ▸ Gaussian Blur.  A radius of around 10 is used here. Decrease the opacity of this layer to your liking in the layers list.  The opacity used here is 75%.  

￼



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Lifted Image Edges Using a Filter

Open your image in Acorn.  Choose Filter ▸ New Image with Curved Drop Shadow.  This filter will create a new Acorn file and add a thin white board and a slight lifted corner effect. 


￼


c0url: light_designs.html
c1subject: Light Designs
c2body:
Light Designs



This tutorial will show you how to create neat light designs from scratch in Acorn.  Create a new image, File ▸ New.  The dimensions used here are 1000 x 1000 pixels with a black background.

Create a new layer, Layer ▸ New Layer . Choose white as the color in your front color well.  Click on the paint tool in the tools palette and choose a big splattery brush or the felt pen. Scribble some random lines.

￼

Now, go to Filter ▸ Tile Effect ▸ Kaleidoscope.  Adjust the count and the angle until it becomes a design you like. Click 'Flatten' when you are happy with the design.

￼


Create a new layer on top of your design, Layer ▸ New Layer. This will be the color layer.  Read below for two ways to color your design.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Color Your Design Using a Gradient

Select the gradient tool in the tools palette. Change it to a radial gradient in the inspector palette.  Choose your gradient colors and drag the gradient from the center of the design outwards.  For more information on how to do this, read 'gradient tool'.  

￼

Set this layer's blending mode to 'color'.  You can change your colors around as much as you want by reapplying different gradient color combinations. 
￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Color Your Design Using Brushes


Select the paint tool from the tools palette. Take any brush you like, and paint over the design. 

￼

This isn't necessary, but applying a Gaussian Blur smooths out the colors. Go to Filter ▸ Blur ▸ Gaussian Blur and adjust the blur slider.  Then, set the blending mode of the layer to Color, just like you did with the gradient.

￼

If you want the design to be brighter, duplicate the layer that your original design is on and place it on the top of all layers.
Change the blending mode of this layer to overlay, lighten, or screen. 

￼


c0url: lighten_or_darken_with_blending_modes.html
c1subject: Lighten or Darken with Blending Modes
c2body:
Lighten or Darken with Blending Modes



This tutorial will cover how to fix overly bright and dark images using blending modes.  Blending modes combined with levels can be a fast way to fix certain image color problems.  Be sure to also read the curves tutorial and the lighten or darken tutorial.


Too Light

This picture of a Mt. Rainier glacier was taken with the camera zoomed into its maximum, on a really sunny day.  The result isn't so spectacular.  
￼
Start by adjusting the levels of your image,  Filter ▸ Color Adjustment ▸ Levels (⌘L).  Bring the sliders just below the histogram inwards until they are just underneath where the curve starts to develop.  You can use Auto Levels as well, but for the purposes of learning, try adjusting them yourself.   

	￼

Make a duplicate of your layer.  Select Layer ▸ Duplicate Layer.   Make sure you are currently selected on your duplicate layer, and change the blending mode to 'Mulitply'.  It's likely your image is now way too dark.  You can easily fix this by decreasing the opacity of the duplicated layer.  The opacity here was decreased to around 30%.

￼


￼     ￼
          
                                                Before                                                                                                 After

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Too Dark

This picture of a street in Barcelona is a bit dark.
￼
Adjust the levels.
￼

Make a duplicate of your layer, Layer ▸ Duplicate Layer.   Make sure you are currently selected on your duplicate layer, and change the blending mode to 'Screen'.  

￼

It's likely your image is now too light.  You can easily fix this by decreasing the opacity of the duplicated layer.  The opacity here was decreased to around 60%.


￼          ￼
             
					   Before                                                                                                             After


c0url: lighten_or_darken.html
c1subject: Lighten or Darken
c2body:
Lighten or Darken Specific Areas  




The curves window can help you lighten and darken higlights, shadows, and midtones in your image.  If you want to make image corrections that apply to all the highlights, shadows, or midtones of your image, then read the 'curves' tutorial to learn more.  This tutorial will outline how you can lighten or darken specific areas of your image.


Using Blending Modes and Layer Masks.  

Open your image in Acorn, File ▸ Open.  Start by adjusting the levels of your image,  Filter ▸ Color Adjustment ▸ Levels.  Bring the sliders just below the histogram inwards until they are just underneath where the curve starts to develop.  You can use Auto Levels as well, but for the purposes of learning, try adjusting them yourself.  

￼
Duplicate your original layer twice, Layer ▸ Duplicate Layer (⇧⌘D).  On one of the duplicated layers, change the blending mode to 'Color Dodge'.  Rename this layer 'dodge'.  On the other duplicated layer, change the blending mode to 'Color Burn'.  Rename this layer 'burn'.

￼
Add a layer mask to the Dodge layer by clicking on the cogwheel towards the bottom left of the inspector palette and selecting 'Add Layer Mask'.  Then go to Filter ▸ Color Effect ▸ Color Invert.  Click 'Flatten' in the layer filter window.  Repeat those steps on the Burn layer.

￼
The dodge layer mask is where you can lighten areas of the image, and the burn layer mask is where you can darken areas of the image.  Choose the paint tool and select a thick brush.  Set the color of the brush to white or light gray.   

The yellow petals have been darkened by brushing in the Burn layer and the opacity of the layer has been decreased.
￼
To lighten areas, switch to the Dodge layer.  The stems of the flowers have been lightened.

￼

If you make any mistakes, you can change your brush color to black with 100% opacity, and just paint over the mistake in the layer mask. 


￼     ￼   
	
					 Before                                                                                         After
                                                                                                                                            
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Using Blending Modes and the Brush Tool


An additional method of lightening and darkening specific areas of your image is to use the 'overlay' blending mode and the paint tool.  Remember to always work on a copy of your image to avoid accidentally making permanent changes to your original.

Open your image in Acorn, File ▸ Open .  

￼

Following the instructions in the previous example, adjust the levels of your image.  Then, duplicate the layer by selecting Layer ▸ Duplicate Layer (⇧⌘D).  Change the blending mode of the duplicated layer to 'overlay'.  Your image should now look similar to this:

￼

It is likely that your image looks too dark now.  Decrease the opacity of the top layer.  This example uses an opacity of around 35%.  

Now, select the paint tool and set the color to white.  Choose a soft brush such as 'painting 8'.  On the top layer, brush over any areas you want lightened with the white brush.  You may need to lower the opacity of the brush if the results are too strong.  Brush over the bride and groom's face, chest, shirt, and a few areas of her hair.  Also brush over the wood on the far left side of the image.

￼

Change the color of the brush to black.  On the duplicated layer, brush over any areas you want darkened with the black brush.  Brush over the groom's jacket, areas of his hair, and some of the wood towards the right of the image.  

￼



￼  ￼

						Before                                                                                    After



Photo Credits
Wedding Couple  © Thomas Wanhoff  


c0url: lightning_and_electricity.html
c1subject: Lightning and Electricity
c2body:
Lightning and Electricity


￼


Whether making a halloween invitation or modifying an image of the outdoors, creating the appearance of lightning or electricity from scratch is a fun project.  

To start, open a new blank image in Acorn with a white background, File ▸  New.  The dimensions used here are 1200 x 1200 pixels.  Click 'OK'.  Create a black to white gradient similar to the one shown below.  It is important to move the black and white gradient tabs in towards each other.

￼

Add a new layer, Layer ▸ New Layer.  Set the blending mode to 'difference'.  Go to Filter ▸ Generator ▸ Render Clouds.  The settings used here are shown below.  Make sure the 'from' color is white and the 'to' color is black.  Click 'Flatten'.  

￼


Merge the layers, Layer ▸ Merge Down.  Then select Filter ▸ Color Effect ▸ Color Invert.  Click 'Flatten' at the bottom of the layer filter window.

￼
Go to Filter ▸ Color Adjustment ▸ Levels.  Move the left most tab to the right until the electricity is mostly isolated.  Click ‘Flatten’.  

￼
￼
If you have any lingering white areas not associated with the electricity, use the eraser tool to get rid of them.  Then, go to Filter ▸ Color Adjustment ▸ Transparentomatic.  Choose black as the color to be removed and adjust the tolerance.  Click 'Flatten'.  

￼
￼
Bring the electricity you have created into the image you want to use it in, or vice versa.  An image of a haunted house has been brought in via File ▸ Add Images and placed below the electricity layer in the layers list.  Change the blending mode of the electricity layer to 'screen'.  You can also try blending mode 'color dodge'.

￼

Duplicate the lightning bolt layer, Layer ▸ Duplicate Layer.   While on the duplicated layer, go to Filter ▸ Tile Effect ▸ Kaleidoscope.  Change the count to '2' and play around with the angle and center placement.  Click 'Flatten'.


￼
￼

Using one of the selection tools, select one of your duplicated lightning bolts and go to Layer ▸ New Layer with Cut Selection.  Set the blending mode of the new layer to screen. Deselect.  

￼

Select Layer ▸ Rotate and Transform ▸ Scale and  Rotate.  Move, rotate, and scale the lightning to create your desired look.  Repeat the same steps with your other lightning bolts.

￼

You can also break up a lightning bolt pair by using the selection tool to select part of a bolt, then make a new layer with your selection.  Using the eraser tool, click on each lightning bolt layer to erase some of the ends of the bolts to make their point of contact with the house more realistic.   Decrease the opacity of the eraser to help with the transition from the bolt to the house.  Also play around with decreasing the opacity of a few of the lightning bolt layers. 



￼




An additional idea for using lightning bolts is on Halloween cards or invitations.  The above steps were followed for creating the lightning bolts.  Then the image of Frankenstein was added, along with text, and the 'Gloom' stylize filter was added to all layers.  The colors of the lightning bolts were changed using the 'Replace Color' filter found under 'Color Adjustment'.  


￼



Tutorial Credit:  Thank you to Troye Hering for outlining the steps of this tutorial.  

Photo Credits
Haunted House © Trostle; Frankenstein © Newsbie Pix.


c0url: make_a_puzzle.html
c1subject: Make a Puzzle
c2body:
Make a Puzzle


￼

Create a new image in Acorn, File ▸ New (⌘N).  The dimensions used here are 1200 x 1000 pixels with a white background.  Add your image, File ▸ Add Images.  You may need to scale your image to fit in the canvas using Layer ▸ Rotate and Transform ▸ Scale and Rotate (⇧⌘T).  The image seen here has been scaled down to leave a bit of room on all sides with more space towards the bottom of the image.  This will allow you to place some puzzle pieces along the bottom later.

￼
  
Now using File ▸ Add Images, add the image of a puzzle template.  Many free puzzle templates can be found online.  The one used here can be downloaded via the link provided under 'Photo Credits' below.   Using the rectangular selection tool from the tools palette, select an area of the template that you want to use.

￼
Choose Layer ▸ New Layer with Cut Selection.  Deselect (⌘D).  Right click (or control-click) on the original puzzle template layer and choose 'Delete Layer'.    Make sure you are now selected on your remaining puzzle template layer and use Layer ▸ Rotate and Transform ▸ Free Transform to match up the edges of the puzzle template over your image.  Double click once you are done.  You may need to use the eraser tool to get rid of any areas of the puzzle template you didn't mean to select.

￼
It's time to give the puzzle template an outer border.  Choose the rectangle shape tool from the tools palette.  Make sure 'fill' is unchecked and set the stroke to a fairly small number such as 1 or 2.  Black should be the color in the foreground color well.  Draw out a rectangle and match up the edges to the boundaries of the puzzle template.  It is helpful if View ▸ Guides and Grids ▸ Snap to Layer is checked.

￼
Move your border layer to the top of the layers list if it isn't located there already.  Merge your border layer down with the puzzle template layer, Layer ▸ Merge Down (⌘E).  

Choose the magic wand selection tool and check the ‘contiguous wand’ and ‘anti-alias selection’ boxes in the inspector palette.  Make sure you are still on the puzzle template layer, and click and drag inside a puzzle piece that you want to remove from the puzzle in order to select it.  Make sure the marching ants are inside just that one puzzle piece.  The image below shows the selection as clipped out to highlight where it is located.

￼

Now click on your main image layer (in this case the layer named ‘Rocket’), and choose Layer ▸ New Layer with Cut Selection.  Deselect (⌘D).  Move the newly created layer to the top of your layers list.   Here it has been renamed 'Puzzle piece #1'.  Using the move tool, reposition the newly created layer so that it appears slightly beyond where it would snap into the puzzle.

￼

Use Layer ▸ Rotate and Transform ▸ Scale and Rotate (⇧⌘T) to rotate the puzzle piece you just created.  Repeat the above steps for creating cut out puzzle pieces as many times as desired.   

￼

Use the eraser tool to remove any puzzle template outlines that shouldn't be present after moving puzzle pieces.  In this example, puzzle outlines were erased from the bottom puzzle cut-out area from both the ‘puzzle’ layer and the ‘rocket’ layer. 

￼


Click on one of your puzzle piece layers and choose Filter ▸ Stylize ▸ Fuzz Stroke.  Click on the '+' button towards the bottom left of the filters window and add Stylize ▸ Drop Shadow.  Then add Stylize ▸ Inner Shadow. The settings used here are shown below:


￼

Click on the cogwheel towards the bottom left of the filters window and choose 'Save Filter Preset'.  Make up a name and click 'Save'.  This will allow you to use the settings and filter combination you just created easily on the other puzzle pieces.  

Now click on a different puzzle piece layer and click on the 'fx' button located towards the bottom left hand corner of the layers list.  Click on 'Presets' and choose the preset you just saved.  Repeat this process for any other puzzle piece layers.  

￼

Select your main image layer (‘rocket’) and apply a drop shadow.

Now choose your puzzle template layer and go to Filter ▸ Stylize ▸ Drop Shadow.  Click on the '+' button towards the bottom left of the filters window and add Stylize ▸ Inner Shadow.

￼

Play around with decreasing the opacity of the puzzle template layer.



￼
Photo Credits
Puzzle Template © Flying Meat Inc


c0url: making_a_custom_web_button.html
c1subject: Making a Custom Web Button
c2body:
Making a Custom Web Button

￼


In this tutorial, you will learn how to make a custom ‘Submit’ button that can be found on a lot of websites these days. 


Break it down.

If you zoom in on the image, you'll notice that the button is made up of 4 distinct components.

There is an outside border (outer highlight), an inside border (inner highlight), and the meat of the button.  Each of these first 3 parts contains a gradient.  The gradient is not as distinct for the edges, but it's there.

The final component is a drop shadow that shows up on the outside bottom of the button.
￼



Start at the beginning.

Create a new image in Acorn, File ▸ New.  Enter 400 x 200 pixels as the dimensions with a ppi of 144 and set the background color to transparent.

Next, click on the rectangle shape tool button in the palette.  You can also use the shortcut key 'R' to select the rectangle tool.

Make sure the fill button is checked, set the corner radius to “8”, and uncheck the stroke button.   


￼



Make your first rounded rectangle.

With the rectangle tool selected, make a single click on your canvas.  A square will be created.  Go to the inspector palette and enter 156 for the width, and 60 for the height.   

Using the move tool (shortcut key 'v'), drag your new shape to the middle of the canvas.  If you have "Snap To Canvas” turned on, the shape should snap to the center of the canvas when you get close.

￼



Select the gradient tool.

Make sure your shape is selected, and then choose the gradient tool from the palette (shortcut key 'G').  Select the gradient highlighted on the right.
￼



Put a gradient on the shape.

If you had your shape selected, your canvas should look like the first example on the right.  

You'll notice that the gradient goes from left to right by default- but it needs to go from bottom to top.  To do this, make sure the gradient tool is still selected.  Using the mouse, drag a line from the bottom of the shape to the top of the shape while holding down the shift key.  This will re-orient the direction of the gradient from bottom to top.  Holding down the shift key places the gradient at a perfect 90 degree angle.

Your canvas should now look like the second image to the right.

This is a good time to save your image and give it a descriptive name like "Submit Button".  Be sure to save it as a .acorn file.



￼


￼



You made the border.  But it's a box.  It's a border box!

It might not look like it just yet, but you've just created the outside border to your button.  

Select the shape using the move tool, and copy it. Go to Layer ▸ New Shape Layer and paste it.  The duplicate shape will become the inner highlight of the button.

Make sure the duplicate shape is still selected.  Click on the rectangle shape tool in the tools palette again (or press the 'R' key).  You'll notice that the frame field at the bottom of the inspector palette now has values in it.  Since the inner highlight is a bit smaller than the outside highlight, change the size of the shape.

For the width and height fields, enter 152 and 56.  Reduce the corner radius of the duplicate shape to 6 px.  

Next, using the move tool, drag the duplicate shape to the center of the canvas so it's right on top of the original shape.
 





￼


￼




Time for a lighter inner gradient.

Since the inner highlight is by definition lighter than the outside, you'll need to change the values of the gradient.

If you double click on the first gradient move widget (that's the guy that looks like this on the gradient palette: ￼), the color picker will come up.  Drag the brightness slider to a point where it's approximately 25% away from the left.  If you don't see the color wheel in your color picker, make sure to select it from the toolbar at the top.

Next, double click on the second gradient widget, and slide the brightness slider all the way to the left.

The button should now look like this:

￼


Hey- you're getting there!


￼




One more gradient to go.

To make the third shape, follow the same steps as outlined for creating the second one.  Start by selecting the smaller shape, copy, and then paste it on the canvas.  Using the rectangle shape tool, set the width to 148, the height to 52, and change the corner radius to 4px.  Drag the shape to the middle of the canvas, and make sure it stays selected in order to change its gradient.

If you look back to the original image of the button, you'll notice that the big inner gradient is darker than the highlight, but lighter than the outside border.  When adjusting the final gradient, keep that in mind.

With the gradient tool selected, double click on the first gradient move widget to bring up the color palette.  Drag the brightness slider a bit until it's about 30% from the left.  Double click on the second gradient widget, and drag it down so it is about 25% from the left.  Deselect the shape.  The canvas should now look like the image to the right.

It's looking pretty good!









￼



Making a drop shadow using a filter.

There's one final thing missing from the 4 parts of the button, and that's the drop shadow.  

Click on your bottommost shape layer in the layers list.  Bring up the filter window by choosing the Filter ▸ Stylize ▸ Drop Shadow … menu item.  

Change the X Offset to 0, and the Y Offset to −1.  Change the Blur Radius to 1, and then finally set the Opacity to 30%.  

You officially have a very stylish button.
￼



Text it up a bit.

Choose the Layer ▸ New Shape Layer menu item.  Why?  Because in order to style your text up a little bit, you need the text to be on its very own layer for it to work right.  Move this layer to the top of your layers list.

Click on the text tool (shortcut key 'T') in the tools palette.  Change the Family to "Helvetica Neue", change the Typeface to "Bold", and set the Size to around 32.

Click on the canvas with your text tool (right over the button) and type the word "Submit".  Press the ESC key to end editing, and using the move tool align your text so it fits over the button.  Here's what it should look like:

￼
￼



Filters, one more time.


Bring up the filters window again by choosing Filter ▸ Stylize ▸  Drop Shadow.  Change the X Offset to 1, Y Offset to −1, Blur Radius to 0, and set the Opacity to 40%.  




￼ 


BEHOLD!  IT IS DONE!  A BUTTON AT LAST!
￼

Hopefully you've learned something valuable today- including how to make a neat button with Acorn.

Thanks to the folks at http://kickoffapp.com/ for the inspiration.


c0url: making_your_own_texture.html
c1subject: Making Your Own Texture
c2body:
Making Your Own Texture



This tutorial will outline the steps for creating a couple different textures from scratch in Acorn.


Brushed Metal

Create a new image in Acorn, File ▸ New.  Click on the foreground color well and pick a gray color.  Fill the layer with gray using the flood fill tool.  

￼
Add a new layer, Layer ▸ New Layer (⇧⌘N).  Then go to Filter ▸ Generator ▸ Random Generator.  Click on the '+' on the bottom left side of the filter palette.  Choose Color Effect ▸ Color Monochrome.  The intensity should be set to 1.0.  Click '+' again, and this time choose Blur ▸ Motion Blur.  

￼

Play around with the radius of the motion blur.  The effects can be seen in real time on your image.  


￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


Linen

Follow the same steps as outlined above for creating a brushed metal texture.  Duplicate the filter layer, Layer ▸ Duplicate Layer.  Reduce the opacity of the duplicated layer to around 50%.

￼

Double click on the 'fx' in the layers list of the duplicated layer and change the motion blur angle to 90 degrees.  

￼
￼
To change the color of the linen, add a new layer to the top of the layers list, Layer ▸ New Layer.  Using the flood fill tool, fill the layer with whatever color you desire.  Black is used here.  Play around with decreasing the opacity of the layer or using a different blending mode.  In this example the opacity is set to 80% and the blending mode is set to "Overlay".

￼

Play around with the settings of the motion blur and the color of the color monochrome to modify the appearance of the linen.  The image below has a motion blur radius of 100 and the color monochrome is black.


￼

 
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Leather 


Create a new image in Acorn with a white background,  File ▸ New .

Go to Filter ▸ Generator ▸ Render Clouds.  Click once on the 'From Color' color well to select it.  Choose a dark brown in the colors palette.  Click once on the 'To Color' color well and choose white.  Decrease the scale to around 30 and the power to around 0.50.  Don't worry about getting things perfect right now.  You can make adjustments later.  

￼
Next click '+' towards the bottom left of the filters palette and choose Stylize ▸ Shaded Material.  Decrease the scale to around 0.50.  Click '+' again and select Color Adjustment ▸ Color Controls.  Adjust the color controls to achieve your desired effect.

￼


Play around a bit to get your texture looking good!


￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Tutorial Credits
Brushed Metal: Special thanks to fuper for creating the steps of this tutorial.
Leather:  Many thanks to Troye Hering for outlining the steps of this tutorial.


c0url: mounting_corners.html
c1subject: Mounting Corners
c2body:
Mounting Corners


￼

Placing mounting corners at your image edges is a fun way to to make a digital image really pop.  Create a new image in Acorn, File ▸ New.  The dimensions used here are 1200 x 1000 pixels with a white background.  Use File ▸ Add Images...to bring in your main image.  Choose Layer ▸ Rotate and Transform ▸ Scale and Rotate and scale the image down so you can see the white background around all the edges.

￼
Create a new layer, Layer ▸ New Layer (⌘N).  Using the polygonal selection tool, make a triangular shaped selection in one corner of your image (read up on making selections).  In the example below the selection is shown in the upper right hand corner.  Make the triangle the appropriate size for a mounting corner.  It may be helpful to have a grid  (View ▸ Show Grid) or ruler (View ▸ Show Ruler) present to make your triangle sides of equal lengths.

￼

Fill the selection with a solid color using the flood fill tool.  Deselect (⌘D).  Select the eraser tool in the tools palette.  Make sure the "block erase" box is checked with flow at 100% and softness at 0%.  Adjust the size of the eraser to achieve your desired look.  Again, having a grid present will help you line things up exactly.  Click with the eraser to take a triangular chunk out of the center of your mounting corner.

￼

Go to Filter ▸ Stylize ▸ Bevel.  Adjust the bevel amount to around 2.

￼  

Duplicate your corner layer three times Layer ▸ Duplicate Layer (⇧⌘D).  Rotate each duplicated layer so each one faces a different direction, Layer ▸ Rotate and Transform ▸ Rotate Layer.  Move each corner layer to its corresponding corner using the move tool and adjust the mounting corners so they are each slightly off the main image.  If you like things exact, make sure View ▸ Guides and Grids ▸ Snap to Layers is checked.

￼


Similar to the 'frame your image' tutorial, you can play around with different colors, textures, and styles of corners.


￼


Photo Credit
© Basilievich 


c0url: new_view.html
c1subject: New View
c2body:
New View


Have you ever worked on an image while zoomed in but simultaneously wanted to see what your work looks like at a different zoom level?  New View gives that capability.  

If you have an image opened up in Acorn, go to Window ▸ New View.  Your image will then show up in a separate window with your file name preceded by "New View:" in the window title bar.  This is the window that you want to move off to the side so you can look at it while making changes to the main image.  

￼￼
							Main canvas			                                                                         New View


The New View is not an additional layer and you cannot modify it directly.  In the image below, the main canvas on the left is zoomed in on Thomas Jefferson's lips to give him a little smirk using the selection and clone tools.  The New View window is on the right showing how the changes look when zoomed out.  

￼￼
						     Main canvas				                                        	                 New View



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Photo Credits
© Ralf Broskvar 


c0url: outer_and_inner_glow.html
c1subject: Outer and Inner Glow
c2body:
Outer and Inner Glow


￼

This tutorial will outline how you can give your text an outer and inner glow effect using both a simple method and a more complicated one.


Outer Glow

First, create a new image in Acorn, File ▸ New (⌘N).  The dimensions used here are 1200 x 900 pixels with a white background.  Type out some text.  The font style, and size can be seen in the palette below.  A dark gray color is chosen in the back color well in the tools palette.


￼

Choose Filter ▸ Stylize ▸ Fuzz Stroke.  Play around with the settings, the ones used here can be seen below.  Click on the 'Stroke Color' box in order to change the color of the outer glow in the colors palette.  

￼

Your text should now appear to have a glowing outer edge!  If you want to go back and change the settings of the outer glow, just double click on the 'fx' to the right of your text layer in the layers list.  

￼
An additional method to achieve an outer glow is to add two drop shadow filters to your text layer.  You can then adjust the offsets to have the glow appear along all the outer edges.

￼

￼


Inner Glow

Type out some text.  Go to Filter ▸ Stylize ▸ Inner Shadow.  The settings used here can be seen below.  To easily duplicate the Inner Shadow filter, hold down the option key while clicking and dragging on the filter.  Place the duplicated filter above or below the current one in the filters list.

￼

Play around the the blur radius, opacity and offsets to make the glow more or less “glowy”.

￼



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
More Complicated Glow

To take creating an outer glow to the next level, there are some additional steps to apply.  Create a new image in Acorn, File ▸ New.  The one used here is 1200 x 900 pixels with a white background.  Select the gradient tool and create a gray to black radial gradient.  

￼

Type out your text.  The font, size, and settings used here can be seen below.

￼

Go to Filter ▸ Stylize and add the following filters:

￼

Your image should be looking good!

￼

To create a little more brightness along the edges, duplicate your text layer (⇧⌘D).  Disable the filters by right-clicking on the 'fx' on the right side of the layer and choosing 'disable layer filter'.  Change the color of the duplicated text layer to the same blue you used in your filters.  

￼

Move the duplicated text layer below the original text layer.  Select the move tool.  Using the arrow keys, move the duplicated text layer up or down a few pixels so that it gives the boundary a nice glow.  Repeat the steps of duplicating the layer again if you want additional brightness.

￼


￼


c0url: paint_and_pencil.html
c1subject: Paint and Pencil
c2body:
Paint and Pencil Tools



Acorn has two drawing tools: Paint (B) and Pencil (N).  Brushes are used primarily for painting and drawing because they create soft, smooth lines.  The pencil is most useful for when you are zoomed in and you need to edit single pixels.  This is because the pencil has sharper edges than the brush tool. 

￼
Pencil (N)

The pencil tool can be changed in size and opacity, and the blending mode can be set via the drop down menu.  

The blending mode drop down menu includes a 'Copy' setting. 'Copy' erases the pixels you draw over and replaces them with the currently selected color.  This is especially useful if you're using a color with alpha in it.


￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

￼
Paint (B)

When you click on the paint tool, you can adjust the size and opacity of the brush in the Inspector Palette.  You can also turn on and off the tablet pressure, and precision mode.  

Shortcuts for modifying brush size:

	•	Hold down the control and option keys at the same time while clicking on the mouse and moving it left (to decrease size) or right (to increase size). 
	•	Hold down the [ key (left bracket) to decrease size, and the ] key (right bracket) to increase size
￼


If you click on the brush preview window, a drop down menu will appear for selecting different types of preset brushes.  You can select from Brushes, Pens, Pencils, and more.

<%'<div class="seeAlso">'%>Tip:  You can quickly convert any brush to an eraser just by holding down the command and option keys<%'</div>'%> 
Importing Photoshop Brushes

To import a photoshop brush (.abr file), just drag and drop the brush file onto the Acorn icon in the dock when Acorn is open.  The brush will then be located under ‘Imported’ in the brush preview window.

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


Acorn's Brush Designer

To the left the brush preview window there is an icon of a paint brush.  Clicking on this will open the brush designer which allows you to customize and save your own brushes.  Alternatively, you can bring up the brush designer by clicking on the Window ▸ Brush Designer menu item.  
￼
The Brush Designer is a powerful tool that allows you to make your very own brushes or modify existing ones.  Simply draw in the canvas provided, change the settings for the brush, and watch your brush strokes update to the new settings.

Here is a rundown of the various options:

	•	Size:  This is the width and height of your brush.  To make your brush bigger or smaller, modify this setting.
	•	Spacing:  Acorn uses a dabbing (also known as stamping) method for its brushes.  In essence, a brush stroke is a whole bunch of stamps of the same image over and over again.  The spacing option decides how close together those stamps appear.
	•	Softness:  This option alters the brush stroke to have a softer or harder edge.
	•	Squish:  Do you want your brush to have a a slight angle to it, like a felt tip pen might have?  Use this option to decide how much of an angle.
	•	Rotate:  This will rotate your brush dab to your desired angle.
	•	Flow:  The flow slider adjusts the amount of paint the brush applies with each stroke.
	•	Jitter:  This option adds a range of randomness to your brush strokes.
	•	Use Image…:  If you have a pre-existing image you would like to use as the brush, select 'Use Image'.  Alternatively, the stamp preview will allow you to drag and drop images into it.  You can make a brush pattern in Acorn, and then drag and drop the image into the Brush Designer preview.  You can also paste an image into the brush designer canvas to create your brush.
	•	Brush blending:  Control how the brush strokes are applied to your image.  Use Multiply for a felt tip pen feeling, or Darker if you want your brush strokes to add darkness to the image.  Use Destination Out to create an eraser brush.
	•	Rotate brush:  This will rotate the brush depending on the direction you are drawing.  This feature works great with shape brushes.
	•	Smooth lines:  With this option turned on, Acorn will try and smooth out any edges it finds when drawing.  This is especially useful when drawing with the mouse.


A brush with blending set to multiply:

￼

The same brush, with blending set to normal:

￼

Tablet Options

	•	Use tablet pressure for opacity:  When this is turned on Acorn will make your brush strokes more or less opaque, depending on the pressure you use with your tablet stylus.
	•	Use tablet pressure for stroke width:  When this is turned on Acorn will alter your brush strokes to be thicker or thinner, depending on the pressure you apply with your stylus.
	•	Tablet pressure range:  This slider alters the minimum bound for the pressure sensitive options.  If you find that there is too much range in the stroke width, you can change this setting to make your brush strokes thicker.


Saving a Custom Brush

To save your brush, type ⌘S and a sheet will appear asking you for a name and category for the brush.  You can add your brush to an existing category, or create a new one.  If you purchased Acorn from the Flying Meat Store, custom brushes are saved to your ~/Library/Application Support/Acorn/Brushes/ folder.  If you purchased Acorn from the Mac App Store, the App Support folder has been moved to:  ~/Library/Containers/com.flyingmeat.Acorn/Data/Library/Application Support.  You can exchange your brushes with friends over email simply by sending them your saved brush from the Finder.  You can also delete brushes you have created from the Finder.


Deleting a Custom Brush

Acorn comes with a number of built-in brushes which cannot be deleted.  To delete a custom brush, you can navigate to the ~/Library/Application Support/Acorn/Brushes/ folder.  Move the brush you want to delete to the trash.  Alternatively, you can go to the brush drop down menu in Acorn.  Select the brush you want to delete while holding down the option key.  A pop-up window will appear confirming whether you want to delete the brush.  


<%'<div class="seeAlso">'%>See Also:   Shape Brushes <%'</div>'%> 

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


Precision Mode

Precision mode is handy for drawing precise lines, especially if you are using a mouse.  This mode will slow down the motion of your brush, making it easier to control your line.  The option to turn on precision mode is located in the inspector palette.

To change the slowdown value of the precision brush, open Acorn's preferences window ( Acorn ▸ Preferences) and click on the Advanced tab.  There you will see a slider and value input labeled Precision Brush Slowdown Speed. The higher the number, the slower the brush will move. 

￼

<%'<div class="seeAlso">'%>See Also: Video Tutorials - Paint Tool Basics<%'</div>'%>


c0url: panorama.html
c1subject: Panorama
c2body:
Panorama 


￼


This tutorial will teach you how to combine images to create a panorama in Acorn.  Create a new image in Acorn, File ▸ New.  You will likely want a fairly large canvas to start.  This example uses a 3800 x 2400 canvas with a white background.  Go to File ▸ Add Images and choose the images you want to be included in your panorama.  Each image will be brought in as a separate layer. 

￼
Rename your layers so it is easy to tell which one belongs where in the layers list.  The layers here are renamed left, middle, right, and background.  Rearrange your layers so the rightmost image is on the bottom of the layers list (just above the background), followed by the center, with the leftmost image on top.  

Using the move tool in the tools palette, line up your images so they are close to being matched up.  Don't match them up exactly, leave a little gap so a small area appears duplicated.  It may be necessary to slightly increase or decrease the size of your image layers to assist with matching.  Click on the layer you want to resize.  Go to Layer ▸ Rotate and Transform ▸ Scale and Rotate.  Increase or decrease the size, or rotate slightly until things look right.  You can also use Layer ▸ Rotate and Transform ▸ Free Transform.   In this example both the center and right most image were increased in size and the right image was slightly rotated.  

￼

Choose the rectangular selection tool in the tools palette.  Draw out a selection encompassing the obvious line of overlap between your center image and rightmost image.  

￼

Then go to Select ▸ Feather.  Choose a radius of around 20.  Now click on your center layer to select it and click 'delete'.   Use keyboard shortcut ⌘D to deselect.  

Repeat this process for all other areas of overlap.  Be sure to delete the selected area of the layer that is above the other layer.  You may need to make small adjustments to how your layers are lining up using the move tool.  It is helpful to zoom in (⌘+) to really see the small details.   

￼

Select the crop tool from the tools palette and crop out areas of the image you don't want or that are uneven.  

￼

If any of your layers appear a lot brighter or darker than the others, you can click on that layer and choose Filter ▸ Color Adjustment ▸ Color Controls or adjust the curves and levels.   In this image, the right portion of the large cedar tree was darkened with the burn tool, and the curves were adjusted to decrease the green and increase the reds.



￼


c0url: photo_booth_layout.html
c1subject: Photo Booth Layout
c2body:
Photo Booth Layout

￼

This tutorial will outline how you can create a photobooth style image layout using Acorn.  The settings used below are assuming the end result will be printed.  All images used in this tutorial have a beginning resolution of 300 PPI.  Be sure to read all about DPI, PPI, and Printing to understand more on this topic.  

To start, create a new image in Acorn, File ▸ New.  Set the width and height dimensions to 472 x 2420 pixels.  Set the resolution to 300 and the background color to black.  These dimensions and resolution will give a printed result that is around the same size as old photo booth strips (approximately 1.57" x 8.07").  

￼

Go ahead and save this file, File ▸ Save, and put it aside for now.  It will be used again later.

Now open one of the images you want included on your photo strip in Acorn, File ▸ Open.  Resize the image so that at least one dimension matches 450 x 578 pixels without going under those dimensions, Image ▸ Resize Image.  The image below is matched in height, but will still be too wide.  The width will be fixed in the next step.

￼

Select the crop tool in the tools palette.  Using the dimensions 450 x 578 pixels in the width and height fields in the inspector palette, crop your image.  

￼

Save the image with a new name so you don't accidentally lose your original!

Repeat the steps outlined above for opening, resizing, cropping, and saving the other 3 images you want included in your strip.  

Go back to the original image you created with the black strip.  Go to File ▸ Add Images, and select the 4 images you prepared in the above steps (or you can drag and drop the images into the canvas).  Using the move tool, re-arrange the images in the order you want them laid out.  Don't worry about exact spacing yet. 

￼
Make sure View ▸ Guides and Grids ▸ Snap to Canvas is checked.  Line up each photo layer with the center of the canvas.  Select View ▸ Guides and Grids ▸ Show Grid, then View ▸ Guides and Grids ▸ Grid Settings.  Set the grid spacing to 11, then 'ok'.  Zoom in on your image as much as you need to in order to be able to line your images up with the grid.  Select the move tool and align your images.  The images should be approximately two grid spaces away from one another and from the top and bottom  (22 pixels).  The black background layer is hidden in the image below to make the grid easier to view.

￼

Turn the grid off, View ▸ Guides and Grids ▸ Hide Grid.  Check out your work and see how you did!


￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Photo Credits
girl 1; girl 2; boy 1; boy 2 


c0url: photo_collage.html
c1subject: Photo Collage
c2body:
Photo Collage


In this tutorial you'll learn how to add multiple photos to an image to create a collage.  To start, open the image you want to be your background in Acorn, File ▸ Open.
￼

Add one of the images you want included in your collage by dragging and dropping the file onto your background photo, or by using File ▸ Add Images...  If necessary, decrease the size of the photo you added by choosing Layer ▸ Rotate and Transform ▸ Scale and Rotate (⇧⌘T).   Drag a corner of the boundary line that appears in or out to modify the size of the image, or use the inspector palette to modify the scale of the image by percentage.  You can see that the image below was scaled to 30%.  

￼
If desired, rotate the photo by clicking and dragging beyond the boundary lines.  Place the photo where you want it and double click to commit your transformation.

￼
Go to Select ▸ Make Selection from Layer.  Then choose Layer ▸ New Layer with Selection.  Now select Edit ▸ Fill.  Make sure to choose 'Use: Custom’.  Click on the color box and the colors palette will appear.  Choose the color you want the border around your photo to be.  Click 'OK' when you are done. 
 
￼
Deselect by using keyboard shortcut ⌘D.  Move the layer you just created down below the photo you added, but above your background layer.  Choose Layer ▸ Rotate and Transform ▸ Scale and Rotate (⇧⌘T).  Increase the scale of the layer until it gives your photo the border thickness you desire.  104% is the scale used in this example.  Double click to commit the transformation.

￼

Add a drop shadow to the white background layer to make the photo stand out.  Go to Filter ▸ Stylize ▸ Drop Shadow.  

￼

Repeat the above steps for any additional images you want added to your collage.

￼
If you want to make your background image have a border, start by clicking on the background layer.  Follow the same steps outlined above for creating a border.  Once you have created the border, you can choose Image ▸ Expand Canvas to Fit Layers in order to have the canvas perfectly fit around your creation.

￼


c0url: photo_cutout.html
c1subject: Photo Cutout
c2body:
Photo Cutout



Open your image in Acorn, File ▸ Open.  Duplicate the layer by going to Layer ▸ Duplicate Layer (⇧⌘D). 

￼
Click on the bottom layer in the layers list and use the selection tool to select the area you want in your photo.  You can use either the rectangle or the oval selection tool.  The rectangle with rounded corners was used in this example.   Don't include most of the elephants head in the selection, since the goal is to have it sticking out the border of the photo in the final image. After you have your selection made, go to Select ▸ Inverse (⇧⌘I). This will select the area you don’t want to keep. Hit the delete key.  
￼
Deselect (⌘D).  Your bottom layer should look like this if you hide the visibility of the top layer: 

￼
Now, click on the top layer in the layers list to select it. Erase everything but the head. The easiest way is to select large areas with the selection tool.  Then hit the delete key. See how the bottom layer shows through? Continue selecting and deleting the areas you want to take out.  Be sure to deselect when you are done (⌘D).

￼
When all the large parts have been removed, erase around the ears and head using the eraser tool from the tools palette. This is the tedious part. You will have to erase all around the part of the image you want to be on the outside boundary. It's easier to start with a larger sized eraser then work your way to smaller sizes.  Zoom in to more easily see the edges when erasing.  Alternatively, read the ‘how to remove a background’ tutorial for other techniques.

￼


￼


c0url: photo_inside_a_photo.html
c1subject: Photo Inside a Photo
c2body:
Photo Inside a Photo


￼


Open your image in Acorn, File ▸ Open.  Duplicate the layer by right clicking on the layer in the layers list and selecting "Duplicate Layer" (⇧⌘D).

￼
Click on the top layer in the layers list to select it.   Click on the rectangular selection tool in the palette and drag out a selection of the area you want to be the "Photo".  

￼
Inverse the selection by going to Select ▸ Inverse (⇧⌘I). Hit the delete key. This will leave the "photo" area separate from the background.  Deselect (⌘D).

Now, select the bottom image layer by clicking on it in the layers list.  Select the Rectangle shape tool in the tools palette.  Make sure the fill box is checked and stroke is unchecked.  Create a rectangle under the "photo" and on top of the background.  If you have a hard time seeing where the "photo" is, turn off the visibility on the background layer by clicking on its visibility eye in the layers list.
￼
When you have your border in place, click on the shape shadow option.  You can read more about this under drop shadows.  Adjust the shadow placement, blur, and color until you get the effect you want. 

￼

Desaturating the background layer will make the photo stand out more.  To do this, click on your bottom layer in the layers list to select it, and go to Filter ▸ Color Adjustment ▸ Color Control and adjust the Saturation slider to the left.  

￼


An alternative technique is to not use a shape layer at all.  Instead, click on the copy of the horse layer and add a drop shadow.


￼



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: photo_manipulation.html
c1subject: Photo Manipulation
c2body:
Photo Manipulation



This tutorial will show you how to make it appear that egg yolks have faces using blending modes.  Open the main image you wish to use in Acorn, File ▸ Open.   Choose Filter ▸ Color Adjustment ▸ Levels and click the auto levels button ￼ (keyboard shortcut ⇧⌘L).  If needed, make adjustments to the saturation, brightness, and contrast via Filter ▸ Color Adjustment ▸ Color Controls.  The saturation has been increased slightly in this image.

￼

Bring in your second image, File ▸ Add Images...  A crying baby image will be used to give all the eggs faces.

￼


Resize the baby image by using Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T). Adjust the size until the face fits over the egg and double click to commit your work.  The opacity of the baby layer was decreased to 40% temporarily in order to see how it fits on the egg yolk.

￼

Set the blending mode of the layer to Pin Light.  Select the eraser tool in the tools palette.  Erase everything but the mouth, nose, and eyes.


￼

Repeat this process to give the other yolks faces as well. 


￼



Photo Credit
Baby © Chalky Lives; Baby © futurestreet; Baby © nateOne; Baby © bbaunach 


c0url: placing_a_photo_into_text.html
c1subject: Placing a Photo Into Text
c2body:
How to Place a Photo Inside Text



￼


This tutorial will demonstrate one method for making it appear as if an image is inside text.  You can also experiment with the techniques outlined in the 'Filling Text' tutorial.  First, find the image you want to use and open it in Acorn, File ▸ Open.
￼

Click on the text tool in the tools palette and choose your font.  Wide or thick fonts work best for this effect.  Ideally you should get the font as big as possible while remaining inside the bounds of your image.  Choose white as the font color.

￼

Once you are happy with your text, rasterize the text layer using Layer ▸ Rasterize Shape Layer.  Once your text is rasterized, try using Layer ▸ Rotate and Transform ▸ Free Transform to stretch the appearance of the type out.   When you are happy with free transform you can double click to commit it.  Using the move tool, place your text over where you want the image below to show through.  
 
￼

While still on your layer with the text, change the blending mode to ‘Mask’.  

￼

Use the crop tool if you want to trim your image down to just the text.



￼


c0url: plugin_documentation.html
c1subject: Plugin Documentation
c2body:
Acorn Plugin Documentation

The different types of plugins

Acorn provides a simple Cocoa plugin API for you to alter the current bitmap layer, or perform actions with the current image.

You can write your plugins in either Objective-C or JSTalk (which is a variant of JavaScript).  Objective-C plugins are compiled and loaded up from bundles placed in the ~/Library/Application Support/Acorn/Plug-Ins/ folder. JSTalk plugins are text files that end with .jstalk. You can also view samples of the various types of plugins from the Acorn plugin GitHub repository: https://github.com/ccgus/AcornSDK

How plugins are loaded

At startup Acorn looks in the ~/Library/Application Support/Acorn/Plug-Ins/ folder for two types of files.

Objective-C bundles, ending with .acplugin. For example "Grayscale.acplugin".
JSTalk files, ending with .jstalk.

The ObjC plugins must implement the ACPlugin protocol, and register themselves with Acorn to show up in a menu. (The ACPlugin protocol is defined in the file ACPlugin.h in the examples download). When the plugin is loaded up, you are given an opportunity to say "Hey, I want to go in the XYZ filter menu, and I want you to call this selector when I'm to be used". When your method is called, you are given a CIImage, you perform whatever you want to do to the image, and then you return a CIImage to be replace what you were given.

So for example, if I wanted to write a quick ObjC plugin to convert the layer to grayscale, my plugin would look something something like this:

@implementation ACGrayscalePlugin

+ (id) plugin {
	return [[[self alloc] init] autorelease];
}

- (void) willRegister:(id)pluginManager {
	
	[pluginManager addFilterMenuTitle:@"Grayscale"
	               withSuperMenuTitle:@"Color"
	                           target:self
	                           action:@selector(convertToGrayscale:userObject:)
	                    keyEquivalent:@""
	        keyEquivalentModifierMask:0
	                       userObject:nil];
	
}

- (CIImage*) convertToGrayscale:(CIImage*)image userObject:(id)uo {
	CIFilter *filter = [CIFilter filterWithName: @"CIColorMonochrome" keysAndValues: @"inputImage", image, nil];
	
	CIColor *color = [CIColor colorWithRed:0.5f green:0.5f blue:0.5f];
	
	[filter setDefaults];
	[filter setValue:color forKey:@"inputColor"];
	[filter setValue:[NSNumber numberWithFloat:1] forKey:@"inputIntensity"];
	
	return [filter valueForKey: @"outputImage"];
}

@end

If you don't want to return an image because you have got something else you want to do, just return nil.

You can also get a reference to the calling image by asking the document controller what the current document is:
[[NSDocumentController sharedDocumentController] currentDocument]

This returns a subclass of NSDocument (ACDocument), and you can use the various methods that NSDocument provides to find out information about the image. In addition, you can get different representations of the image as NSData like so:

NSDocument *theDoc = [[NSDocumentController sharedDocumentController] currentDocument];
NSData *tiffData = [theDoc dataRepresentationOfType:@"public.tiff"];

Other UTIs you can use: public.png, public.jpeg, public.tiff, com.compuserve.gif, com.microsoft.bmp, com.apple.icns, and com.adobe.pdf


JSTalk and JavaScript Plugins
JSTalk plugins work a lot like the Objective-C plugins, only they are a lot easier to write since you just put a text file ending with .jstalk in the Plug-Ins folder.  You can see sample JSTalk plugins on the GitHub repository: https://github.com/ccgus/AcornSDK/tree/master/jstalk

Another big advantage of writing a plugin in JSTalk, is that you do not need to stop and restart Acorn to modify an already loaded plugin. Just edit the file, and rerun it from Acorn.

ACScriptSuperMenuTitle, The supermenu that the plugin should show up in.
ACScriptMenuTitle, The title of the plugin
ACShortcutKey, the shortcut key (a string)
ACShortcutMask, the name of the modifier(s) needed to invoke the plugin (control, option, command shift)

Acorn Additions
Here are some various additions to Objective-C (and also useable from the JSTalk side) that Acorn provides:

Additions to NSImage:
- (CIImage *)CIImage;

Additions to CIImage:
- (NSImage *)NSImage;
- (NSImage *)NSImageFromRect:(CGRect)r;


Additions to NSDocumentController:
- (id)newDocumentWithImageData:(NSData*)data; /* takes bitmap data, (PNG, TIFF) */



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: pop_art_effect.html
c1subject: Pop Art Effect
c2body:
Pop Art Effect


￼


This tutorial will outline how to create the look of pop art with your image.  Open your image in Acorn, File ▸ Open.  The image used here can be found in the credits below.  Now remove the background of your image.  For help on this topic, read the tutorial ‘how to remove a background’.   

￼

Add a new layer (⇧⌘N).  Using the flood fill tool, fill the new layer with white and move it directly below your layer with its background removed in the layers list.

.￼

Click on the layer with the couple in it.  Go to Filter ▸ Color Adjustment ▸ Color Controls.  Drop the saturation down to '0' and increase the contrast a lot.  Click on the '+' on the bottom left hand corner of the filter window and choose Color Effect ▸ Color Posterize.  Adjust the sliding scale until you have just a tiny hint of gray in addition to the black and white.    Click on the '+' again and choose choose Blur ▸ Gaussian Blur.  Keep the blur very low, between .5 and 1.0.    

￼

Create a group layer, Layer ▸ New Group Layer.  Drag and drop your white background and couple layers into the group.  Make sure the couple layer is still above the white background within the group.  Duplicate the group layer 3 times.  Name each group as you wish -- here they will be called 'Corner 1', 'Corner 2', etc.  

￼

Select Image ▸ Resize Canvas.  It will be helpful to write down your current image dimensions for the next few steps.  Resize the canvas so that it is double the width and height of your current image + 30 pixels in each direction (the extra pixels is the spacing between the images, you may need to modify this number depending on the dimensions of your specific image or skip altogether if you don't want spacing).   

￼

Now choose View ▸ Show Rulers.  Go to View ▸ Guides and Grids and check ‘Snap to Guides’.  Make sure you have the move tool selected in the tools palette.  Click on a ruler and drag out to create a guide.  Place two horizontal and two vertical guides to line up your groups where you want them.  For more information read Rulers and Guides.   Hide the guides and rulers when you are done.

Create a new layer (⇧⌘N).  Using the flood fill tool, fill it with white.  Place it below all of your 'Corner' groups.  

￼

Now for the fun part, adding color!  Click on one of the ‘couple’ layers within a group in your layers list.  Choose Filter ▸ Color Adjustment ▸ Replace Color.  Click on the 'Color to Remove' color well and choose white.  Click on the 'Color to Replace' color well and pick your color from the colors palette.  Play around with the tolerance slider.  Click on the '+' in the filter window and choose  Color Adjustment ▸ Replace Color again.  'Remove' black and 'Replace' it with the color of your choice.  

￼

Click on the white background layer in that corner group and use the flood fill tool to fill it with the color of your liking.

￼

Repeat the last two steps for each corner group.


￼






Photo Credit
Couple 


c0url: preferences.html
c1subject: Preferences
c2body:
Preferences 


The Preference Panel for Acorn is located under Acorn ▸ Preferences . There are five tabs labeled General, Guides, Advanced, Fussy Stuff, and Registration.

General

The General tab includes preferences for Acorn such as turning on and off the startup window menu, setting your canvas origin to top left, and displaying undo/redo notifications.  There is also the option to change the hot key for taking a screenshot in Acorn, the option to turn screenshot layers on and off, and the choice of ruler units (pixels, centimeters, or inches).  You can also enable autosave and versions.

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Guides

This is the tab where you can set your default settings to snap to guides, canvas bounds, grid, layer bounds, and shapes.  You can also set the default grid spacing.

￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Advanced

The Advanced tab gives you options to change the background color of full screen mode, as well as options for trackpads including zoom, pan, and rotation gestures.  You can choose to keep shapes selected for editing and select a preferred file actions image format.   You have the option to automatically check for updates when you open Acorn.  Other options include choosing to have a super scrollable canvas, hiding cursor tooltips, printing using the image size for paper size, and showing the pixel grid when zoomed at or above 500%.

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Fussy Stuff

Here you will find options to select the default color space for new images, and the default working color space.  You can alter the precision brush slowdown speed and chose to always make new layers for text boxes.  Other options include changing the tool icons to monochrome, and altering the crop HUD opacity.

￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Registration

This is where you enter your name and registration number for Acorn.  Once your registration number is entered, it will be saved here for future reference.  There is a link to the Flying Meat store where you can purchase Acorn, and a link to request lost registration numbers.  The registration tab is not present in the Mac App Store version of Acorn.  

￼



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: quick_mask.html
c1subject: Quick Mask
c2body:
Quick Mask



Quick mask mode can be found under the Select ▸ Quick Mask menu item.  Quick mask mode is an additional way of making selections in Acorn, and can be combined with other selection tools such as the magic wand to refine a selection.  You can use the paint tool, eraser, and even filters when quick mask mode is enabled.

When you enter quick mask mode, it helps to think of your selection as a virtual layer which happens to be either red tinted or clear.  Painting with the color white in quick mask mode removes the tinted color overlay.  Painting with black restores the color overlay.  Anywhere you paint with white is where your selection will be, and when you exit quick mask mode the clear overlay (which you painted with white) will change into a standard selection.  Toggle with keyboard shortcut 'q' to view your selections within and outside of quick mask.    

When you enter Quickmask mode, Acorn will set the front color in the tools palette to white and the back color to black, making it easier to draw in or erase your selection.  When you exit Quickmask mode, your previous colors are restored.


￼

Quick Mask Example

In this example, quick mask mode will be used to select the head of a red toy fox.  Open the image in Acorn, File ▸ Open.  Use keyboard shortcut ‘q’ to apply the quick mask.  

Select the paint tool and set the color to white in the front color well.  Make sure the opacity of the brush is 100% and set the brush size smaller than the area you want to select.  Use a heavy solid brush such as "brushy" or "painting 2" and brush over the area of the image you want to select.  The quick mask color overlay will appear to be removed from the areas you brush with the color white.  It's okay if you make mistakes, you can always Edit ▸ Undo (⌘Z), or switch your brush color to black and paint over the mistake to remove it.  

￼
Click keyboard shortcut "q" to see your selection border with quick mask toggled off.

￼

Go back into quick mask mode to tidy up your selection as needed.  You will probably need to zoom in and use smaller brush sizes to get the edges of your selection tight.  You can also do some of your work with quick mask, then turn quick mask off and go into other selection tools such as magic wand to get things perfect.  Or vice versa, start your work with the magic wand tool then switch to quick mask.  

Here the red fox head was removed from its original image and made into a new image by using File ▸ New from Selection.   (Important: quick mask mode must be toggled off in order for 'New from Selection' to be enabled).

￼
Have fun making selections!



Photo Credits
Red Fox © TinyApartmentfCrafts 


c0url: rainbow_color_effect.html
c1subject: Rainbow Color Effect
c2body:
Rainbow Color Effect


This tutorial will show you a way to add a creative color effect to black and white photos.  This works best with an image of a light object against a darker background.  Open your image in Acorn, File ▸ Open. 
￼

If your image is not already black and white, go to Filter ▸ Color Adjustment ▸ Color Controls.  Bring the Saturation slider all the way to the left so that the image becomes black and white.

Now, create a new layer on top of your image, Layer ▸ New Layer (⇧⌘N). Select the paint tool and paint some colors over the image. 
￼

Set the blending mode of this layer to Color.  You can choose to leave the boundary between the colors as a hard line...
￼

...Or apply a Gaussian Blur to the Color layer by selecting Filter ▸ Blur ▸ Gaussian Blur to smooth out the color. 

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: raw_image_support.html
c1subject: RAW Image Support
c2body:
RAW Image Support


Acorn has the ability to open RAW files that are supported by Mac OS X.  A list of supported RAW formats can be found here: http://support.apple.com/kb/HT201071?viewlocale=en_US&locale=en_US.

When you open a RAW image in Acorn, the RAW Import Window will appear.  There are sliders for adjusting exposure, bias, boost, shadow boost, noise reduction, temperature, and tint.  You can set the color profile, image depth, and the width and height.  You also have check boxes to turn on and off sharpening and progressive chromatic noise tracking.  At the bottom of the window is a live histogram of your image which updates as you adjust the sliders.  If you decide you want to revert to the original image, you can click the reset button in the lower left hand corner of the window.  

￼


Exposure
Adjusting the exposure changes the lightness or darkness of your entire image.

Bias
Increases and decreases in the amount of black in an image.

Boost
Changes the brightness of the lighter areas of the photo.

Shadow Boost
Changes the darkness of the darker areas of the photo.

Noise Reduction
Decreases the appearance of random speckled dots in areas where color should be even.

Temperature
Changes the photo colors from warm to cool.

Tint 
Slides from green at the left to blue at the right.

Color Profile
Various color profile options are available.

Depth
Choose from 8 or 16 bits per channel.

Sharpening
Gives a subtle enhancement to the edges in your image.


Pressing OK will open your image in Acorn for further editing.  When you save your opened RAW file for the first time in Acorn, a new file will be created.  Acorn does not support saving RAW files.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: red_eye_removal.html
c1subject: Red Eye Removal
c2body:
Red Eye Removal


This tutorial will outline a simple technique for removing red eye.  To start, open your image in Acorn, File ▸ Open.
￼
Create a new layer, Layer ▸ New Layer (⇧⌘N). Select black as your front color in the color well. Then, select the paint tool and adjust the size to fit over the subject's pupils. You can do this easily by placing the brush over the subject's pupils and pressing the left bracket ( [ ) to make the brush smaller or the right bracket ( ] ) to make it larger. Draw a dot over each pupil on the new layer.  You will likely want to zoom in on the pupils to accurately perform this step.
￼
Now, set the blending mode of the new layer to 'Saturation'.  The 'Color' blend mode also work for this example (see blending modes for the complete list of blend modes).

￼
Add a new layer, Layer ▸ New Layer (⇧⌘N).  Use the paint tool to again draw a small black dot over the pupils.  Decrease the opacity of this layer to around 50%.

￼
Go to Filter ▸ Blur ▸ Gaussian Blur.  Adjust the blur radius of the black pupils to around 2-4.

￼


c0url: remove_color_cast.html
c1subject: Remove Color Cast
c2body:
Remove Color Cast


Acorn offers a ‘Remove Color Cast’ filter which is great for removing pesky tints on your images.  This tutorial will guide you through the basics of using this filter.  An alternative technique for removing color casts is to use curves.  You can read more about curves here.  

Open your image in Acorn, File ▸ Open.  The image in this example has a very yellow tint to it that we want to fix.

￼

Go to Filter ▸ Color Adjustment ▸ Remove Color Cast.  Click on the color well in the filter window where it says ‘Color to Fix’.  The colors palette will appear.  Click on the eyedropper next to the color swatches.  Now use the eyedropper to click on the color in your image that you want to adjust.  

￼￼

Play around with adjusting the exposure slider.  Super easy!  


￼


c0url: resizing_and_rotating_a_layer.html
c1subject: Resizing and Rotating a Layer
c2body:
Resizing and Rotating a Layer



Resizing a Layer

If you wish to resize a layer but want to keep the proportions within the layer the same then use Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T).  Once you bring up this option, the inspector palette will display a scale percentage.  You can change the percentage by manually typing in what you want, or you can hover over any corner of the layer and outward facing arrows will appear.  Click and drag the cursor towards the inside of the layer to make it smaller, and to the outside to make it larger. 

Under Layer ▸ Rotate and Transform you will also find Free Transform and Perspective Transform.  Read transforming layers for more information on these options.  

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Rotating a Layer
￼
You can easily rotate a single layer in your image in 90º increments by selecting Layer ▸ Rotate and Transform ▸ Rotate Layer 90o Clockwise (or Counter-Clockwise).  If you want more control over the angle of rotation use Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T).

Unlike the other rotate commands, Scale Transform and Rotate allows you to set the layer at any angle in the canvas.  Place your cursor outside the layer on the canvas and a rotating arrow icon will appear.  Click and drag your cursor until you achieve your desired rotation.   

You can manually type in the rotation values you want as well.  Click on the angle field to enter your exact number or use the angle wheel.  

Once you are finished rotating, double-click on the layer to release it or click 'Transform' in the palette.
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Flipping a Layer & Offset and Wrap Layer

Layers can be flipped horizontally or vertically by selecting Layer ▸ Rotate and Transform ▸ Flip Layer Horizontal or Flip Layer Vertical.  This will flip the individual layer on either the 'x' or the 'y' axis.  

The offset and wrap layer menu item is useful for making seamless tiles.  To learn more about this, read 'Creating a Seamless Tile'.  
 
                     						     
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: resizing_and_rotating_your_image_and_canvas.html
c1subject: Resizing and Rotating Your Image and Canvas
c2body:
Resizing and Rotating Your Image and Canvas



Resizing Your Image

The easiest way to scale your image in Acorn is to select Image ▸ Resize Image.  Type in the dimensions of what you want the image to be, and click the OK button.

When resizing the image, you can choose to see your image dimensions in pixels, inches, or centimeters.  Changing the image dimension measurement value will not change the base unit of measurement for your image.  To learn more about changing the base measurement unit read image measurements.


Image Scaling

Acorn gives you the option to use three different scaling operations.  Most of the time you are going to want to use the "Lanczos" scaling since it is a higher quality scaling 
￼
algorithm.  However, if you would like something a little more low tech, you can choose "Simple Affine".  The "Nearest Neighbor" scaling option replaces each pixel with 4 pixels of the same color.  This results in a very pixelated looking image which is useful for some purposes.  

When scaling with Lanczos, the original aspect ratio must be kept intact (the option will be grayed out in the window).  If you wish to change the aspect ratio, you must choose either Simple Affine or Nearest Neighbor as the scaling option.

Be sure to read all about DPI, PPI, and printing for more information about PPI and  resampling your image.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Quick Scaling by Changing the Window Size

Here is a neat shortcut.  If you would rather scale your image without precise measurements, just hold down the option and command keys, and then resize your canvas window using the resize widget in the bottom right.  Acorn will then scale your image up or down, depending on which way you resize your window.

Holding down the control key while resizing the window changes the size of the canvas, without scaling the image.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Resizing Your Canvas, Without Scaling the Image

If you would like to change the size of your image without scaling the image, use Image ▸ Resize Canvas.

The Anchor option will keep your image anchored to a specific side or corner in cases where you make the canvas larger.

If you have guides present in your image, you can choose to have the guides move relative to the resizing by checking the ‘move guides’ box.  


Fitting the Canvas to Layers

If you want the canvas to be large enough to encompass the largest layer in your project, select Image ▸ Expand Canvas to Fit Layers.   All layers will then be fully present within the canvas boundaries.

￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Rotate your canvas.

Under  Image ▸ Rotate Canvas  there are three options for rotating the canvas: 90º Clockwise (⌘+]), 90º Counter-Clockwise (⌘+[ ) , and Free Rotate.

The Rotate Canvas palette appears when you select Free Rotate.  You can manually enter the angle, use the wheel, or change your angle using the up and down arrows on your keyboard.  

Rotating the canvas rotates all the layers.
￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Photo Credits
Fireworks  © jonrawlinson 


c0url: resizing_the_canvas.html
c1subject: Resizing the Canvas
c2body:
Resizing The Canvas


Here is an image on a canvas size of 1920 x 1272 pixels.  Notice the canvas size is shown in the bottom left-hand corner of the window.
￼
To resize the canvas, go to Image ▸ Resize Canvas on your top menu or hold down ⌥⌘C.  The Canvas Resize display will appear in your window. The top portion shows the current size of your canvas.

￼
Under 'New Size' insert the new dimensions.  For example, enter 1000 x 800.  This will trim 460px off of each side of the canvas and 236 px off both the top and bottom. For this example keep the image anchored to the center.  Select OK.  The gray area that appears in your window is the area of your image that lies outside of the visible canvas area.  
￼
Use the move tool (V) from the tools palette to drag the image and place it wherever you like within the canvas. See how the image below has been moved to the left.  This is how Canvas Resize differs significantly from cropping.  With canvas resizing you can easily adjust the placement of the image within the canvas multiple times without using undo.

￼

When resizing the canvas, you can choose to see your canvas dimensions in pixels, inches, or centimeters.  Changing the canvas dimensions will not change the base unit of measurement for your image.  To learn more about changing the base measurement unit read image measurements.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: restoring_and_coloring_old_photos.html
c1subject: Restoring and Coloring Old Photos
c2body:
Restoring and Coloring Old Photos


Here is the original old timey photograph.
￼
Start by adjusting the levels, Filter ▸ Color Adjustment ▸ Levels and clicking the auto levels button ￼ (keyboard shortcut ⇧⌘L).  Then, go to Filter ▸ Color Adjustment ▸ Color Controls and adjust the Saturation (down to 0 for a complete black and white), the Contrast, and the Brightness to your liking.
￼

Then, go to Filter ▸ Blur ▸ Noise Reduction to eliminate most of the grain and fine lines in the photograph.Now, using the Clone Tool, remove all the dust spots and other flaws in your image.
￼
Using the Burn Tool set to Midtones and an exposure setting of 8%, go over his face, as it is very light.  For darker areas you will want to use the Dodge tool.  Read here for more information about the touch-up tools.
￼
Now that the photo is restored, it is ready to color.  Create a new layer over your restored image.  Set the blending mode of this layer to "Color".  Pick your colors in the colors palette  and using the paint tool, paint over the photo.  You can adjust the amount of color that is applied by changing the opacity of the brush.  Remember to choose colors to match the colors that would be found naturally in the photo.  The higher the saturation of the color, the brighter the color will appear on the photo.

This is what the Color layer looks like with the photo layer turned off.  Not too pretty and kind of scary!

￼
Go to Filter ▸ Blur ▸ Gaussian Blur and play around with the radius of the blur to make the color look natural. 


￼


c0url: retouching_a_portrait.html
c1subject: Retouching a Portrait
c2body:
Retouching a Portrait


This tutorial will go over how to whiten teeth, apply lipstick, and give a subject eyeliner.  The basic principles for each technique is the same, but they will be outlined separately to highlight the before and after appearances. 


Whitening Teeth

Open the image in Acorn, File ▸ Open.  Choose File ▸ Save As and rename your image so that you retain your original.   Start by adjusting the levels of the image, Filter ▸ Color Adjustment ▸ Levels and clicking the auto levels button ￼ (keyboard shortcut ⇧⌘L).
￼
Then, add a new layer to your image, Layer ▸ New Layer.  Select the paint tool from the tools palette and set the top color well to white.  Brush over her teeth with white.  If you brush too far onto her gums or lips just use the eraser tool to remove it.   It helps to zoom in on her teeth to be more accurate, View ▸ Zoom In.

￼

In the inspector palette, change the blend mode from the drop down menu.  You can scroll through the different blend modes with the arrow keys on your keyboard.  A blend mode of 'Soft Light' is seen here.  Then go to Filter ▸ Blur ▸ Gaussian Blur.  Adjust the blur so there are no hard white lines visible on the teeth.  A radius of 1 is seen below.
￼

If the effect is too strong, you can adjust the opacity of the layer in the inspector palette.  The opacity here has been left at 100%.


￼          ￼

Before                                                                             After



Applying Lipstick  

Many of the same steps can be followed for applying lipstick as for whitening teeth.  Open the image in Acorn, File ▸ Open.  Choose File ▸ Save As and rename your image so that you retain your original.   Start by adjusting the levels of the image, Filter ▸ Color Adjustment ▸ Levels and clicking the auto levels button ￼ (keyboard shortcut ⇧⌘L).

￼
Then, add a new layer to your image, Layer ▸ New Layer.  Select the paint tool from the tools palette and set the top color well to your desired lipstick color.  Brush over her lips with this color.  If you brush too far onto her teeth or skin just use the eraser tool to remove it.   It helps to zoom in on her lips to be more accurate, View ▸ Zoom In.

￼

Go to Filter ▸ Blur ▸ Gaussian Blur.  Adjust the blur so there are no hard lines on the lipstick brush strokes.  A radius of 8 is seen below.

￼
Then in the inspector palette, change the blend mode from the drop down menu.  You can scroll through the different blend modes with the arrow keys on your keyboard.  A blend mode of 'Linear Burn' is seen here, but 'Soft Light' and 'Hue" also create a nice effect.

￼

If the effect is too strong, you can adjust the opacity of the layer in the inspector palette.  The opacity here has been decreased to 50%.

￼       ￼

Before                                                                              After


Applying Eye Liner

Open the image in Acorn, File ▸ Open.  Choose File ▸ Save As and rename your image so that you retain your original.   Start by adjusting the levels of the image, Filter ▸ Color Adjustment ▸ Levels and clicking the auto levels button ￼ (keyboard shortcut ⇧⌘L).

￼
Then, add a new layer to your image, Layer ▸ New Layer.  Select the paint tool from the tools palette and set the top color well to the eye liner color you desire.  Brush under and over her eye lashes.  If you brush too far onto her eyes or eye lids just use the eraser tool to remove it.   It helps to zoom in on her eye to be more accurate, View ▸ Zoom In.

￼
Go to Filter ▸ Blur ▸ Gaussian Blur.  Adjust the blur so there are no hard lines on the brush strokes.  A radius of 16 is seen below.

￼
If desired, change the blend mode from the drop down menu.  You can scroll through the different blend modes with the arrow keys on your keyboard.  A blend mode of 'Normal' is seen here.

If the effect is too strong, you can adjust the opacity of the layer in the inspector palette.  The opacity here has been set to 75%.

￼       ￼   

Before                                                                                             After 





   


c0url: retro_star.html
c1subject: Retro Star
c2body:
Create a Retro Shooting Star


￼


This intermediate tutorial will teach you how to create a retro style shooting star using vector shapes, gradients, and filters.  To start, create a new image in Acorn, File ▸ New.  The dimensions of 1200 x 900 pixels with a white background is used here.  Select the star shape tool from the tools palette and draw out a star with a fill but no stroke.  Set the color you want your star to be in the back color well.

￼
Duplicate your star, Shape ▸ Duplicate Shape.  Choose Layer ▸ New Layer with Cut Selection.  Change the color of the duplicated star.  Hold down the shift key while slightly decreasing the size of the star to keep its aspect ratio intact.  Roughly place the smaller star in the center of the larger star using the move tool.  

￼

Click on the gradient tool in the tools palette.  Select a two color linear gradient and click on the color tabs of the gradient to select your colors.  Drag your gradient across the star.

￼

With your small star layer still selected, go to Filter ▸ Stylize ▸ Inner Shadow.  The settings used here can be seen below.

￼
￼

Now choose Layer ▸ New Shape Layer.  Select the rectangular shape tool in the tools palette and draw out a rectangle with a fill but no stroke.  The color of the rectangle doesn't currently matter since it will be changed shortly.

￼

Go to Shape ▸ Convert to Bezier Shape.  Click on the Bezier shape tool in the tools palette and line up the points of the rectangle with one of the left hand sides of the star.  You may need to zoom in to make sure things are lined up right.  Move the lower points of the rectangle towards the lower left hand corner of the canvas. 

￼

Repeat the last two steps to create 3 more "shooting" effects lining each up with a left hand side of the star.  All 4 of the bezier shapes have been selected below to assist with showing their position relative to one another.

￼
Now select one of your bezier shapes with the move tool.  Click on the gradient tool and create a two color linear gradient.  Drag out your gradient on the shape.

￼
Repeat the last step to apply gradients on the 3 other bezier shapes.  The darker portion of the gradient should be closer to the star.

￼

Using the move tool, select the bezier shape that comes off from the top point of the star.  Choose Shape ▸ Arrange ▸ Send to Back. Move your shooting star tail shape layer below the star shape layers, but above the white background.  Click on the white background layer.  If desired, fill the layer with another color besides white using the flood fill tool.

￼

Create a new shape layer, Layer ▸ New Shape Layer.  Move this layer to the top of the layers list if it isn't there already.  Click on the rectangle shape tool and draw out a rectangle with a stroke but no fill.  Set the color of your stroke in the front color well.  Go to VIew ▸ Guides and Grids and make sure Snap To Canvas is checked.  Use the move tool to drag the boundaries of the shape out until they snap to the document bounds.  Adjust the stroke value if needed.
￼

Choose Filter ▸ Stylize ▸ Inner Shadow.  The settings used here can be seen below.

￼



￼


c0url: rock_text.html
c1subject: Rock Text
c2body:
Rock Text

￼

This tutorial will teach you how you can make your text appear to be chiseled from stone.  To start, open an image of a rock texture in Acorn, File ▸ Open.  The texture used for this example can be found in the photo credits below.

￼
Add a new layer, Layer ▸ New Layer.  Choose the gradient tool from the tools palette and create a gray to black radial gradient on your new layer.

￼
Now select the text tool and type out your text.  This effect works best with bold thick text.

￼
Go to Select ▸ Make Selection from Layer.  Hide your text layer by clicking on the visibility eye in the layers list.  Click on your gradient layer in the layers list to select it.  Hit the delete key then deselect (⌘D).
￼
While still selected on the gradient layer, go to Filter ▸ Stylize ▸ Drop Shadow.  Click on the '+' button at the bottom of the window and add Stylize ▸ Crystallize.  

￼

If any areas of rock appear too pointed you can use the eraser tool to allow more of the rock texture to show through around the pointed area.


￼




Photo Credits
Rock Texture


c0url: rulers,_grids,_and_guides.html
c1subject: Rulers, Grids, and Guides
c2body:
Rulers, Grids, and Guides



Rulers

Sometimes things need to be lined up perfectly and relying on human eyes isn't necessary with Acorn.  Rulers can be found under View ▸ Show Rulers (⌘ R).  Rulers will be displayed around the canvas on the top and left hand sides.  The measurements the rulers can display are pixels, inches, and centimeters.  To change the measurement unit, right click on one of the rulers.  The bottom left hand corner of the canvas is the (0,0) point on the x,y axis.  If you want to change the (0,0) point to the top left of the canvas, go to Acorn ▸ Preferences ▸ General. 


Grids

To place a grid on your image, choose View ▸ Guides and Grids ▸ Show Grid.  To modify the grid spacing, choose View ▸ Guides and Grids ▸ Grid Settings.   You can then modify the spacing, color, and appearance of the grid.  Grids can be great for lining things up in your image.  To have a layer, selection, or shape snap to the grid, make sure ‘Snap to Grid’ is checked under View ▸ Guides and Grids.


Guide Basics

Guides can be created by clicking on either the horizontal or vertical ruler and dragging it out onto the canvas.  To move a guide, click and drag on the guide with the move tool.  Notice that as the guide is moved around on the canvas, the measurement number changes based on where the guide is located.  If you are placing a horizontal guide then the number reflects where you are on the vertical or "y" axis and if you are placing a vertical guide it is where you are on the horizontal or "x" axis.  

￼
You can duplicate guides without going all the way back to the ruler by hovering over a guide you want to duplicate, then holding down the option key while clicking and dragging.  

Guides can be hidden, cleared, locked, and created under View ▸ Guides and Grids.  They can also be deleted by dragging them off the canvas.  Guides can additionally be created under the canvas contextual menu (right click on the image to bring this menu up).  Guides will not print on your image and are not visibly present when you "print preview".  

If you have guides present and you want to resize your canvas, there is a check-box option in the resize canvas window to have the guides move to stay in position relative to the resizing, or to remain at their current location.


Aligning with Guides

If you have created guides and want to align layers perfectly to them, click on the move tool.   Make sure "Snap to Guides” is checked under the View ▸ Guides and Grids menu item.  This will take the guess work out of getting your layers to align perfectly on the guides.  The guides that can be "snapped to" will turn yellow to let you know which guides are being used.  You can align your layer by its outer boundaries, by its horizontal or vertical center, or by a combination of those options.  In the image below, a rectangle shape is aligned at its upper left hand corner with 2 guides.  

￼
To temporarily disable document bounds and guide snapping, you can hold down the control key while moving your layer or shape.  

Pro-Tip:  Did you know you can use basic math equations in Acorn's numerical fields?  This can be super helpful when placing guides.  Choose View ▸ Guides ▸ New Guide.   To place a vertical guide at the center of your image, select the 'Vertical' option and in the 'Location' field enter the width of your image multiplied by 0.5 (or divided by 2).

￼


Aligning without Guides

Under the View ▸ Guides and Grids menu item, there is an option to "Snap to Canvas”.  If this is checked, when you drag your layer, selection, or shape around in the canvas the edges will "snap" to the boundaries of the canvas.  In addition, the horizontal and vertical center of the layer, selection or shape will also snap to the horizontal and vertical centers of the canvas.  You also have other options of aligning including snap to layers, shapes, and grid to get everything in your image placed exactly where you want it.


Snapping Preferences.

To set up your snapping preferences, go to the Acorn ▸ Preferences ▸ Guides menu item.  From here you can choose your defaults for snapping as well as preferred grid spacing.  If you wish to change snapping behavior for a single image, then navigate to the View ▸ Guides and Grids menu item.  Acorn offers snapping of layers, selections, and shapes to guides, canvas, layers, shapes, and grid.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: scrapbooking.html
c1subject: Scrapbooking
c2body:
Scrapbooking



This tutorial will guide you on how to make a photo collage that has the appearance of a scrapbook page.  To begin, the images to be included in the scrapbook need to be made to look like physical photos by adding a white border and a drop shadow.  

Start by opening your image in Acorn, File ▸ Open. 
￼
Go to Layer ▸ Rotate and Transform ▸ Scale and Rotate Layer or ⌘⇧T.  Scale the image down so you have enough room to add the border and drop shadow.  Double-click to commit your transformation.

￼

Go to Select ▸ Make Selection from Layer.  Then choose Layer ▸ New Layer with Selection.  Now select Edit ▸ Fill.  Choose 'Use: Custom’.  Click on the color box and the colors palette will appear.  Choose the color you want the border around your photo to be.  Click 'OK' when you are done.   Deselect (⌘D).

￼
Deselect by using keyboard shortcut ⌘D.  Move the layer you just created down below the photo in the layers list.  Choose Layer ▸ Rotate and Transform ▸ Scale and Rotate (⇧⌘T).  Increase the scale of the layer until it gives your photo the border thickness you desire.  104% is the scale used in this example.  Double click to commit the transformation.
￼

Click on your top layer to select it and merge it down, Layer ▸ Merge Down (⌘E).  Add a drop shadow to make the photo stand out from the background.  Go to Filter ▸ Stylize ▸ Drop Shadow.  

￼

Crop the image around the drop shadow, Image ▸ Trim to Edges. Save the image. Remember to choose "Save As" and name it something different than the original, otherwise you will lose your original image. Repeat the above steps for the rest of the images you wish to include on your scrapbook page. 

￼

For your scrapbook page background you can choose a texture, a flood fill, gradient, or choose to leave it transparent. This texture is from http://www.cgtextures.com which offers a lot of free textures.  Open your texture in Acorn, File ▸ Open.

￼

Bring in your white bordered images, File ▸ Add Images... or drag and drop the files into the canvas. To reposition a layer in the canvas, select the move tool in the tools palette and click and drag on the image. To resize and rotate choose Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T). 
￼

Cut out images from their backgrounds (read up on how to remove a background), apply drop shadows to them and place them around your image to give more depth. 
￼
Add text to your image.  Rotate and add drop shadows to your text to really make it stand out.  You can read more about how to do this in fonts and text palettes. 


￼


c0url: screen_shots.html
c1subject: Screen Shots
c2body:
Taking Screen Shots
￼
Acorn has the ability to take screen shots, even if Acorn is not the active application.  The shortcut key to take screen shots is ⌘⇧6.  You can change the shortcut key in the general section of the Preferences window.

When you press ⌘⇧6, Acorn will make a new image with the contents of your screen.  From here you can crop and modify your image.

You also have the option to turn every window into its own layer.  To do this, open up the general Preferences window and click the option "Create layers for windows when taking screenshots".

When taking a screenshot when multiple displays are in use, each display gets its own document.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: scripting.html
c1subject: Scripting
c2body:
Scripting Acorn

See also: Example AppleScript and JSTalk Scripts

You can script in Acorn using a couple of different languages- AppleScript, Python, or JSTalk (which is pretty much JavaScript with some extra goodies).  You can edit both Python and JSTalk scripts using TextEdit- but you might have an easier time using something like Apple's Xcode (which is free), BBEdit, SubEthaEdit, or even TextMate.  These text editors offer niceties such as syntax coloring and line numbers, making it easier to write and debug your scripts.

JSTalk also comes with an editor you can use for free, and can be downloaded from http://jstalk.org/.  Since JavaScript is a very popular language, it will be used in the examples below.  However, you can find examples for Python on the Writing PlugIns page.

If you don't know JavaScript, there are lots and lots of tutorials out on the web you should check out.

Scripting Acorn with AppleScript can be done from the AppleScript Editor, located in your Applications folder.


Scripting Acorn from JSTalk Editor

In the examples below, a file named "jimi.jpg" will be located in the Pictures folder.  Here is a script that can be run from JSTalk Editor for opening an image and resizing it to 200 pixels wide:

var acorn = JSTalk.application("Acorn");
var doc = acorn.open_("/Users/gus/Pictures/Jimi.jpg");
doc.scaleImageToWidth(200);

The first line grabs a reference to Acorn, the application.  It tells Acorn to open up a document, located at /Users/gus/Pictures/Jimi.jpg.  The "open" function opens the document, and then on the final line resizes the image to be 200 pixels wide.  Pretty simple!

Here is another example, which is a bit more complicated:

var acorn = JSTalk.application("Acorn");
var filePath = "/Users/gus/Pictures/Jimi.jpg";
var doc = acorn.open_("/Users/gus/Pictures/Jimi.jpg");

var size = doc.canvasSize()
var newWidth = size.width / 2;

doc.scaleImageToWidth(newWidth);

doc.dataRepresentationOfType("public.png").writeToFile(filePath + ".png");

doc.close();


The first couple of lines look familiar, but then adds something a little different.  Instead of resizing the image to 200 pixels wide, it resizes to half the width.  On line 5, notice the size of the image.  Then on line 6, notice a variable named "newWidth" that is half the width of the current size.  The image is then scaled on line 8, a copy of the image is saved as a PNG image, then written to a file.  Finally the document is closed.

Important:  If the document is closed without saving it first, the changes are lost.  To save the document before closing it, add:

doc.saveDocument(null);

So what else can be done with the document?  The official list of things are located in the file "ACPlugin.h", located in the Acorn SDK (https://github.com/ccgus/AcornSDK)- but here are some of them:

doc.layers() - returns an array of the layers.
doc.currentLayer() - return the current layer.
doc.cropToRect(NSRect) - crop a rect to a particular dimension.
doc.scaleImageToHeight(newHeight); - similar to scaleImageToWidth.
doc.canvasSize() - get the current size.
doc.setCanvasSize(NSSize) - set a new size.

Acorn documents inherit from NSDocument, so you can call all the methods located in NSDocument as well.


Writing plugins for Acorn in JSTalk

The next example will also use JSTalk Editor, so don't quit it just yet.  In fact, make a new document in JSTalk Editor and paste this code in:

function main(image) {
    var acorn = NSApplication.sharedApplication();
    var doc = acorn.orderedDocuments()[0];
    var size = doc.canvasSize()
    var newWidth = size.width / 2;
    doc.scaleImageToWidth(newWidth);
}

Save it to file named "Resize to 50%.jstalk", in your ~/Library/Application Support/Acorn/Plug-Ins/ folder.  Then quit and restart Acorn, and open an image up.
Note: if you are using Acorn from the Mac App Store, then you'll need to place your plugins in your ~/Library/Containers/com.flyingmeat.ACorn/Data/Library/Application\ Support/Acorn/Plug-Ins folder.

Once you have done that, choose the menu item Filter ▸ Resize to 50%.  Your image should then resize to 50% of its original size.

So what is going on here?

Well, first off- whenever you save a file in your Acorn Plug-Ins folder, and it has the file extension "jstalk" - it will show up in the Filter menu.  Then, when the plugin is called, Acorn looks specifically for the function named "main" in your image, and then passes it a copy of the current layer's image.  Nothing was done directly with the image.  Instead Acorn was asked for the current document, and then resized it like in the previous script.

Here is another example.  This can go in a new file named "Resize Layer to 50%.jstalk", in the same Plug-Ins folder as before (and yes, you'll need to quit and restart Acorn for the plugin to show up):

function main(image) {
    var newImage = image.imageByApplyingTransform(CGAffineTransformMakeScale(.5, .5));
    return newImage;
}

In this example, something is actually done with our new image (which is a CIImage by the way).  A new image is made by applying a transform to the original image, which scales it by 50%.  Return to that image.  You'll notice that when calling this function your layer has been replaced with a new layer, which is 50% of the original size.  However, your overall image size has not changed because you didn't change the document's size.

Before this plugin:

￼

And after:
￼




Scripting Acorn with JSTalk and Automator

If you download the JSTalk package (available from http://jstalk.org/ ), it comes with an Automator plugin.  When you combine the two, you can then make an action which will take files that you pass to it, and then do various things like resizing them:

function run(input, parameters) {
	var acorn = [JSTalk application:"Acorn"];
    
    var idx = 0;
    
    while (idx < input.length()) {
        var filePath = input[idx];
        var doc = [acorn open: filePath];
        [doc scaleImageToHeight:200];
        [[doc dataRepresentationOfType:"public.png"] writeToFile: filePath + ".png"];
        [doc close];
        idx++;
    }
     
	return input;
}

The possibilities are endless.

If you would like to see a specific example, or you have a task that you would like to see some example code for contact: support@flyingmeat.com and we'll see if we can come up with a solution for you!



Scripting Acorn with AppleScript and Automator

Here is an example Automator action that will take the images passed to it, and web export them to PNG files.

on run {input, parameters}
	
	repeat with anImage in the input
		tell application "Acorn"
			
			set newFile to (POSIX path of anImage) & ".png"
			open anImage as alias
			tell document 1
				web export in newFile as PNG
				close
			end tell
			
		end tell
	end repeat
	
	return input
end run



<%= startRoundWarningDiv(writer) %>Note For App Store Users: If you've purchased and downloaded Acorn from the Mac App Store, certain AppleScripts, Automator Actions, and JSTalk scripts may not work for you because of sandboxing restrictions required by Apple.  The direct version of Acorn does not have these issues (and if you have run the App Store version of Acorn at least once, the direct version will run registered, so it's easy enough to switch if you need to).<%= stopRoundWarningDiv(writer) %>


c0url: selecting_basics.html
c1subject: Selecting Basics
c2body:
Selecting Basics


This is a beginner level tutorial on using selection tools.  Making selections is frequently a part of image editing.  Being comfortable with the different types of selection tools, keyboard shortcuts, modifying your selections, and moving your selections is key to getting the most out of this tool.  


Adding or Subtracting from a Selection

To start, choose the rectangular selection tool (keyboard shortcut 'M').  Clicking 'M' repeatedly will cycle through the different selection tools.  The goal is to draw a rectangular selection around the woman in the image below in order to place the selected area on its own layer.   Go ahead and draw your rectangular selection.  Don't worry about getting it absolutely perfect, there are ways to correct it later.  Select ▸ View Selection Clipped Out is used here to highlight the selection boundary.

￼

Hmmmm, maybe the selection should be a bit longer at the bottom.  You could deselect (⌘D) and completely start your selection over, or you can add to your current selection.  Try adding to the selection.  You can either click on 'addition mode' in the selection tools palette or hold down the shift key before you start your selection. The selection cursor will change to include a plus sign.  Make a selection encompassing the area you want added.  Be sure to end the selection by overlapping inside your current selection.

￼

￼

Nevermind, adding to the selection at the bottom isn't really what you wanted.  Click ⌘Z to undo it.  You want to subtract from your selection at the top instead.  Follow the steps outlined for adding to a selection, except choose 'subtraction mode'.  Alternatively, hold down the option key before you start your selection. The selection cursor will change to include a minus sign.  

￼

Once your selection looks right, make what you selected into its own separate layer by choosing Layer ▸ New Layer with Selection.  To achieve the results shown below, you can follow the 'photo inside a photo' tutorial.  

 
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Moving a Selection

Once you have made a selection, you can move it around with the move tool or the arrow keys.  In addition to this, you can hold down the ⌘ (command) key while clicking and dragging on your selection and Acorn will first cut out the selection and then move it around your image.  Letting go of ⌘ will then place your floating selection.  You can see below that the snail shell has been selected, cut out, and moved to the right.

￼

To copy your selection without cutting it out, choose the move tool then hold down the option key while clicking and dragging on your selection.  You can hold down ⌘ and ⌥ (option) when clicking and dragging and Acorn will continually copy + place your selection each time you release the mouse.   You can see below that the snail selection has been copied 11 times using this technique.
￼
You can also use Edit ▸ Copy and Edit ▸ Paste on your selection and the selection will be placed on a new layer.  The same white snail shell here has been selected, then the keyboard shortcuts ⌘C and ⌘V were used to copy and paste it on a new layer.  The blending mode was changed to Multiply to make the white snail shell appear darker.

￼

Photo Credits
Girl © d3vilh 


c0url: selections.html
c1subject: Selections
c2body:
Selection Tools





Selection Basics

The selection tools allow you to isolate a specific area of your image and then work in that area without altering the other areas of the image.  Acorn gives you a handful of ways to make selections on your image including the rectangle, elliptical, freehand, polygonal, and magic wand selection tools.

The shortcut key for switching to a selection tool is shift - M.  Pressing shift - M multiple times will then cycle through all the selection tools.  To remove a selection, choose the menu item  Select ▸ Clear Selection, or use the shortcut ⌘D.

Acorn will remember your selection when you save your image.  If you have a selection, save your image as a .acorn file.  You can close your file and quit Acorn. When you re-open the image, your selection will still be there.

￼
￼￼￼￼￼

The rectangle selection allows you to make rectangular selections and the elliptical selection tool allows you to make oval selections.  The freehand selection tool allows you to make freehand selections.  This is great if you have a selection that does not fit in a box or a square.  The polygonal selection tool allows you make odd selections, but by making multiple clicks.  You can finish off your selection with a double click.  

The magic wand selection tool will select areas of the same color that you clicked on.  You can adjust the tolerance (how close a color has to be to the one you clicked on) in the selection palette.  For a live adjustment of the magic wand tolerance, you can click on the color in your image and drag the magic wand on the canvas inwards (to decrease the tolerance) or outwards (to increase the tolerance).  


Quick Mask

Quick mask mode can be found under the Select ▸ Quick Mask menu item.  Quick mask mode is an additional way of making selections in Acorn, and can be combined with other selection tools such as the magic wand to refine a selection.  You can use the brush, eraser, and even filters when quick mask mode is enabled.  

When you enter quick mask mode, it helps to think of your selection as a virtual layer which happens to be either red tinted or clear.  Painting with the color white in quick mask mode removes the tinted color overlay.  Painting with black restores the color overlay.  Anywhere you paint with white is where your selection will be, and when you exit quick mask mode the clear overlay (which you painted with white) will change into a standard selection.  Toggle with keyboard shortcut 'q' to view your selections within and outside of quick mask. 

For more detailed information on how quick mask mode works, read this tutorial. 

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Preset Selections, Selection Size, and Making Selections Fit Exact Dimensions

Acorn offers preset selection dimensions under Select ▸ Preset Selections.  If you want your selection a specific size that is not a preset, check out this video tutorial.   You can view the width and height of your selection in the inspector palette, as well as in the lower left hand corner of the status bar of the image's window.  The status bar also displays the x,y coordinates of the selection.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Feathering a Selection

The feather command will soften up the edges of your selection.  You can bring up the feather sheet from the  Select ▸ Feather menu item.  The higher the feather radius, the softer the edges of your selection will become.  

The image to the right was made by creating a circular selection, feathering with a radius of 40, going to Select ▸ Inverse, and then Edit ▸ Fill using white.  
￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

View Selection Clipped Out vs. Marching Ants

There are two different ways to view your selection.  There is the traditional "Marching Ants".  The image to the right is showing "clipped out".  Clipped out shows the area outside of the selection with a darkly tinted transparency.

Is there an advantage to using one or the other?  Not really- but it turns out some folks really like the clipped out look, and others like the marching ants.  You can alternate between these two options via Select ▸ View Selection As or use shortcut ⌘\.
￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Moving Selections

Once you have made a selection, you can move it around with the arrow keys.  In addition to this, you can hold down the ⌘ (command) key and Acorn will first cut out the selection and then move it around your image.  Letting go of ⌘ will then place your floating selection.

You can hold down ⌘ and ⌥ (option) when clicking and dragging (or while using the arrow keys), and Acorn will continually copy and place your selection each time you release your click.  Here is a video of it in action, using a screenshot of Acorn's preferences window: Command Option Move in Acorn. 

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


Addition, Subtraction, and Intersection Modes

￼

There are four selection modes available in Acorn.  They include:  regular, addition, subtraction, and intersection modes.  

Addition - When two or more selections overlap, they will be joined together to create a single selection encompassing all areas of the original selections.

Subtraction - When you draw a selection over an existing selection, it will remove that area of the original selection.

Intersection - Where selections overlap, only the area of overlap will be retained as a selection.  

￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Selection Tips

	•	To draw a perfect circle (or square), hold down the shift key after you have started your selection.  
	•	When creating an oval or a rectangular selection, you can press the spacebar to reposition the origin of the selection. 
	•	To grow a selection from the middle of where you clicked, press the option key after you have started your selection.  
	•	To add to a selection, hold down the shift key before you start your selection. The selection cursor will change to include a plus sign.
	•	To delete from a selection, hold down the option key before you start your selection. The selection cursor will change to include a minus sign.
	•	To bring back your last selection, choose the Select ▸ Reselect menu item.  
	•	If you have a fully vertical or horizontal selection, holding down the option key will turn the Image ▸ Trim to Edges menu item into "Trim out Selection".  Trim out selection deletes the current selection and squishes the two endpoints of your image together (bitmap layers only).
	•	To convert the current selection into a layer mask, choose the Layer ▸ Add Layer Mask menu item when your selection is active.
	•	Keyboard shortcuts for making selections from layers include holding down the command key while clicking on a layer in the layers list to make a selection based off using the layer image as a mask. If you hold command + the shift key, the new mask will be added to an existing selection, command + option will subtract, and command + shift + option will intersect.
	•	If you use the arrow keys with a selection (and a selection tool is active) and hold down the option key, Acorn will copy the selection in the direction you press with the keys, thus extending the selection by a pixel (or 10 if you also hold down the shift key).
	•	Double clicking a thumbnail in the layers list will make a selection out of that layer.


<% if (writer.contextType() == "html") { writer.write('<div class="seeAlso">'); } %>See also:  Selection Basics (video tutorial), Quick Mask, Quick Mask Basics (video tutorial), Selecting Basics<% if (writer.contextType() == "html") { writer.write("</div>"); } %>
 


c0url: sepia_tone.html
c1subject: Sepia Tone
c2body:
Sepia Tone

￼


This tutorial will go over how to give your photos a sepia tone appearance.  The steps are fairly simple.  First, open your image in Acorn, File ▸ Open.  

￼
Next, choose Filter ▸ Color Effect ▸ Sepia Tone.   Don't worry about adjusting the intensity yet.  Click on the "+" button at the bottom of the filter window.  Choose Color Adjustment ▸ Color Controls.  Your filter window should now look like this:

￼

Now you can play around with adjusting the intensity of the sepia tone.  You will likely want to decrease the saturation and possibly modify the contrast of the image.  



￼




Photo Credit
Ship  © Anna Langova 


c0url: setting_the_desktop_picture.html
c1subject: Setting the Desktop Picture
c2body:
Setting the Desktop Picture 

￼


Acorn can be used to set or change your desktop picture.  Play around and modify your images then immediately use them as your background!  Depending on your image dimensions you may want to use the crop tool to first adjust the dimensions of the picture to your screen.  Then right click on your image to bring up the canvas contextual menu. 

￼
 Click on "Use Image as Desktop Picture".   Wait a few seconds, and voilà!  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: shape_brushes.html
c1subject: Shape Brushes
c2body:
Shape Brushes
￼
This tutorial will cover how to create your own shape brush.  Making a brush can be a time saver if you find yourself using a simple image repeatedly in your projects.   Ideally a brush should start out with the image being black and on a transparent background.   For more detailed information on removing a background read How to Remove a Background.  

First, open the image you want to create a brush from in Acorn, File ▸ Open.  This tutorial will use a snowflake image.
￼
Using a selection tool such as the magic wand, select the snowflake.  A wand tolerance of 60 was used here.  
￼
Go to File ▸ New from Selection.  The snowflake will now be on a transparent background.  In order to change the snowflake's color from white to black, go to Filter ▸ Color Effect ▸ Color Invert.  Click 'Flatten'.  Alternatively, you could use Filter ▸ Color Adjustment ▸ Replace Color.  Use the crop tool to remove the excess areas around the snowflake and the erase tool to clean up any little bits of color that aren't part of the snowflake.  Now is a good time to save your new image.

￼

The image is ready to be brought into the brush designer.  To open the brush designer choose Window ▸ Brush Designer.  Click on "use image" and select your saved file.  Your image will show up in the window.  

￼

 Here is a rundown of the various options for modifying your brush:

	•	Size - This is the width and height of your brush.  To make your brush bigger or smaller, modify this setting.
	•	Spacing - Acorn uses a dabbing (also known as stamping) method for its brushes.  In essence, a brush stroke is a whole bunch of stamps of the same image over and over again.  The spacing option decides how close together those stamps appear.
	•	Softness - This option alters the brush stroke to have a softer or harder edge.
	•	Squish - Do you want your brush to have a a slight angle to it, like a felt tip pen might have?  Use this option to decide how much of an angle.
	•	Rotate - This will rotate your brush dab to your desired angle.
	•	Flow - The flow slider adjusts the amount of paint the brush applies with each stroke.
	•	Jitter - This option adds a range of randomness to your brush strokes.

If you click on a color from the color palette while you are in the brush designer, it will apply the color to your brush.  Notice at the bottom of the window it states, "Draw in the canvas to try your brush out, ⌘S to save".   Once you click ⌘S you will be asked to name your brush and which brush folder to place it in.  It makes the most sense to place it under "shapes".    

Now click on the paint tool in your tools palette.  The brush you just saved can be found under "shapes":

￼

Congratulations!  You have now created your own shape brush!  Play around with the size, color, and opacity:


￼

Photo Credit
© Petr Kratochvil 


c0url: shape_editing.html
c1subject: Shape Editing
c2body:
Shape Editing & Viewing

￼

There are various options for modifying your shapes in Acorn.  The 'Shape Tools' documentation outlines a few of the basics of shape editing including how to select shapes, and give your shapes a stroke or fill.  Acorn also offers additional shape editing options in the 'Shape' menu item, and in the shape pop-over window which will be covered below.


Basic Shape Editing

Adding Shapes:  Click on the shape tool of the style of shape you want to add and then click and drag on the canvas to draw the shape.  

Deleting Shapes: To delete a shape, select the shape(s) then hit the delete key.  Pressing delete on a shape layer without anything selected will remove all the shapes in the layer.

Duplicating Shapes:  You can duplicate a selected shape by choosing Edit ▸ Copy and then Edit ▸ Paste.  Another option is to use Shape ▸ Duplicate Shape.  The copy will be placed right above the original shape.

Resizing Shapes: To resize a shape, select the shape then click and drag on its bounding box using the move tool.  Hold down the shift key as you are dragging on the bounding box to keep the aspect ratio of the shape intact.  If you know the exact shape dimensions you want, you can use the shape width/height fields in the inspector palette.  To resize multiple shapes at once, select the shapes. Use the move tool to drag on the outer bounding box encompassing all the shapes.  You will be prompted by a pop-up window to convert your shapes to Bezier shapes.  You can choose to 'Always Convert' to avoid seeing this window in the future or 'Convert' to have the prompt continue to appear.  

Adding Shape Layers:  To add a new shape layer you can right click on the layers list to bring up the contextual menu, or choose Layer ▸ New Shape Layer from the menu.  An additional method is to hold down the option and command keys while clicking the '+' button in the inspector palette.

Filters on Shapes:  You can use filters on shape layers.  The filter will be present on all shapes in that layer.

Copying Shape Styles:  To modify shapes to have the same style attributes (stroke/fill/color/drop shadow/etc) as another shape on the same layer, select the shape(s) you want to change.  Then hold down the option + command keys at the same time and click on the shape whose attributes you want to copy. 

Flipping Shapes:  To flip a shape, choose Shape ▸ Flip Vertically/Horizontally.  If you have multiple shapes selected and choose Flip Horizontal or Vertical, the flip point will be the center of the all the selected shapes.  

Rotating Multiple Shapes:  You can select multiple shapes and rotate them all at once. To rotate shapes around the center point of all the selected shapes, hover over a bounding box corner until the rotation arrows appear.  Click and drag on the canvas to rotate.  Hold down the shift key to constrain the rotation to 45° increments.  To rotate multiple shapes around their individual center axes, use the angle value field in the inspector palette.

Aligning Shapes:  To align multiple shapes on the same layer, select the shapes you wish to align and then choose one of the options under the Shape ▸ Align... menu item.  This option can also be accessed by control-clicking on the selected shapes.

Arranging Shapes:  Shape orders within a layer can be re-arranged by choosing the Shape ▸ Arrange menu item.  This option can also be accessed by control-clicking on a shape.

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


Shape Pop-Over Window

The shape pop-over window can be summoned by selecting a shape and hitting the back tick key (`), or by going to the View ▸ Quick Config Popover menu item. The pop-over will be placed wherever your cursor is currently located on the canvas.  The back tick key is located on the upper lefthand corner of the keyboard. To hide the window, hit the escape key.  

There are various options available in the window including the ability to change the selected shape's blending mode, the number of star points, and checkboxes to add or remove a fill, stroke, and anti-aliasing.

The path operations available in the pop-over include union, intersect, difference, and exclude.  Path operations are discussed in more detail below.

If your shape has a stroke, you can modify the appearance of its line join style.  There are 3 options: pointed, rounded, and bevel.  Pointed is the default stroke appearance.  If you currently have a corner radius on your shape, you cannot modify the shape's line joint style.

At the bottom of the shape pop-over window are the shape align options.  If you have two or more shapes selected, then these options will become available to you.  The choices include left, right, top, and bottom edge align, as well as horizontal and vertical align center, and horizontal and vertical distribute center.
￼
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Boolean Path Operations

Boolean operations in Acorn allow you to combine, subtract, intersect, and exclude two or more selected shapes in order to create different shapes.  These options can be found under the Shape... menu item, as well as in the shape pop-over window.  The style attributes of the top-most selected shape in the layer will be applied to the other shapes involved in the operation.  

	•	￼ Union:  When two or more overlapping shapes are selected, union mode will combine the shapes into one.  
	•	￼ Difference: When two or more overlapping shapes are selected, difference mode will subtract the top-most shapes from the bottom-most shape.  
	•	￼Intersect: When two or more overlapping shapes are selected, intersect mode will retain areas of the shapes that are overlapping. 
	•	￼ Exclude: When two or more overlapping shapes are selected, exclude mode will retain the areas of the shapes that are not overlapping.  

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


Shape Viewing

Under the 'View' menu item you can choose 3 different options for viewing your shapes.  When you select View ▸ Draw Shape Outline, the stroke and fill of the shapes in the current shape layer will be hidden.  Acorn will create a simple outline of your shapes which can be very useful if you have a lot of shapes you need to manage, especially when zoomed in.   View ▸ Draw Shape Vectors presents your shapes as scaled vectors, and View ▸ Draw Shape Pixels is the standard view.   
￼
 Shape Outline View

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: shape_processor_designs.html
c1subject: Shape Processor Designs
c2body:
Shape Processor Designs



This tutorial will outline some simple designs you can create using Acorn’s Shape Processor.  All the examples were created on a 1000 x 1000 pixel canvas.  Unless stated otherwise, the examples were created entirely within the processor.  To learn more about the basics of using the shape processor, read here.  



Star Spiral

The stars have a fill, but no stroke.
￼          ￼

Line Pin Wheel

This next example was created by starting with a single vertical line then adding the listed processes.
￼         ￼


Circles in a Circle

The circles have a stroke, but no fill.


￼          ￼

Stars Within a Star

The shape settings are for a fill and a stroke of 2.


￼         ￼

Psychedelic Flower

There is a fill, but no stroke on the shape settings to create this flower.
￼         ￼



Complex Star

There is a stroke, but no fill on the shape settings to create this fun star.


￼          ￼



Rainbow Tunnel

There is a stroke, but no fill on the shape settings to create this tunnel.
￼          ￼


c0url: shape_processor_flowers.html
c1subject: Shape Processor Flowers
c2body:
Shape Processor Flowers

￼

This tutorial will outline how you can create intricate vector flowers using Acorn’s shape processor.  To start, create a new image, File ▸ New.  The dimensions used here are 1000 x 1000 pixels with a white background.  Go to View ▸ Guides and Grids and make sure ‘Snap to Canvas’ is checked.  

Select the oval shape tool.  Your circle should have a fill but no stroke.  Hold down the shift key and draw out a circle.  With the circle still selected, change the dimensions in the inspector palette to 500 x 500 pixels.  Using the move tool, move the circle so it is lined up along the horizontal center of the canvas. 

￼
Duplicate your circle, Shape ▸ Duplicate Shape.  Using the move tool, move the duplicated circle so that it overlaps about a quarter of the original circle while still lining up on the horizontal center of the canvas.  Select both shapes, Select ▸ Select All.

￼
Now choose Shape ▸ Intersect Paths.  Navigate to Shape ▸ Process ▸ Duplicate Shapes.  Click on the ‘+’ button in the lower lefthand corner of the shape processor window and add ‘Arrange Shapes in a Circle’, ‘Change Angle’, ‘Cycle Colors’, and ‘Scale Shapes’.  The values used here can be seen in the image below.  

￼
Go to View ▸ Quick Config Popover (keyboard shortcut `).  Change the blending mode of the shapes to ‘screen’.  If your flower colors don’t look the same as the example here, navigate to Image ▸ Assign Color Profile and make sure it is set to sRGB.

￼
Apply a drop shadow by going to Filter ▸ Stylize ▸ Drop Shadow.  The settings used here can be seen below.

￼

And you’re done!  To easily create different flower variations, play around with the radius of the circle, the scale percentage, and the duplicate shapes value.  

￼


c0url: shape_processor.html
c1subject: Shape Processor
c2body:
Shape Processor
￼


Acorn’s shape processor is similar to filters, but is meant specifically for modifying shapes.  You can tweak, generate, and adjust shapes non-destructively.  The processor also allows you to stack unlimited processes just like you can with filters. 

One option to get started is to choose the Shape ▸ Process ▸ Generate Shapes menu item.  Acorn will create a new shape layer, and the shape processor window will appear.  From there you can modify your generated shapes and add on more options by clicking the cogwheel located on the lower left-hand corner of the window. 

The shape processor can also be used on shapes you create yourself.  Draw out some shapes using Acorn’s shape tools.  Select all the shapes in the layer you want to process.   Navigate to Shape ▸ Process.  Choose an option, and the shape processor window will appear.  

You will know if your layer has active shape processing by the presence of a ‘p’ towards the right hand side of the layer in the layers list.  



Shape Processor Basics

Adding Processes:   Once you have selected an option, you can add more by clicking on the ‘+’ button in the lower left hand corner of the processor window.  

Removing Processes: To remove any option, click on the 'X' in the upper right hand corner of that options parameters. 

Moving Processes:  To move an option up or down in the processor list, just drag and drop it to the location you desire.

Committing Processes: To make the processor effect permanent on your layer, click the 'Flatten' button at the bottom righthand side of the shape processor window.  You will not be able to further edit the processes you have performed unless you undo subsequent work.  Flattening will allow you to individually edit your shapes.  You can leave your effects open to further modification in the future if you don't click 'Flatten'.  

Duplicating Processes:  Hold down the option key while clicking and dragging on a process.  Place the duplicated process where you want it in the shape processor window.  

Copying Processes: To copy a process, click on the cogwheel in the lower lefthand side of the processor window and choose 'Copy Processes’.  You can then select a different layer in your layers list and paste the process in (⌘V or Edit ▸ Paste). 

Visibility:  Click on the visibility eye next to the process in the shape processor window to toggle its visibility. 

Resetting Values:  You can reset all the values in a process by clicking the circular arrow located between the process visibility and delete buttons.  To reset individual values in a process double click on that values name label.

Editing Individual Shapes:  You can edit processed shapes separately after you click ‘Flatten’.  The shapes will be editable as ’bézier shapes’.  For more information on bézier shapes, read here.
￼

Adjusting Shape Processor Parameters  

￼

Many processes have values you can adjust in the processor window through sliders or number entry.  Some processes contain options that can be manipulated directly on your image such as the 'Center' and 'Radius' options for the ‘Arrange Shapes in a Circle’ process.  To toggle the visibility of 'on image' controls, click the button to the right of the cogwheel in the lower left hand corner of the shape processor window.


￼
Shape Processor Examples

Below are several examples of simple designs you can create using Acorn’s shape processor.  The first design was created using only the shape processor.  The hex’s have no fill and a stroke of 6.

￼            ￼


The next example was created by starting with just a single line using Acorn’s line tool, then adding the listed processes.

￼     ￼


The last example was created entirely in the shape processor.  The listed processes were added, then the layer was duplicated twice.  The radius of the spiral and the scale of the shapes were increased on the duplicated layers.


￼        ￼



<%'<div class="seeAlso">'%>For more examples of shape processor designs, click here.  Pro Tip:  To create some really neat effects, try adding filters to your shape processing layer!<%'</div>'%>


c0url: shape_tools.html
c1subject: Shape Tools
c2body:
Shape Tools



Besides altering bitmap images, Acorn also provides tools to add your own simple vector shapes.  Please note that the only file format that can save your shapes for editing at a later time is the native Acorn file format.  Acorn's shape tools consist of bezier (P), rectangle (R), ellipse (O), line (;), arrow, and star.  Please read bezier curves for more detailed information on the bezier tool.  

Acorn's Shapes

When you click on a shape tool, the inspector palette will load the shape options.  Among other things, you can change the dimensions of your shapes, turn stroke and fill on and off, alter the angle of the shape, and add a drop shadow.

You can move your shapes around in the canvas using the move tool (V).  

￼
Rectangle Tool (R)

The rectangle shape tool (R) is how you create rectangles and squares.  To create a perfect square, hold down the shift key while you are creating the shape.  Press the spacebar while creating the shape to reposition the origin.
￼

￼
Ellipse Tool (O)

Creating an ellipse is similar to creating a rectangle.  You can create oval shapes simply by dragging out the shape. You can create a perfect circle by holding down the shift key while dragging.  Press the spacebar while creating the shape to reposition the origin.

￼
Line Tool ( ; )

The line tool can be used to create lines at any angle of any length.  You may also create a perfect horizontal, vertical, or diagonal 45º angle line by holding down shift and dragging the shape out in the direction you wish.

￼
￼
Arrow Tool

The arrow tool provides you with a flexible and easy way to create arrows in your image.  Once you've drawn out your arrow, you can adjust the size of the arrowhead by dragging the selection point in the head towards the tail or towards the tip.  To learn more about this tool, read the arrows tutorial. 

￼
Star Tool

The star tool defaults to a 5 point star, but you can edit the number of points to create many different variations including triangles and diamonds.  Draw out a star on your canvas, then with the star selected click on the back tick key (`).  A pop-over will appear with various options to modify the star appearance.  You can also modify the number of points with the on-canvas controls.


￼
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Stroke, Corner Radius, & Fill

You have the option to turn on/off fill, and adjust the stroke value in the inspector palette.  The stroke is the outline of the shape and the fill is the inner color.  Line shapes have no fill, only stroke.  Checking the corner radius box and adding a value in the drop down menu will give your shape rounded edges.  Increasing values increases the amount of curve in the corners for a more "rounded rectangle" appearance.  


Shape Color
￼
Color can be applied to both the fill and stroke of a shape (the exception is line shapes as the line has no fill).  The foreground color is the stroke color and the background color is the fill.  To change the color of the fill or stroke you can click on a color well in the tools palette to access the colors palette.  Alternatively, you can select your shape and bring up the color palette by going to Window ▸ Colors, or typing the keyboard shortcut ⇧⌘C.  
￼


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>
Rotating Shapes

￼

The angle of the shape can be modified by altering the angle value in the shape palette.   Another option is to hover over a corner of the selected shape, and a circular arrow will appear.  Click and drag once the circular arrow has appeared to achieve your desired rotation.  Hold down the shift key when dragging to constrain your rotation to 45 degree increments.
￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Snap to Pixels
￼

When creating, modifying, or moving vector shapes, you have the option for the shape to "snap to pixels".  If this box is checked your shape will move within the x,y coordinates of whole numbers only.  This prevents the bounds of the shape from appearing blurry should it be placed on coordinates that involve a fraction.  To turn this option off, uncheck the box.
  
<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Coordinates and Dimensions

With the shape selected, you can modify its coordinates on the (x,y) axis and its width/height dimensions either by changing the values in the inspector palette or by clicking and dragging on the bounding edge of the shape.  

￼

Stroke Style

With the shape selected, you can alter its stroke style from solid to dashed.  With style set to "custom", you can enter your custom dash and gap values.
￼

Shape Shadow

Give your shape a drop shadow and customize the shadow position, color, and blur values.  Click on the shadow color well once to select it, then change the color in the colors palette.  

￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Selecting Shapes

In order to modify a shape after it has been drawn, the shape must be "selected".  You can alter the shape size, color, fill, stroke, position, etc. without having to re-draw the shape.  Make sure that you are currently on the shape layer in the layers list.  There are a few different ways to select your shape:

	•	Using the move tool (keyboard shortcut 'v'), click on the shape.  This works well if you only want one shape selected.
	•	Select ▸ Select Next Shape (^⌘]), or Select ▸ Select Previous Shape (^⌘[).  This works well if you only want one shape selected.
	•	Select ▸ Select All.  This works well if you have only one shape on the layer, or if you want all the shapes on the layer selected.
	•	To select multiple shapes, hold down either the command key or the shift key and using the move tool select your shapes. The bounding box will appear encompassing the shapes you select.  

You will know that your shape is selected if it has a thin line boundary with control points.
￼


Shape Selection Preference

Under Acorn ▸ Preferences ▸ Advanced, there is the option to keep the shape selected after you draw it: 'keep selected for editing'.  This can be helpful if you find yourself needing to modify your shapes frequently immediately after you draw them.  


￼

<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>

Random Shape Tips

Did you know you can use the arrow keys to move selected shapes?  And if you don't have any selected already, pressing an arrow key will select all the shapes on the current shape layer and begin moving them for you.  In addition, you can hold down the shift key when pressing an arrow key to move the selected shape(s) ten pixels at a time instead of one.  And if you hold down both command and option while pressing an arrow key, Acorn will move the selected shapes half a pixel for you.

Vector layers (shapes and text) are different from bitmap (or raster) layers.  Vectors revolve around lines and shapes, where as bitmaps are pixel oriented.  You cannot draw on or use the eraser on a vector layer unless you have rasterized the layer by selecting Layer ▸ Rasterize Shape Layer.  Once you have rasterized a vector layer you cannot go back and modify the shapes or text without undoing subsequent work.  

<%'<div class="seeAlso">'%>See Also:   Shape Editing, Bezier Curves, Arrows, Stars, and Drop Shadows <%'</div>'%>


c0url: shapes_in_layer_masks.html
c1subject: Shapes in Layer Masks
c2body:
Shapes in Layer Masks

￼


Layer masks are currently bitmap only, which means vector shapes cannot be used in the mask.  There is a nifty work around you can use if you want a shape in your mask using the ‘mask’ blending mode.  If you aren't familiar with how layer masks work, be sure to read the layer masks documentation, and fun with layer masks tutorial as well.  

In this example, a circle shape with a mask blending mode will be used to focus on the rubber duck in the image.
￼
Draw out the shape you would like to use.  The shape should have no stroke and a fill of white.  The shape will be on its own layer since it is vector based.  If you want to base the size of your shape on something in the image, temporarily turn the opacity down on the shape layer so you can see the layer below.  In the image below the shape's opacity has been turned down to 40% so the circle shape can be adjusted to the size of the rubber duckie.  
￼
Adjust the shape layer opacity back up to 100%.  Change the blending mode to ‘Mask’.   Below the rubber duckie image layer is transparency, so that is what shows through the mask.   

￼
If you want to line things up differently you can easily make adjustments by moving the position of either layer.  

Layer masks and the mask blending mode are great ways to play around with your images non-destructively!


￼


Photo Credit
© tibchris 


c0url: smart_layer_export.html
c1subject: Smart Layer Export
c2body:
Smart Layer Export


Smart layer export is an alternative to traditional slicing found in image editors.  Name your layers or layer groups like you would a normal image file, and then export them out of Acorn without any cumbersome tricks.  You can even tell Acorn to export your images every time you save.  

This tutorial will use the example of smart layer export being used on an image of 'submit' buttons.  You can download the sample image here: FancySubmitButtonSmartExport.acorn.  This is what the sample image looks like:
￼
The sample image file has two buttons meant for a website.  They are different sizes so the smaller one can be shown on regular screens, and the larger one for Retina class devices (such as an iPhone 4, iPad 3, or a Retina MacBook Pro).

If you were to use the File ▸ Export… menu item to save the image as a PNG, you would still have to slice up the image into two different parts- and you'd have to save the image again.  Wouldn't it be great if you could tell Acorn that you would like to save out a layer as a specific file name?  This is where smart layer export comes in handy.


Smart Layer Export Steps:

	•	Simply name your layer or layer groups with the name of the file you would like to save it as.  You'll have to use one of the following file extensions on the file name: .png, .jpeg/jpg, .tiff/tif, or .gif.
	•	Optionally create a layer at the bottom of each group and name it "@frame" or "@bounds".  The layer doesn't need to be visible.  This layer tells Acorn exactly which part of the image you want written out.  In this example the @frame is a shape layer with a single rectangle object defining the area of the group to be exported.  You could also use a bitmap layer, in which case the opaque areas of the bitmap layer would define the frame of the area to be exported.  If no @frame or @bounds layer is added, then Acorn will default to the size of the canvas for the export size.
	•	Choose the File ▸ Smart Layer Export… menu item.
	•	That's it!

To see how this is done, take a look at the layers list of the example image:


￼


There are a total of 11 layers.  You'll notice that two layer groups are named as files.  When you use smart layer export, Acorn will use the layers which are part of the group (and only that group) to make a brand new image.  Since the "Background" layer is outside of both groups, it will not be used when exporting.  However, if you renamed "Background" to "Background.png", there would be 3 files exported out instead of 2.

Below are the two images created from the smart layer export:


￼￼



<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: soft_lighting.html
c1subject: Soft Lighting
c2body:
Soft Lighting


This tutorial will go over how to create soft lighting in your image using filters and gradients.  Open your image in Acorn, File ▸ Open. 
￼
Duplicate your image layer, Layer ▸ Duplicate Layer (⇧⌘D).  Choose Filter ▸ Color Effect ▸ Color Monochrome.  Click on the color well in the FIlters palette and choose a soft pink.    

￼
Change the blending mode of the duplicated layer to 'Multiply'.  Now add a new layer, Layer ▸ New Layer (⇧⌘N).  Select the gradient tool and create a light pink to dark pink gradient.  Draw out the gradient vertically in the new layer.  You can hold down the shift key while drawing the gradient to keep it straight. 
￼

Change the blending mode of the pink gradient layer to 'Soft Light'.  

￼
Perform the following steps to create a light blue gradient:  Add a new layer, Layer ▸ New Layer (⇧⌘N).  Select the gradient tool and create a blue to light blue gradient.  Draw out the gradient in the new layer.  Change the blending mode of the gradient layer to 'Soft Light'.  Repeat the process to create a light yellow gradient layer.  
￼
Play around with the opacity of the 'Copy' layer (the duplicated layer created in the first step) to achieve a darker or lighter effect. 


       ￼   ￼

		Original                                                                              Soft Lighting Effect

Photo Credit
© d3vilh 


c0url: straighten_a_crooked_photo.html
c1subject: Straighten a Crooked Photo
c2body:
Straightening a Crooked Photo



There are a couple of techniques for straightening crooked images in Acorn.  


1.  Crop Tool Technique

Open your image in Acorn, File ▸ Open. 
￼
Increase the size of the canvas window by dragging outwards on a corner of the canvas.  Select the crop tool and click and drag on your image to create a rough crop.  You can change the crop dimensions later.  Then, click and drag within the gray space of the window to rotate your image until it matches up with a horizontal or vertical reference of the crop tool.  You can move your crop around to assist with lining things up.
 ￼
Increase or decrease the size of your crop by dragging on the crop corners to eliminate any transparent areas in the image that were created.  Click ‘Crop Image’ when you are ready!


￼



2.  Using Grids and Scale & Rotate


Open your image in Acorn.  Turn on your grid, View ▸ Show Grid or keyboard shortcut ⌘'. If you wish, you can change your grid settings by going to View ▸ Grid Settings. The grid helps line things up horizontally or vertically.  The horizon will be used as a horizontal reference. 
￼
Now, rotate the image so that the hillside is lined up with the horizontal lines on the grid. Choose Layer ▸ Rotate and Transform ▸ Scale and Rotate (⌘⇧T) from the menu. Points will appear at all corners of your image. When you move your cursor past the corners, it will change to the rotate cursor as shown below.

￼

Rotate your image until your vertical or horizontal reference is lined up with the grid.  Double click to commit your rotation, or click the ‘Apply’ button in the palette.

The image needs to be cropped to remove the transparent areas.  Select the crop tool from the tools palette.  You can read more about how to crop here.  The result is a nice straight image.



￼


Photo Credit
© Larisa Koshkina 


c0url: text_to_bezier_shape.html
c1subject: Text to Bezier Shape
c2body:
Text to Bezier Shape 

￼


This tutorial will outline how you can convert text to a bezier shape as well as how to use the 'exclude paths' Boolean operation to remove the center of a rectangle.  To start, create a new image, File ▸ New.  The dimensions used here are 1200 x 900 pixels with a white background.

Select the rectangle shape tool.  In the inspector palette, make sure the fill box is checked and the stroke is unchecked.  The color of the rectangle doesn't matter since it will change in subsequent steps.  Draw out your rectangle.  With the rectangle selected, change its dimensions in the inspector palette to 1000 x 700 in the width and height fields.

￼
Now draw out a second rectangle.  Change the color of the rectangle to black.  Change the rectangle's dimensions to 800 x 500 in the inspector palette.  Go to View ▸ Guides and Grids and make sure Snap to Canvas is checked.  Using the move tool, move the rectangles to the center of the canvas.  They will snap in place once you get close to the center.
￼
Use the smaller rectangle to create a hole in the larger rectangle.  To do this, select both shapes by choosing Select ▸ Select All.  Then go to Shape ▸ Exclude Paths.

￼

It's time to add the text!  Go to Layer ▸ New Shape Layer.  Choose the text tool from the tools palette.  In the inspector palette, choose your text settings.  The font and settings used here can be seen in the image below.  When you are ready to stop editing the text, click outside the text box or hit the escape key.  Choose the move tool and line up your text in the center of the canvas.

￼

With your text selected, choose Shape ▸ Convert to Bezier Shape.  Click on the Bezier shape tool in the tools palette.  Click and drag on an anchor point to modify the text appearance.   For more details on moving and modifying anchor points, you can read up on 'Bezier curves'.   The 'A' and 'n' here have been stretched out to touch the rectangle.
￼

Now choose Layer ▸ Merge Down.  Click the 'fx' button at the bottom of the inspector palette and choose Stylize ▸ Drop Shadow.  Play around with the drop shadow settings to make things pop!

 ￼


￼




<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


c0url: tips_&_tricks.html
c1subject: Tips & Tricks
c2body:
Tips and Tricks

Deleting Presets
You can create custom presets for filters, new images, and the crop tool.  In order to delete a preset you have created, hold down the option key while clicking on the preset name.  A window will appear to confirm that you want to delete the preset.  


Changing Measurement Fields
In most text boxes that take measurements, you can use math to change the value.  For instance, if you open up the canvas resize sheet and you want to double the width you can just append *2 to the width field and press tab.  Division, subtraction and addition also work.  You can also use the up and down arrows to increase the size by a point (or quarter inch).  Hold down the shift key to increment by 10.


Using the Arrow Keys with Shapes
Did you know you can use the arrow keys to move selected shapes Acorn?  And if you don't have any selected already, pressing an arrow key will select all the shapes on the current shape layer and begin moving them for you.  In addition, you can hold down the shift key when pressing an arrow key to move the selected shape(s) ten pixels at a time instead of one.  And if you hold down both command and option while pressing an arrow key, Acorn will move the selected shapes half a pixel for you.


Zooming Quickly
Need to zoom in or out quickly? Press Command-5 once to zoom out to 50% and twice to zoom out to 25%.  Command-1 will return you to 100%, command-2 will take you to 200%, and command-3 to 400%.


Brush Tool
Holding the shift key while clicking on the canvas will draw straight lines between your clicked points with the brush.   If you press the option+cmd keys when using the paint tool it will turn into an erasing brush.  To change your brush size quickly, hold down both control and option on the canvas, then drag left and right with your mouse or trackpad to see the brush size grow and shrink.


Wacom Tablet
You can setup one of your express buttons to map to option+cmd, so you have a quick eraser without needing to flip your stylus.


Layers
Hold down the command key when using the + button in the tool palette to add a new group layer.  If you hold the option key while clicking on the layer visibility icon in the layers list (the eye!) it will hide all other layers.  Option clicking on it again, will restore the previously visibility state for all other layers.


Gradients
When making a gradient, hold down the shift key to constrain the gradient direction in 45° / 90° / 180° increments.


App Support Folder
Open Acorn's "App Support Folder" menu item under the Help menu to get to things like custom plugins and saved brushes.


Fill Shortcuts
Option-Delete will fill the current layer with whatever color is present in the front color well. Opt-Shift-Delete will use the back color,  and Shift-Delete will bring up the fill window providing you with further options.


<% if (writer.contextType() == "html") { writer.write("<hr/>"); } %>


