Tech Assist Now

6 Free Textures: High-Res Wood & Bark

zachzurn — Wed, 09 Jun 2010 22:55:45 +0000

I am releasing these free wood textures for use in designs. These are High-Resolution and are under the Creative Commons License. All of these textures are original and Photographed by me. If you use my textures, please link to my site.

These textures can be downloaded in different sizes by clicking on the links below.

Free Texture: Cross section of a wood log.

Free Texture: Detail of the top part of an old whiskey barrel.

Free Texture: Detail of an old red barn.

Free Texture: High detail of uncoated wood.

Free Texture: High detail of dark rough tree bark.

Free Texture: Varnished aged wood paneling.

5 Free Textures: High-Res Grunge

zachzurn — Thu, 27 May 2010 03:56:33 +0000

This is my first set of free grunge textures. I just got a new camera and have decided to release grunge textures and some free photo stock. These textures are grungy and rough and can be used in any of your designs.

The next set of high-res textures I hope to release is wood detail. I find myself needing wood texture often, so I feel I should release a set of those as my next textures. I hope to have time to release a set of free images weekly.

If you wish to share these with others, please link to this post and not directly to Flikr. And of course let me know what you think by commenting below.

Note: To download, click on a texture photo and you will be directed to flikr where you can download the original texture size or smaller versions.

Free Texture: Extreme grunge paint texture.

Free Texture: Rough, grunge bumpy stone texture.

Free Texture: Grungy painted aged wood.

Free Texture: Grunge concrete texture.

Free Texture: Rough, Grunge paint splash concrete.

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

Illustrator Rich Black, Poor Black

zachzurn — Wed, 19 May 2010 21:47:00 +0000

I have been working with Illustrator for some time and I have had a lot of people ask about problems with the color black. There are several problems that can crop up when using black in Illustrator, understanding how to use the “Appearance of Black” settings should help clear this up. As a note, this setting also shows up in Adobe InDesign and is imporant.

What do the “Appearance of Black” settings mean in human terms?

Appearance of black is a setting in Adobe Illustrator that allows you to change how the color black is shown on your screen and how it is output to your printer and exported RGB images.

What is “Rich Black”? Rich black is a deep black that is very dark. Regular black is a very dark grey. The difference mainly matters in printing. A typical rich black mixture might be 100% black ink, and 50% of each of the other three inks (Cyan, Yellow and Magenta).

When you use the “Black” swatch in Illustrator, you get regular black (100% Black and 0% CMY).

Setting these preferences in Illustrator

Choose Edit > Preferences > Appearance Of Black (Windows) or [ application name ] > Preferences > Appearance Of Black (Mac OS).

1. Choose an option for On Screen:

Display All Blacks Accurately: This setting will show all blacks acurately seen in the image below.

Display All Blacks As Rich Black: This setting will show all blacks as rich black, even if they are not rich black.

2. Choose an option for Printing/Exporting using the above reference:

Output All Blacks Acurately:
When printing to a non-PostScript desktop printer or exporting to an RGB file format, outputs black colors as seen above. This setting allows you to see the difference between pure black and rich black.

Output All Blacks As Rich Black:
When printing to a non-PostScript desktop printer or exporting to an RGB file format, outputs pure CMYK black as jet black (RGB=000). This setting makes pure black and rich black appear the same.

Other Issues with black in Illustrator:

Placed Photoshop files with black backgrounds when placed over vector black can sometimes create a problem. If you are having a problem where the black in your Photoshop file doesn’t match the black in your illustrator file, try the steps below. Additionally illustrator images not being pure black in Photoshop can relate to this information.

Use the Eyedropper tool in Illustrator to make the vector black the same color as the Photoshop black. To do this, select the black vector shape and then select the Eyedropper tool, click the Eyedropper tool on the black from the placed Photoshop file.

That should clear up the problem.

Design Basics Part 1: How to design

zachzurn — Tue, 20 Oct 2009 03:44:55 +0000

Design. How do you design something that apeals to the person looking at it and achieves the goal you are trying to achieve?

Well, lets look at the goal of a good design, the main goal would be to communicate to the viewer the idea you want to communicate. This may be indirect, very direct, or even hidden.

Take the Google home page for example, what are they trying to communicate with the design? Well each person who saw it might tell you what they get, but what I get is “simplicity” the design communicates that to me and I myself like a search engine that is simple so I use Google like so many others.

Google Search (Entire page):

Yahoo Search (Entire page):

If you wanted to communicate that your website has many different services and show that on your homepage, you might get a design like Yahoo where the home page is so loaded that to me it overwhelms me. Someone else who might like lots of links might really enjoy the design. Thats the point, you want to communicate your message with the design.

For your design to be a success, you would want to communicate the message that will pull peoples interest (People that you are selling to) and then deliver your product. As an illustration: You want to design something that sells computers. You design something that looks old fashioned, the only people you will be selling to is people who like old fashioned things – not computers. Doing this, you will lose sales and the design is a bomb (Not the Bomb, like it should be).

To be successful to sell computers you would have to do a design that communicated what a person buying a computer likes about a computer, to find this out you need to survey those kind of people and find out what they like. But surveying is a whole additional subject. Once you have surveyed and found out what the people who would like computers like about computers that makes them interested in buying computers you can do the design correctly. You then do your design in a way that communicates what would make the person buy.

Knowing the data mentioned, you can do a successful design, providing you know the basic rules and techniques of the area you are working in. The basic rules and technical skill in the area you are working in are necessary to do a good design.

Here are some examples of the technical skills necessary for some areas of design:

Book cover design:
Basic design rules
Photoshop or Indesign (Or any of the programs for designing images)

Internet design:
Basic HTML (So you know what can be done)
Photoshop or ImageReady
Flash (for designing Animations)

Interior Book Design
Photoshop
Indesign or Quark
Basics of Typesetting and Typography

The better you know your technique, the better you can execute your ideas for the medium being designed for.

9 Simply fancy JQuery plugins

zachzurn — Tue, 30 Jun 2009 03:56:30 +0000

I just stumbled on this great website which has very useful and simple jquery ajax applications. I will review each here in a simple way so you can see all of the useful information. This website shows a video tutorial, a text tutorial and a demo for each of the ajax applications.

Please keep in mind that you should use these design elements sparingly and tastefully. Using too many effects in your webdesign can be tacky and detract from the overall design.

To begin, here is the website: http://jqueryfordesigners.com/

Ajax image carousel

This creates an endless carousel with an html list. It also displays a very smooth scrolling effect. This is very simple to set up and uses jquery. Here is an image showing the carousel. View the code and tutorial here.

Ajax smooth slidedown

This shows you how to make a smooth div slidedown effect without the initial jump. This can be used for many cool ajax effects. View the code and tutorial here.

Ajax smooth data changer

This creates a panel that automatically switches out a list of divs. A very nice effect for blog or website sidebars that want to show rotating pieces of information in an attractive way. View the code and tutorial here.

Ajax Smooth Image Fade

I myself have always wondered how to do the smooth image crossover fade and this tells you how to do it. The effect is very nice on buttons, menus and even images on display. View the code and tutorial here.

Ajax Sliding Tab Effect

This is a great effect for teb boxes. I see it cropping up all over the web now days. Use it for tabbed browing of information or even arrow based browsing (arrows on the left and right). View the code and tutorial here.

Very Sleek Tooltip Bubble

Very nice use of the JQuery puff effect. This shows an informational popup over the area you want when the user mouses over the area specified. Good for tooltips, information divs and any other popup application. View the code and tutorial here.

Loading a Large Image with Ajax

You have seen progress indicating gifs show up while a large image is being loaded. Ever wonder how to do this? This tutorial tells you how to do this and have complete control over how the image loads. I do not have a picture of this as this tells you how to load any image with ajax. View the code and tutorial here.

Slideout Side Menu Effect

If you have been to the Apple website recently you might have seen this in action. This gives you an interactive side menu. When a user hovers over one of the menu dividers — that menu shows up. Very nice effect (play around with the demo). View the code and tutorial here.

Ajax for Instant & Server Side Form Validation

Most of the new “Web 2.0″ websites have very fluid forms. This is because of the fact that you can lose user’s interest in registering or even buying if it is too hard to fill out the form. I myself have left websites because I found it very hard to get the form to validate. This tutorial shows you how to make a form that validates on the fly, including doing server side calls for user names and such. Quite useful for streamlined user registration. View the code and tutorial here.

There more tutorials and demos on this site regarding Ajax and JQuery. The ones selected here were selected because I thought they could be very easy and useful for web designers who want to have a design edge without haveing to spend too much time coding ajax effects.

Cross-browser Absolute Positioning PNGs

zachzurn — Wed, 03 Jun 2009 21:17:33 +0000

With the new Web look spreading through every site new and old, there are a lot of times when you want to use absolutely positioned pngs on your site.

The 2 problems we face. The first one is that the PNG format is not fully supported on all browsers that are in use today. The way we handle that is with a simple include into the main template file of your site.

Here is where you can get the javascript file click here.

Include this file into the header of your main template file:

This is a hack to tell the browser to include the”unitpngfix.js” file if the browser is IE 7 or below.

The next problem is that IE positions things differently. We will be using a similar hack to go around this problem. Here is how the code will look.

All you have to do is add your image path and then change the values in the “left” and “top” to adjust the position of the image. You will have to adjust the values in the “if It IE 7″ section while looking at the image in Internet Explorer 6 or 7.

I hope this helps anyone who is having trouble with absolutely placing PNG images for cross browser compatibility.

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

18 Simple Dreamweaver CS4 Basics Tutorials

zachzurn — Fri, 29 May 2009 20:10:44 +0000

In this Dreamweaver CS4 Tutorial you will learn how to create a basic website using Dreamweaver CS4.

You will learn how to Define a site, Create a template, Design your template page, Design your css style sheet, Insert Editable Regions , Create the pages of your site using the template, Link all the pages together, Create a form, Check your site in the browser and, Upload your site and make it live.

Dreamweaver CS4 Tutorials

View all the tutorials here.

Fireworks CS4 Basics Tutorial

zachzurn — Fri, 29 May 2009 20:07:23 +0000

This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website.

This tutorial will take you through the making of a website design using fireworks including how to do a logo design in Fireworks.

View the tutorial here.