How to exclude transparent areas in Image Trace

I have a logo file, saved as PNG, that is black on transparent. Very simple file, just stylized black lettering on a transparent background. In Illustrator CS5, I can place that file, do a "Live Trace" in "Lettering" mode, and Illustrator will correctly ignore the transparent areas when I expand the trace. After expanding, I'm left with scalable paths and an easy way to change the fill color to have the logo work with my background.
Fast forward to Illustrator CS6. I try to do the same thing but a) there is no "lettering" preset for Image Trace and b) there is no setting I have yet found to cause Illustrator to ignore the transparent areas when I expand. If I then fill, everything inside the bounds of the placed image (the square containing the logo) is filled with that color. The only way I've found to get similar results is to go through the layers panel after the Expand and deselect each piece of the image that should not be filled. I have a hard time believing this is the desired approach.
I freely admit that I'm an Illustrator novice and I suspect that there is something one of you Illustrator experts thinks is obvious that I'm missing. I'd sure appreciate some guidance in the right direction.

I doubt that the Trace feature in CS 6 is a big improvement to CS 5
Here look what might help you with this you might even be able to do a better job in Photoshop.
I'm using your screen shot so the trace is not a good one but shows you the steps you can take to make this work better.
Even though it is an image you can edit the colors some what here I went to Edit>Edit Colors>Adjust Color Balance ad turn the Cyan down to "0" and move the black slide a bit higher as well.
The I did my trace and remove the clipping paths there are 2 clipping paths the way you remove the path and compund path for the square is to select one edge of the psth with the direct select tool, you need smark guides turned on to see the paths.
the hit delete and the hit delete again and repeat for the second compound path as such path willpreven the sqaure to becoming a background filled path.
It should be noproblem filling this without a Live Paint Group it is just that you are not familiar with what is happening to the art.

Similar Messages

RE: Transparent areas on images used inPictureButton

I have never had any success in getting Forte to recognize the transparent
areas of GIF images on PictureButtons. I use two different techniques to
achieve this "transparent" look:
(1) Monochrome bitmaps DO behave as truly transparent images, both on
PictureButtons and in OutlineFields, under all Forte's supported
windowing systems and no matter what you use for the FillColor of
the button or outline. (But then of course you can't use colours
in your image.)
(2) If the PictureButton's FillColor is Inherit or White, you will see
that any white pixels in your image appear grey. You can make use
of this by making the background of the image some colour which is
not used in the picture itself, and setting the FillColor of the
PictureButton to that colour. You have to choose this colour carefully.
Even if you pick a colour from the standard Windows 16-colour palette,
say red, you will find that it doesn't match the Forte colour Bright Red
under all possible Control Panel colour depth settings. The only
colours which work all the time are white, black and light grey (Forte's
Gray 2) but of course these are all colours you normally want to use
in the picture itself! If you are developing exclusively for Windows
clients, you can always use Gray 2, since the PictureButtons are going
to look this colour anyway, regardless of the FillColor you assign or
the button colour the user has chosen in the Control Panel Display
settings. (At least, this is so for V2 - I don't know about V3 but
from what you've said it sounds like it is the same.)
I would love to know if there are any other ways to do this because I
nearly went mad trying to make images on PictureButtons and OutlineFields
transparent under all 3 windowing systems!
Fiona Symon,
Babylon Software Pty Ltd.

I tried expanding the canvas (using Photoshop) to a 16 x 9 width-to-height ratio with Black fill. Worked perfectly in iPhoto.
Thanks for the tip about the wrong aspect ratio.

RE: Transparent areas on images used inPictureButtons

Thanks all for the responses.
I have talked with Forte Tech Support and there is a way to get this to
work. To get transparent areas in an image on a PictureButton, you
simply manipulate the FillColor of the PictureButton widget itself.
Apparently, Forte takes the fill color of the button and makes it the
transparent color for the image. For instance, if you set the fill color
for the PictureButton to white, then any white areas on the image become
transparent.
A Tech Note should appear shortly explaining this issue.
>
I have a GIF image with transparent areas that I'd like to use in a
PictureButton. Will Forte recognize the transparent areas in the GIF
format and color those areas with the system settings for buttons? I've
tried everything I could think of, but the transparent areas are still
being painted gray.
I am running Forte 3.0d on Windows 95.
Van Vuong
Lead Technical Analyst
Office: 972.985.5289
VoiceNow: 972.330.0822
Internet: [email protected]
PAGE NET

I tried expanding the canvas (using Photoshop) to a 16 x 9 width-to-height ratio with Black fill. Worked perfectly in iPhoto.
Thanks for the tip about the wrong aspect ratio.

Add ability to select background display color for transparent areas of image

Right now the background color for images with an alpha channel if always white. This makes Bridge useless for sorting through images where the primary color is white. It also looks like crap when you are doing a slideshow preview on a black background. It is only useful for people who do web page designs on a white webpage, but even then you can't tell if the image is cut out properly if it was cut from a white background. The only way to check an image is to load it into Photoshop and create a background layer, which is pretty slow for previewing an entire directory of images. The ability to set the alpha channel background color has been available for years in competing programs such as Thumbs+ so I am dumbfounded that it isn't yet in Bridge CS4.

Agreed! Even primitive Mac Finder preview can show transparent alpha channel! Most Image browsing programs have this ability. Bridge CS4 is becomming finally usable, but this feature is a must!

How to lighten dark areas in images with Aperture

Various image processors have re-light or fill-light capabilities that can bring shadow areas into better balance with the rest of an image. What are the ways Aperture provides to do this?

Aperture doesn't have a dedicated re-light or fill-light tool, but it there are a number of tools (and techniques) that can be used to do the same kind of thing. The actual tools that give best results will vary according to the scene and the type of image detail you want to relight.
The simplest is the highlight/shadows tool. Raise the shadows slider until all the shadow details you want have been brightened. If the adjustment is too extreme (resulting in loss of contrast) raise it a touch more and then apply the mid contrast slider to restore contrast.
If the tonal balance doesn't look right, finish it off with a levels adjustment (and vibrancy/saturation if some colours have lost their punch due to brightening)
If you find the results are not happening, it's likely the adjustment isn't working on the right range of data for you, so you can first use other brightening tools, like exposure and/or curves, to brigten the image, and then h/s + levels to finish off.
Here's an example I just worked on, using curves to brighten first, then h/s + levels to adjust the final balance:
There are many other approaches. All the tools can also be brushed into the image so they only apply to specific areas and/or tonal ranges (can be targeted at shadows, mids or highlights), multiple versions of the same adjustment type can be added ("add new xxx adjustment" from the adjust gear menu) and there are also a range of brushes (eg; dodge, overlay and contrast) that can help in getting things looking just right.
Regards,
Andy

Action batch export issue with image trace

So, currently I'm working on batch processing jpeg sequences using illustrator's image trace and distortion effects. I have batch exported the image traces of the sequences via Adobe bridge. Now I'm trying to create an action which opens the .ai files containing those image traces, apply a graphic style to the trace, and export a png from that. I'm banging my head against the wall trying to get this to work right now. If I do the steps (step by step... not using a recorded action) I want on a single file, it works great, but the moment I batch export using the action I've created, it puts the original .png image that the image trace was linked to, on top of the image. The result is a bunch of .png exports that look exactly like my original image sequence. If I add a "save" function to the action and open the resulting .ai files, I can see that the image trace vectors are in the file. The "linked png" however visible on the layer above those vectors. Anyone have any idea what I'm doing wrong? How do I get rid of that pesky linked image.
Also, for anyone who might be thinking that it has something to do with expanding the image trace before applying effects, this issue I'm running into, I've determined, is happening higher up in the hierarchy of the actions... If I simply make an action to open the image trace illustrator file and save it back out, the same issue occurs... placing the .png "linked file" on top of the vector image.
While I'm at it, I might as well ask if anyone knows how to change the illustrator default image trace preset.... Without being able to change it, or much less specify in the action sequence that I'd like to use a user created image trace preset rather than the default setting, it's greatly overcomplicating my workflow. Makes what could easily be one-step batch processing into two. Seems pretty silly if you ask me.
Please, if you guys have any insights on this, let me know. It's super frustrating... By the way, if you're wondering what type of effect I'm going for, the idea (as well as some explanation into their own process) starts at 12:44 of this video (http://vimeo.com/77427470).
THANKS!

Just wanted to let you guys know, for anyone who might be having my same issue... My home computer, even after a fresh install of Illustrator, was still placing the linked jpeg over the traced vector shapes when batch exporting... I did however find a workaround. Rather than using Bridge CS6 for the batch image tracing, I used Bridge CS5 to trace in Illustrator CS5. Then, I used Illustrator CS6 to batch export an action that imported and applied an effect to those image traced sequences. When you do this, it forces you to expand the tracing on import (because of the difference in Illustrator versions I'm assuming). This way, when you batch run the action, it's already working with expanded vector shapes. Not sure why this works, but it does.
Also, I was having some issues getting Illustrator to apply the graphic style when batch exporting. I got it to work by copying an object with that particular graphic style to the clipboard, then adding in the action I was running a "paste" command, followed by a "clear" command. I can only assume that Illustrator was having issues loading custom graphics styles while batch exporting. The paste/delete technique is annoying, but gets it done.
Anyways. Just wanted to check in on this one. I'm happy I was able to muscle my way through it all.

How to avoid transparent background converting to white in smart object(psb )when image trace High Fidelity as we have the option of ignore white upto 16 colors trace.

i have a psd image file in photoshop cc 2014 that has transparent background layer. I wanted it to convert to vector. The best option i saw was to first convert it to smart object in photoshop via Layer->Smart Objects-> Convert to smart Object. then exported it to a psb. Then i opened the file in illustrator and applied the image trace tool but the transparent background got converted to white but i had the option of ignore white upto 16 colors trace. But in case of High Fidelity Conversion, the ignore white option is not available, what should I do now?

after using high fidelity image trace i hit expand, then i went to layers and hit the drop arrow by my thumbnail, which then shows <Group>,hit that drop arrow and it will show a list of all your paths, the very bottom one was my white background, you can click the eye or delete that path and it disappeared for me. i was using a png file with a transparent background, and nothing else worked for me, it always converted with white background, i never saw this mentioned anywhere, and accidentally discovered it, hope it works!!!

Preserving 'White' areas, but not backgrounds, in an image trace

Hi there all
I've got a little graphic that I'm working on at the moment. I am trying to trace it using the Image Trace feature in illustrator.
Everything's hunky dory apart from the fact that the original graphic has a lot of white features on it that I want to preserve. These white bits are not bordered so, in the main page of illustrator, they merge with the white background. When I go to use Image Trace, I can either select "Ignore white" which leaves out all of this white detailing, or I can deselect it which means that the trace then includes the white background and the whole image is set into an annoying box.
Does anyone know how I can remedy this? I know in Photoshop, there's that checked background that shows when your work surface is empty. Is there a way of getting this same thing in Illustrator?
Thanks!
CF

CF,
It rather depends on the image.
With Illy, you can use View>Show Transparency Grid or View>Show Grid to see whether there is a background, just as in Photoshop.
In that way you can get rid of that non colour appearing as white, but it will not be included in Image Trace because it is not (included in the image).
But if the image itself contains a white background, Image Trace will be unable to discern that from any other part of the image.
So you may need to have the image in a format without the white background, such as PNG24 instead of JPEG, or with another colour as background.

How to create transparent image at run-time?

How to create transparent image at run-time? I mean I want to create a (new) transparent image1, then show other (loaded) transparent image2 to image1, then show image1 to a DC. The problem is - image1 has non-transparent background...

i'm not sure, but you can set the alpha value to 0 in all pixels which are 'in' the background..
greetz
chris

How to save transparent background images to have transparent background thumbnails with Photoshop 2014?

In old versions of Photoshop there was a feature that made thumbnail images have a transparent background. I'm a CC member using Photoshop 2014 on a MacBook Pro running OS X 10.9.4 and every thumbnail of a transparent background image I've created in Photoshop 2014 appears on my desktop with a solid white box background that has a thin black outlined box inside of it. How do I save the transparent background images I've created in Photoshop 2014 so they will appear on my desktop as thumbnails with a transparent background? I'd like to continue to be able to replace the default background-less folder icon that that appears on files with transparent background thumbnails to customize my files as I use to do with older versions of Photoshop.

If your layered document has a Photoshop background layer it visibility need to be set off when saving a PNG or Gif file for Photoshop background layers do not support transparency.
Thumbnail may be a bit more complicated than you think. I do not use Lightroom, and only occasionally use the bridge. I believe Lightroom and Bridge keep thumbnails they develop for image files in their library databases and caches. Other programs do not have acces to these. RAW Files and Image files have Jpeg previews stored in then. I believe most application use these previews jpeg to create thumbnails. Jpeg format does not support transparency.
Icon on the desktop are not always thumbnails some are embedded icons in application modules other are icon in dll these may well have transparency. However image file on the desktop have generated thumbnails. However you can create a shortcut for an image png file and create a icon with a transparent background for the png file and change the shortcut's icon for the png file to the transparent ico file you created for it.
Also many Photoshop release ago an Adobe module created Thumbnails for image files in Windows File explorer and most likely system file dialog. Adobe stopped supporting that stating Microsoft changes how windows works.
Today I use FastPictureViewer Codec Package to generate image thumbnails for image files including RAW and PSD files in File Explorer and system file dialogs.
I don't use a Mac don't know what available for your Mac.

How to get transparency scroll bar to view background image of canvas.

HI,
How to get transparency to path in canvas to view background image in canvas using scroll bar control.?
This is my present output:
My Xaml Code:
<Grid Height="auto" Name="grid1">
<TabControl Background="Bisque">
<TabItem Header="Tools">
<Grid Height="1000" Width="1000" Name="grid">
<Border BorderThickness="0.2" BorderBrush="Black" Height="820" Width="820" ClipToBounds="True" Margin="90,99,90,81"></Border>
<Grid>
<Button Content="Original Size" Height="23" Name="btn_Original" Width="75" Click="btnOriginalSizePosition" Margin="4,4,921,973" />
<TextBox Height="20" HorizontalAlignment="Left" Margin="62,49,0,0" x:Name="txtNoOfZones" VerticalAlignment="Top" Width="49"
MaxLength="2" PreviewTextInput="txtNoOfZones_PreviewTextInput"/>
<TextBox Height="20" HorizontalAlignment="Right" Margin="0,71,890,0" x:Name="txtSec" VerticalAlignment="Top" Width="49" PreviewTextInput="txtSec_PreviewTextInput" MaxLength="3"/>
<Button Content="OK" Height="32" HorizontalAlignment="Left" Margin="117,59,0,0" Name="btnNoOfZones" VerticalAlignment="Top" Width="39" Click="btnNoOfZones_Click" />
<Label Content="Zone Number selected :" Height="28" HorizontalAlignment="Right" Margin="0,0,451,0" Name="lblZone" VerticalAlignment="Top" />
<Label Content="Sector Number in selected Zone :" Height="28" HorizontalAlignment="Right" Margin="364,22,451,0" Name="lblSector" VerticalAlignment="Top" />
<Label Content="Filled Color applied in selected sector :" Height="28" HorizontalAlignment="Right" Margin="336,44,451,0" Name="lblColor" VerticalAlignment="Top" />
<Label HorizontalAlignment="Left" Margin="569,0,0,0" Name="lblZoneNumber" Height="28" VerticalAlignment="Top" />
<Label Height="28" HorizontalAlignment="Left" Margin="569,22,0,0" Name="lblSectorNumber" VerticalAlignment="Top" />
<Label Height="30" HorizontalAlignment="Left" Margin="569,44,0,0" Name="lblFillColor" VerticalAlignment="Top" FontWeight="Bold"/>
<Label Content="Sectors :" Height="28" HorizontalAlignment="Left" Margin="7,67,0,905" Width="69" />
<Label Content="Zones :" HorizontalAlignment="Left" Margin="13,44,0,928"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="4,32,0,0" Text="Change No.of Zones, sectors below and click OK button" VerticalAlignment="Top" Width="294" FontFamily="Cambria" FontSize="12" FontStyle="Italic" FontWeight="Bold" />
<RadioButton Content="Single Sector" Height="16" HorizontalAlignment="Left" Margin="744,24,0,0" Name="rBtnSingleSector" VerticalAlignment="Top" GroupName="Selection"/>
<RadioButton Content="Sector Zone" Height="16" HorizontalAlignment="Left" Margin="744,44,0,0" Name="rBtnSectorZone" VerticalAlignment="Top" GroupName="Selection"/>
<RadioButton Content="Circular Zone" Height="16" HorizontalAlignment="Left" Margin="744,64,0,0" Name="rBtnCircularZone" VerticalAlignment="Top" GroupName="Selection"/>
<RadioButton Content="Panning" Height="24" HorizontalAlignment="Left" Margin="744,4,0,0" Name="rBtnPanning" VerticalAlignment="Top" Width="74" GroupName="Selection"/>
<Border x:Name="clipBorder" BorderBrush="Black" BorderThickness="0" ClipToBounds="True" Height="810" Width="810" Margin="95,104,95,86" CornerRadius="10">
<Canvas x:Name="CanvasPanel" Height="800" Width="800" Background="Transparent" ClipToBounds="True"></Canvas>
</Border>
<RadioButton Content="Random Color" HorizontalAlignment="Left" Margin="868,5,0,979" Name="rdBtnRandomColor" GroupName="rdbtnGroupFillColor"/>
<RadioButton Content="Red Color" Height="16" HorizontalAlignment="Left" Margin="868,24,0,0" Name="rdBtnRedColor" VerticalAlignment="Top" GroupName="rdbtnGroupFillColor" Foreground="#FFF81010" FontWeight="Bold" />
<RadioButton Content="Green Color" Height="16" HorizontalAlignment="Left" Margin="868,44,0,0" Name="rdBtnGreenColor" VerticalAlignment="Top" GroupName="rdbtnGroupFillColor" Foreground="#FF175F17" FontWeight="Bold" />
<RadioButton Content="Adjacent" Height="16" HorizontalAlignment="Left" Margin="435,81,0,0" Name="rdBtnAdjacent" VerticalAlignment="Top" GroupName="Selection" />
</Grid>
</Grid>
</TabItem>
<TabItem Header="Change Background">
<Grid Height="1000" VerticalAlignment="Top" Background="Bisque">
<Button Height="70" Width="70" Margin="6,1,892,929" Name="btnBrowseImage" Click="btnAll">
<Image x:Name="browseIcon" Source="D:\WPF\Projects\TabControlVRI_18_12_2014\Images\img.png" MouseLeftButtonDown="Image_MouseLeftButtonDown_1"/>
</Button>
<Button Height="70" Width="70" Margin="92,1,806,929" Name="btnCenterPoint" Click="btnAll">
<Image x:Name="centerIcon" Source="D:\WPF\Projects\TabControlVRI_18_12_2014\Images\center.jpg" Width="54" Height="48" />
</Button>
<Button Height="70" Width="70" Margin="179,1,719,929" Click="btnAll">
<Image x:Name="boundaryIcon" Source="D:\WPF\Projects\TabControlVRI_18_12_2014\Images\Path_Simple.png" Height="44" Width="49" />
</Button>
<Image Name="imgBackground" Height="800" Width="800" MouseLeftButtonDown="imgBackground_MouseLeftButtonDown">
</Image>
</Grid>
</TabItem>
</TabControl>
</Grid>
C# code:
OpenFileDialog op = new OpenFileDialog();
ImageBrush ib = new ImageBrush();
private void Image_MouseLeftButtonDown_1(object sender, RoutedEventArgs e)
op.Title = "Select a picture";
op.Filter = "All supported graphics|*.jpg;*.jpeg;*.png|" +
"JPEG (*.jpg;*.jpeg)|*.jpg;*.jpeg|" +
"Portable Network Graphic (*.png)|*.png";
if (op.ShowDialog() == true)
ib.ImageSource = new BitmapImage(new Uri(op.FileName));
imgBackground.Source = new BitmapImage(new Uri(op.FileName));
CanvasPanel.Background = ib;
Please help me out to get transparency for path in canvas to view background image in canvas.
The complete code is in below link:
https://onedrive.live.com/redir?resid=876CFAE94C306176!112&authkey=!AC1sQIYwyoRYT_o&ithint=file%2crar
Regards,
Viswa.

Hi ViswAmmu,
>>Please help me out to get transparency for path in canvas to view background image in canvas.
If I'm not misunderstanding, I think you just need to loop through all Canvas.Children and set Opacity property for them:
private void Image_MouseLeftButtonDown_1(object sender, RoutedEventArgs e)
//Loop through all children items
foreach(UIElement v in CanvasPanel.Children)
v.Opacity = 0;
op.Title = "Select a picture";
op.Filter = "All supported graphics|*.jpg;*.jpeg;*.png|" +
"JPEG (*.jpg;*.jpeg)|*.jpg;*.jpeg|" +
"Portable Network Graphic (*.png)|*.png";
if (op.ShowDialog() == true)
ib.ImageSource = new BitmapImage(new Uri(op.FileName));
imgBackground.Source = new BitmapImage(new Uri(op.FileName));
CanvasPanel.Background = ib;
Screenshot:
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Palete Image trace: How to change the default settings for icon?

Hi!
New palette and action Image tracer is a good step forward and work better, thank you.
This palette has a built-in icons, which significantly accelerate the selection. How do I change the default action?
I know that you can save presets, but this is different. The icons are even faster and more practical.
eg I want to icon B & W automatically have enabled the option "Ignore White".
Best Regards!

No, there's no way to do that, and that's because Lightroom works best as a single catalogue. You have metadata fields like Job which can track individual assignments.
What you could do is create an empty catalogue with settings as you want, then copy the file each time you want to set up a new catalogue.

Going from PSD file to Illustrator image trace: Background not transparent

Okay guys so a friend has drawn me a "man" in Psd and I want to convert it in AI because I don't want it to look very pixely (great scientific term). The man is on a transparent layer as below:
I was then able to bring it into illustrator fine. I used the image trace function and got some great results. The image looks more as I intended.(below). The only problem is the transparent layer goes and is replaced by a white layer. This "man" needs to be placed on top of other elements and so the bg needs to be transparent. I've scoured the forums but couldn't find a conversion topic specific to the image trace function. Is there a way to do this without the bg turning white? Am I importing the file wrong into illustrator? Is it the settings of the image trace function? I'm very new to illustrator so would very much appreciate all the help I can get.
Cheers,
Cam.

look at your trace settings and (in CS5 at least) tick Ignore white.

Photos app no longer displays transparent areas of photo properly. How to fix?

Hi whenever I download images to my ipad with transparent backgrounds (for use with Photoshop for example), the ipad used to display the transparent area properly as white. Then when you tapped, it would display them as black. For some reason, it now just defaults to displaying them as black. Which is fine if you have something white in color, but anything black disappears and there is no way to view it. Is this a bug? Any way I can fix this?

Let's assume you are in your camera roll. Now do the following:
1. Click on the home button once to get out of the camera roll
2. Double click on the home button. (Now you should see a number of icons on the bottom of the screen. These are the applications that are currently open).
3. Scroll sideways until you see the "Photo" app.
4. Tap and hold the Photo icon until it jiggles and there is a red "close" button on it.
5. Tap that red button and you'll see the icon disappear.
6. Click the home button once to get back to your desktop.
Now you have successfully closed the app and opening it anew will get rid of your problem.

How to separate content area from the image area in cs6

how to separate content area from the image area in cs6? looks just fine in design view but when opened up in explorer my text /content area is over the image area. the content is suppose to be below the image not over it. How do I move it down? Everything I have tried has not worked ;(

Is your image in the CSS (background) or the HTML (foreground)?
Try copying and pasting this code into a new, blank document. Change placehold.it images to your own. Save and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with CSS 2-Col Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
/**CSS Reset**/
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
img {
    width: 100%;
    vertical-align: baseline;
/**Layout**/
body {
    padding: 0;
    width: 90%; /**adjust width in px or % as desired**/
    margin: 0 auto; /**this is centered**/
    background: #CFF;
    color: #505050;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    box-shadow: 2px 2px 4px #333;
header {
    margin: 0;
    padding: 0 1%;
    width: 100%;
    background: #B00202;
    color: #FFF;
/**top menu**/
nav {
    background: #EAEAEA;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold
nav ul {
    margin: 0;
    padding: 0;
nav li {
    list-style: none;
    display: inline-block;
    margin: 0 3% 0 5%;
/**menu link styles**/
nav li a {
    color: #666;
    text-decoration: none;
    line-height: 2.5em;
    padding: 6px;
    border: 1px solid #CCC;
/**on select or mouseover**/
nav li a:hover, nav li a:active, nav li a:focus {
    background: #CCC;
    color: #505050;
#wrapper {
    background: #EAEAEA;
    overflow: hidden; /**float contaiment**/
/**main content**/
article {
    padding: 0 2%;
    background: #FFF;
    float: left;
    width: 70%;
figure {
    width: 80%;
    margin: 4% auto 4% auto;
    text-align: center;
/**right sidebar**/
aside {
    padding: 0 2%;
    float: left;
    width: 30%;
footer {
    clear: both;
    background: #B00202;
    color: #FFF;
    text-align: center;
    margin: 0;
/**typography**/
header h1, header h2 {
    display: inline;
    color: #F5DD83;
    padding: 0 1%;
h3 {
    color: #2294AE;
    margin-bottom: 0
p { margin: 0 0 1em 0 }
figcaption {
    text-align: center;
    font-style: oblique;
    font-size: small;
    color: #2294AE;
</style>
</head>
<body>

<header> <h1>Sitename</h1>
<h2>| Responsive CSS Layout</h2>
</header>

<nav>
<ul>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
</ul>
</nav>
<div id="wrapper">

<img class="banner" src="http://placehold.it/1056x100/198EBA/FFFFFF&text=Banner.jpg" alt="banner" />
<article> <h3>Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<figure> <img src="http://placehold.it/500x325" alt="placeholder">
<figcaption>Figure 2 Caption</figcaption>
</figure>
</article>

<aside> <h3>Aside</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<hr>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<hr>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</aside>
</div>

<footer> <small>© 2014 Your Site Name. All rights reserved</small> </footer>
</body>
</html>
Nancy O.

How to exclude transparent areas in Image Trace

Similar Messages

Maybe you are looking for