David Matthias Designs

Icons for Web and Other Businesses

Today I am excited to present to you a lovely set of bw icons as a free gift, the Smaco! This 300-icon set contains all shaped icons that are designed for wide use in web applications, multimedia, shopping, holidays, documents, entertainment and many other businesses. This is a meaningful giveaway to the community, so you can use Smaco! for free for your personal and commercial projects. Please respect this contribution by not reselling, sub-licensing or renting this icon set.

Download the BW Icon Set For Free (3784x3032 - 2MB - .tif)

To purchase this Icon Set in 3 different colors, Transparent png's or Vector format, drop me a mail at davidmkovac[attherate]yahoo.com

300 Icons for Web and Other Businesses

Today I am excited to present to you a lovely set of bw icons as a free gift, the Smaco! This 300-icon set contains all shaped icons that are designed for wide use in web applications, multimedia, shopping, holidays, documents, entertainment and many other businesses. This is a meaningful giveaway to the community, so you can use Smaco! for free for your personal and commercial projects. Please respect this contribution by not reselling, sub-licensing or renting this icon set.

Download the BW Icon Set For Free (3784x3032 - 2MB - .tif)

To purchase this Icon Set in 3 different colors, Transparent png's or Vector format, drop me a mail at davidmkovac[attherate]yahoo.com

Transparency in my pages

Achieving real transparency using images is possible with the PNG image format; by saving your images as a 24-bit PNG, you can achieve opacity and true transparency. While GIF images also support transparency, the format requires us to use a matte—a color that’s similar to the background upon which the image will be placed—when we save a transparent GIF image. This technicality means that creating a transparent GIF image that spans differently colored backgrounds is very difficult. It often involves chopping the image in two, saving each part separately, then reassembling the image pieces on the page—a process that reeks of old-school methods, and one we usually try to avoid in CSS-based layouts. Using the GIF format for an image that will scroll over a fixed background results in an ugly “halo effect.” While the transparency is effective in the image shown below, upon scrolling, the undesirable halo effect is apparent.

The example in this figure uses two PNG images. The first replaces the white background of #content with a ten-pixel PNG image. I developed this image in Photoshop by creating a new transparent image, then placing a solid white layer over the top of the transparent background. I then reduced the opacity of this layer to 40% and saved the file as a 24-bit PNG, giving it the name opaque.png. The second image is a replacement for the background image recipes.gif; it’s a 24bit PNG with a transparent background. I’d like to fix the image in the top right of the viewport (using background-attachment: fixed), so that it remains in that location when the user scrolls the page. If I were to use a GIF image (with a dark blue as the matte), we’d see the halo effect mentioned above when the background moves and the image appears above the lighter page background. Here’s the CSS that creates the effect shown below:

body {

font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
background-image: url(recipes.png);
background-repeat: no-repeat;
background-position:98% 2%;
background-attachment:fixed;
margin: 0;
padding: 46px 0 0 0;
}

#content {
margin: 0 4em 2em 4em;
background-image: url(opaque.png);
padding: 1em 50px 40px 1em;
}

PNG images can be used to create unique and attractive effects. Unfortunately Internet Explorer 6 lacks the level of support required to render transparent PNGs. However, as long as you think through your layout carefully, it’s often possible to include this kind of effect in your pages for visitors using other modern browsers, such as Firefox, Safari, Opera, and Internet Explorer version 7 and up. Another alternative is to use JavaScript to work around this limitation of Internet Explorer 6 and earlier.

Creating a Mosaic Graphic

A mosaic is an art design made of small pieces of colored stone or glass. In Illustrator, you can create a mosaic special effect. You can apply to a bitmap graphic or a rasterized vector object. The graphic must be embedded in an Illustrator document and not linked to perform the Create Object Mosaic command. During the process, you can change the dimensions of the mosaic, control the spacing between tiles, and the total number of tiles.

1. Select a bitmap graphic or rasterized vector object with the Selection tool to use as the basis for the mosaic.

2. Click the Object menu, and then click Create Object Mosaic.     

3. To change the dimensions of the mosaic, specify the Width and Height values in New Size.

4. Specify the Width and Height values in Tile Spacing and Number of Tiles.

5. Specify options in the following areas: 

◆ Constrain Ratio. Locks the width or height to the dimensions of the original bitmap image.

◆ Result. Specifies whether the mosaic tiles are color or grayscale. 

◆ Resize Using Percentages. Select to change the size of the image by percentages of width and height.

◆ Delete Raster. Select to delete the original bitmap image. 

◆ Use Ratio. Click to make the tiles square; uses the number of tiles to make the tiles square

6. Click OK

 

Iconographic displays

The iconographic approach provides a general structure for the specification and creation of integrated displays of multi-parameter images.

The basic primitive is the icon, which is a generalization of a single pixel to higher dimensions having multiple perceivable features and attributes. It enables the representation of multiple values at each spatial location by controlling attributes of the icon’s perceivable features.

Grayscale pixels in images are the most degenerate form of an icon¾a 1´1 patch with one attribute of variation, its intensity. Color coding of the 1´1 pixel patch provides the simplest extension, which is introducing three attributes of variation, its tristimulus values such as lightness, hue, and saturation. By expanding the area of the icon, albeit at potentially significant costs in spatial bandwidth, the icon acquires visual features and attributes, such as shape and other aspects of geometry and color, all of which can be controlled by data items. Stereoscopic depth and dynamic properties are other potential extensions.

We now describe briefly the main approaches for visual integration; detailed descriptions can be  found in the cited literature.

Color integration

In color integration, each icon of the integrated representation is a color patch (traditionally a pixel¾a 1´1 patch) whose tristimulus values are controlled by the values of corresponding locations in (up to) three input parameter distributions. Typically, the different parameters are mapped to the different coordinates of a color model.

Geometric integration

Geometric coding, originally proposed by Pickett has been developed at the University of Massachusetts-Lowell for visualization of large multi-parametric databases. It is a powerful approach to integration, in particular where the number of parameters exceeds three, which is the upper limit for color integration. In this technique, shape perception is utilized to present local combinations of data, while texture perception provides a sense of global spatial distribution of those combinations.

Color Icon integration

At the most general level, the color icon is an area on the screen, constructed of one-dimensional features (boundaries and area subdividers), and two-dimensional features (areas defined by the subdividers), and their attributes (orientation, size, shape, and color). Each of those can be controlled globally (e.g., the shape of the icon is chosen to be rectangular for all icons), or can be mapped to be controlled by a data parameter (e.g., a subdivision point along a linear feature is controlled by a parameter value)

The Typography Rules That Every Web Designer Should Follow

What do you think visitors to your website care most about? The colours? The images or sounds? Chances are that the only thing most visitors really care about is the text - this is where they will find the information that they're looking for, after all. This revelation only makes typography (the art of arranging type) even more important for every web designer to take into account. The following rules are the ones that should not be broken when it comes to typography:

1. Read through your text

It seems that most web designers believe their role when it comes to text is to simply copy and paste content that has been provided by the client from a text file. What every designer should be doing, however, is read through the text to get, at the least, a basic idea of how it can be integrated into the website. Reading through the text once you have uploaded it to the site can also give you a good idea of whether you have gotten the spacing correct.

2. Show a hierarchy

Every website should display a clear hierarchy of where a visitor should begin reading and where they should continue on from there. Typography is a great way of creating that hierarchy, as you can use font size and typeface to clearly define what parts of the content are more important, which design alone can fail to achieve. Whilst there is more to the hierarchy than just text, designers should still begin here.

3. Pay attention to macro and micro typography

Firstly, what is macro and micro typography. Macro refers to the overall structure of the type, how it appears in comparison with the entire design, and its appeal when considered on its own. Micro refers to the finer details, such as spacing and whether it is easy to read. If a web designer were to ignore either factor, it would more than likely be to their detriment.

4. Choose type colours carefully

Whenever web designers are asked to work with coloured typography, it is imperative that they tread carefully. This is because it can be very easy to loose the text in the background of the website, especially if similar colours are chosen. The easiest way to prevent this from happening is to choose a type colour that is vastly different to the colour of the background, such as black text on a white background.

There are, of course, other rules that every web designer should be following when it comes to typography. The four outlined above, however, can be highly beneficial in helping your website to become successful with very little effort on your behalf. The most important thing to keep in mind is that typography should never be forgotten and tacked on at the end - it should be taken into account from the very beginning of the project.

Web Typography For the Element of Design

When designing your site you may want to decide what font you are going to use before you start writing your content. Each different style of font will render differently depending on your operating system and your web browser. You web typography will also have a different effect on each area of your site. There are a few things to watch for when deciding which font to use. There are several different fonts are the safe typography for web development.

Sans-Serif Font and Serif Fonts

To start things off there are two general categories of fonts. There are sans-serif and serif fonts. A sans-serif is most common with Arial and Verdana on a Windows operating System and Helvetica for a Mac operating system. Sans-serif fonts have no flat spots on the text. These small flat spots have a nick name of feet. A serif font is Times New Roman and is the most popular serif font that developers use. The best way to determine if your font is serif font or a sans-serif font is to look at the bottom of the text. Serif fonts have small feet at the bottom of their text and sans-serif fonts have clean cut offs at the bottom.

Windows Fonts Linux Fonts and Mac Fonts

Each operating system has different style of fonts. Of all the popular operating systems, most of them have the same fonts. There are a lot of windows fonts that are not supported by the other operating systems. Windows Vista has added a lot of different fonts to its operating system. If you choose a font that isn't support by the operating system, this will force the operating system to choose one. The result can crash your web design. But choosing a font that is supported by all operating systems will keep you design safe from rendering incorrectly.

Web Safe Fonts 
These typography fonts have been common to all versions of Windows, Linux and Macs: 

• Andale Mono
• Arial
• Arial Black
• Century Gothic
• Comic Sans MS
• Courier New
• Helvetica
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Finding your Web Typography

 

When finding your font-family you need to find a good size and weight. Font size can be very important. Make sure that you font size is readable on all operating systems and browser. Font sizes verify between operating systems. A font size of 12pt on a Windows operating system is smaller than a font size of 12pt on a Mac operating system.

Font weight is also by the font size. When choosing a bold font weight, size can change how much bold effects your font. A small font size will take a small amount of bold, where a bigger font size will give it a stronger bold. Bold is really use for focus points and important items.

Typography can be Fun!

There might be fonts on your developing computer that you might love. But it might not be the best choice to use for your site. Play around and be creative with your web typography. Just keep in mind what your users will be using different internet browsers and operating systems. If their computer can't find your font, it will be the computer's choice by default. This could change the whole outlook of your page. Always check your pages in different browser and operating systems. An easy way to do this is to use a website called BrowserShots. (www.browsershots.org) It will run your website throw different scenarios of internet browsers and operating system and output the results in thumbnails.

Some Productivity Changes in InDesign

Adobe changed or added many smaller features in InDesign CS5. Some of the more noteworthy changes include:

✦ Color swatches have been added to the Control panel. You can still access from the Swatches panel any color swatch used in a document.

✦ Pouring content into your layouts is easier. If you frequently place many objects at a single time, merely select several items to place — either text or graphics — and put them on the page.

✦ You can now more easily access the metadata and have it used as captions in documents. You can print lots of images and use their metadata as captions, such as the photographer name, product name, caption, or copyright information.

✦ Mini Bridge makes it possible to locate and place images into documents without leaving InDesign. Mini Bridge provides a small panel in which you can navigate your computer or network, locate items you might want to use in the layout, and place them into your document. The window is rather small, and you might still find it easier to simply click and drag items from your operating system, or you can use the Place command.

✦ Adobe has added new review and commenting features. You can share your designs across the Internet so that other people can provide feedback and input if you initiate them by using the new Review panel.

Drop a comment if you noticed any other productivity change