Tech Assist Now » Blog

The Illustrator Pathfinder Explained

zachzurn — Fri, 21 May 2010 17:27:00 +0000

The Illustrator Pathfinder pallette is a simple and Powerful set of tools for manipulating shapes and creating other shapes from multiple shapes. I use illustrator on my Job all day; I find myself using the Pathfinder at lease once for each job I do.

I will first take you through the general information on how to use the Illustrator Pathfinder Pallete. I will then list all of the buttons with a description and a visual before and after.

Illustrator Pathfinder Basic Tutorial:

The Pathfinder palette is very simple to use. Each of the buttons interacts with 2 or more shapes. Each button has a very specific action. These buttons can be confusing because some of them do the same thing. I show examples later in this tutorial which aim at showing the differences between each button.

To begin, I will show you how to use the first button “Add to Shape Area” to make an obect out of a number of different objects.

1. Make a new Illustrator document and draw a circle, a long rectangle and then 2 smaller rectangles like the object you see below (The idea here is to make a simple “key shape” from multiple objects, using the pathfinder)

2. Click the “Add to Shape Area” button.

3. Click the “Expand” button. You will notice that all of the shapes are merged, but when you select the object you see all of the shapes that were there before. Clicking the “Expand” button permanently joins all of the shapes as one. You don’t have to press “Expand” after using the Pathfinder tools, only use it if you want to permanently join the shape so you can do other pathfinder operations with it (Which we will be doing in the next steps).

The shape will now look like this:

4. Draw a smaller circle inside the large circle (or handle) of the key shape.

5. Select both shapes and press the second pathfinder button “Subtract from shape area”.

Now we have a key shape made from various simple shapes. It’s a pretty simple shape — but this is a start. I will publish some advanced pathfinder tutorials in the future.

I am including the tutorial file here for those who don;t want to draw the shape, just do step 2, 3 and 5 with this file:

Note: There is a file embedded within this post, please visit this post to download the file.

Examples of each button in the Pathfinder:

Add to Shape Area:

All selected shapes are combined into one shape with the top shape’s style (All style attributes from the top shapes i.e. color, stroke, etc)

Subtract from Shape Area:

Bottom most shape is eaten away by any number of shapes above it. Bottom shape keeps it’s style and all top shapes dissapear.

Intersect Shape Areas:

Intersects 2 overlapping shapes to leave intersected area as a shape. Resulting shape keeps the top shapes style. This tool does not work well with more than 2 shapes. If more than 2 shapes are used all shapes disappear after clicking the “Expand” Button.

Exclude Overlapping Shape Areas:

Works with 2 or more shapes. Any overlapping areas are removed and any areas not overlapping are kept. Style of topmost shape is applied to the resulting shape.

Divide:

All of the buttons in the second row “Pathfinders” create multiple objects grouped together. In my examples of these buttons, I have ungrouped the shapes and moved them apart so you can see the resulting shapes.

The Divide button of the pathfinder divides all of the overlapping shapes. This button can be used with 2 or more shapes. All divided shapes keep the visible style of the top overlapping shape.

Divide is a Pathfinder tool that I personally use a lot.

Trim:

I am using more shapes here to show the difference between “Trim” and “Merge”.

Trim keeps all of the top shapes intact while trimming all overlapping shapes out of the bottommost shape.

Merge:

Merge does the same thing as trim with the exception that any overlapping shapes that have the same style as the bottom shape are merged with the bottom shape. Any overlapping shapes above the bottom shape that are not the same style as the bottom shape are kept in tact and are trimmed out of the bottom shape.

Crop:

The crop tool only interacts with the topmost shape and the bottommost shape. If you selected 5 different shapes, this tool will only leave the intersection of the topmost and bottommost shapes with the style of the bottommost shape. In addition to this, it will leave the non-overlapping section of the topmost shape (with no stroke or fill).

Outline:

Outline can work with 2 or more shapes. Outline takes all shapes and cuts each shape at the intersecting points. This results in no overlapping lines. All lines are separated at the overlapping areas. I suggest trying this one out, un-grouping it and then separating the elements.

Minus Back:

Minus back only works with 2 shapes, the topmost shape and the bottommost shape. It minuses the bottommost shape from the topmost shape. This button seems like it should be in column one with the “Shape Modes”.

30 Part Flash CS4 Basics Tutorial

zachzurn — Fri, 29 May 2009 20:17:04 +0000

In this Flash CS4 tutorial you will learn the basics of Flash CS4 animation. You will familiarize yourself with the Flash CS4 workspace and learn how to use the various tools in order to create a Flash animation.

Flash has many applications in the web world. Flash can be used for advanced motion graphics and animation. Flash can be seen used for interactive ad banners, portfolio sites and advanced online programs. Learning the basics through these tutorials is a great start to becoming pro.

Flash CS4 Tutorials

Building RIA Web applications Fast and Efficiently

zachzurn — Fri, 15 May 2009 00:36:22 +0000

Building Rich Internet applications can take a long time for those who do not have whole teams of newly graduated programmers. For those who are trying to put a rich application together with efficiency and in a time frame that is realistic there is a solution.

The name of the program is “Flex“. Flex is a flashed based programming environment which uses XML as a main datasource. Once you have mastered Flex, you can build very functional and useful applications that run via the internet. With the advent of Adobe Air, you can also deploy these applications for use on desktops.

I do not consider myself and advanced PHP coder and yet I have built some very complex applications. One application that I built was an online course creation system which enabled someone to build online courses without having to know any coding/html. I built this for a company who delivers online courses on many subjects. They privately use it for course creation.

I have also built whole admin systems to track jobs for a publishing company. All of the applications that I have built were built on a part time basis. This is why I suggest learning Flex.

The main benefit of using Flex is that you spend less time creating the interface and more time writing your custom code. Flex has a very intuitive interface builder and data connection system that takes away a lot of the wasted time used on doing these kinds of things. If you know PHP, then Flex should be easy to start learning. You don’t even need to know Flash at all to build a flex application.

Flex interfaces can be customized using basic CSS and also and Illustrator template for graphical sections of the interface.

I suggest downloading the trial of the Flex Builder and trying it out — I think you will get hooked on it’s simplicity. Get the trial here.

Examples:

Some examples of Flex applications are listed here:

Aviary. All of the applications that Aviary has created were created using Flex.

Volkswagen. This online car locator was created using Flex.

Klok. A personal time tracker for freelancers, built on flex and deployed as a desktop application.

There are many more eaxamples as can be found here.

Keep in mind that a lot of these flex applications are mainly interface and data processing based which is what Flex makes easy to do. I hope to write additional tutorials on using Flex.

Learning Flex

Learning Flex in a Week by Adobe. Learn flex fast using these free comprehensive tutorials by Adobe

Very simple flex tutorial. A simple tutorial with downloadable file for reference.

Tutorialized Flex tutorials. Some basic tutorials, hopefully more to come.

Making a desktop application with flex. Once you have learned the flex basics, see how to turn Flex appliations into Desktop Applications.

Learn how to build websites from home 100% free

zachzurn — Sun, 12 Apr 2009 00:31:55 +0000

Learning how to build websites can be daunting at first. but with the amount of information on the web, it’s very easy to gradiently approach the subject and become a good website builder. I started a couple of years ago and I can now put together websites with ease. If you want to learn to build websites then this is for you.

This article is not for you if you only want to learn to build websites using visual based website builders and/or content management systems. I will be doing a separate tutorial on how to build websites that way. Realize that both ways can be used correctly and have their rightful uses depending on the goal for your website.

I will not be telling you how to build websites by myself — instead I will be telling you where I learned to build websites. I will give you links to the right places to learn, and all free.

The first and best place to start learning about websites is W3 Schools. W3 Schools has all free tutorials on all of the subjects you need to learn to be able to start building your’e own website. What you need to do is do the tutorials on W3 Schools in the order listed below. Make sure you play around with each concept after you read it. If you have any questions, post a comment here and I will answer it.

Learning Website Building Basics

Read this first. This article gives you the whole picture before you start learning. I suggest you read it.

Learn HTML. HTML(Hyper Text Markup language) is what every website is made out of. It is the first thing you will need to learn, to be on your way to building websites. Make sure you take the time to really get this because it is the most basic and essential piece of websites.

Learn CSS. CSS(Cascading Style Sheets) is what most websites use to efficiently style their HTML. With CSS you can make your website have an overall consistent design or feel. It also enables you to make design changes that reflect on numerous HTML pages by only changing the design change in one place.

Learn Basic Website Hosting. Web hosting means having a place for your website to reside. Learning this will allow you to set up your own website. For example, this website is “www.techassistnow.com”. If anyone goes to that web address, they see this website. When you understand how to host your own website you can then have your own domain name and website content. This will allow you to put together a full basic website that can be seen publicly on the web.

Once you get a feel for this, practice using HTML and CSS until you are pretty comfortable with it. It is wise to know these subjects well before going onto the next step, which can be difficult at first. By Learning HTML and CSS you have the basic knowledge to build a website. If you want to learn how to make interactive, more modern websites, continue down this list.

Learning Advanced Techniques

Learn Javascript. Javascript allows you to build interactivity into your web pages. With javascript you can make your page come to life and be more inviting to the people visiting your website. Learning Javascript can be troublesome at first, so take it easy and mess around with the examples as much as you can. Javascript has nothing to do with JAVA. JAVA is an advanced programming language and shares no similarity to javascript.

Learn PHP. PHP is a programming language that allows you to be able to deliver more dynamic web site content. This kind of programming is called server side scripting. There are numerous different types of server side scripting. I recommend using PHP because it is the simplest to learn and is used broadly on the internet. Do not expect to learn this all at once. As you learn some, use it and build something with it.

Once you have gotten pretty good at PHP, you have come a long way. Learning the really advanced features of website building will become easier as well as learning other server-side scripting languages.

Learning More about the Advanced Techniques

Becoming really good at building websites can involve numerous other subjects. I list them below so you can be directed to the right place. Other than that you can google any questions you have and find very good free articles and tutorials on these subjects. As a tip, if you see something that you like on a website you can right click in the browser window and click “View Source”. Looking through the HTML should give you an idea of how it was done.

Learn Ajax Her e. Ajax is a type of javascript programming that can make webpages even more dynamic and load faster. When you go to a website like Google Docs you can see ajax in effect. A lot of new websites are using this programming technique.

Learn XML Here. XML stands for (EXtensible Markup Language). XML is used to store data.

Learn Other Server-Side Scripting. Learn programming languages that are similar to PHP. Click on the one you are interested in.

ASP (Active Server Pages)
JAVA (Server Side)
SQL
All others Under “Examples of Scripting Languages”

Learning Web Design

Learning web design is a whole subject in its self. Learning web design normally requires learning graphic design to a degree. If you are already a designer or if you just want to jump into learning web design, read on.

Learn the web design/Planning process. This is the first step in designing a website. It is essential to a good website to plan it correctly.

Learn Photoshop. Photoshop is the main program used today to design web sites. Many sites are planned using a graphics program before any HTML or web coding is done. Websites done like this can have a huge edge on aesthetics and design. Photoshop is a huge program and can be a lot to learn by yourself. I suggest getting a book on this. The book I used was the Photoshop Bible, they come out with new ones for each new Photoshop version. Google “Photoshop Bible” or go to Amazon and get it.

Learn Web Design and Web 2.0. These are some very good tutorials from Scratch Media. I love this website and would suggest anyone read the information on there.

Learn Web App design and put AJAX to use. This is also a site from scratch media. Very useful and informative.