Solved

Adobe Illustrator for Mac - Images sizes are always bigger when used in PC

Posted on 2011-03-04
47
532 Views
Last Modified: 2013-12-02
Dear experts,

I am not an expert web developer, and I have to deal with a graphic designer on a web project. The designer does the graphical layout for everything in the website. The designer uses Illustrator and not Photoshop.

My problem is that the images I get from the designer are always too large that I have to resize them, while I am not really supposed to. I think it is the designer’s job to give me all images read to use. Whenever I point this out to the graphic designer, he says that on his Mac laptop, the design looks fine on a 100% zoom, which looks normal. But when I try the same images on my development PC, I see them very huge.

What do I ask the designer to do? Do I give him a certain size to work on, and if yes, what is that size? Or is there a certain benchmark that he should follow while working on Illustrator for Mac? I don’t know what actually the problem is.

Please advise!
0
Comment
Question by:feesu
  • 16
  • 14
  • 10
  • +1
47 Comments
 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 333 total points
ID: 35038132
First off, everyone needs to be viewing these images the same way. All modern browsers allow you to "zoom" the images as well as the type. Make sure that your browser is set to normal and that you are both looking at the image the same way.

Anyone developing for the web must be conscious of how their design will look on other user's machines. Adobe has a pay service that will let you see your web page the way users of other browsers see it, and Browsershots.org has a free service that does pretty much the same thing.

The unit of measure for web design is the pixel. Anyone preparing graphics for publication on the web must be mindful of the graphic's dimensions in pixels. Designing images to pixel specifications in Illustrator is not as straight froward as it is in Photoshop, but it can be done.

Any request for art should specify pixel dimensions. It is then the artist's responsibility to deliver the art to your specs.
0
 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 333 total points
ID: 35038209
As long as you are using a PC, I suggest that you use Foxfire as your development browser. There are many add-on's such as Firebug, Web Developer and Colorzilla, which many web developers find indispensable when developing a web page.

Of course, you still need to test your page in Safari, Opera, and of course IE 6, 7, and 8.
0
 

Author Comment

by:feesu
ID: 35040885
D_Brugge,

Thank you very much for your explanation. However, can't you give me a specific pixel measurement of a standard webpage that I give the graphic designer so that he works his drawings according to?
0
 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 333 total points
ID: 35041035
Yes I can, but web page sizes are no longer standard because web monitors now come in so many sizes, and some designers design for a fixed size and others make their page adjust to the size of the browser window.

It is said that 85% of the computer monitors in developed countries use a screen resolution higher than 1024 x 768. You are the best judge of your audience. If they tend to be young, trend setting types, you might go with a higher resolution.

If most your your audience is older folk who haven't upgraded since their computer was first installed, you might want to go with a smaller resolution. For an all around general setting, most major web sites are sticking with the 1024 x 768 settings.

That means that your web site should not be wider than about 990 pixels wide, because the browsers slider bar will take up some of the space on the side (refereed to as the browser's chrome)

There are folks who will tell you that the height should be small enough so that everything fits above the fold, that is to say, the user should see all of the important information without scrolling down, but more recent studies have found that not to be the case.

So in short, make any web image that is supposed to fill the page 990 pixels. (Some people go with 1000 pixels because this is an easier number to work with, and plan on a small amount of border that may or may not be hidden by the chrome.

Hope that this helps.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35042077
If the designer is designing for a paper page layout, that would explain why the images are so large.  Paper design is oriented towards 300dpi and screen design is 96dpi or even 72dpi.  12 inches on the monitor on my computer is about 1024 pixels.  12 inches on a paper layout would be 3600 pixels.  If you were measuring in inches, they would both be the same.  But browsers work in pixels so the images would appear quite different.
0
 

Author Comment

by:feesu
ID: 35045775
Dear experts,

The designer has just sent me the homepage drawing done by Illustrator on the size I asked which is 990px wide.

I opened it with Photoshop since I don't have Illustrator. However, the size seems too big, I went to Image/Image Size to find that the current size is width:3196px and height:4261px.

Why is that? Is the designer not able to get what I need or is it because he works with Mac and I use PC or is it because I am not using Illustrator?

What do I tell him?
0
 
LVL 3

Expert Comment

by:olliefelde
ID: 35047316
There's an error in translation going on. I work on Mac and this shouldn't be an issue. A thousand pixels is just that. Try this. When you open the files in Pshop it will ask you what dimensions to open it to. Tell it 990px wide at whatever your screen resolution is, either 72px or 96px per inch. If you're not opening it this way, try it by going to the file menu and choosing "Open As." You should then get the appropriate dialog.

On the flipside, your designer shouldn't allow it to be this difficult for you. As well, he/she shouldn't take the attitude of punishing you or condescending to you because you're on a different platform and don't do things his way.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35047395
I agree with @olliefelde but I would just resize it myself.  Your turn will come...
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 35049373
When you open a new file in Illustrator, you are asked to specify the color mode (RGB or CMYK) and to define the size of the artboard. You can enter the dimensions of the desired artwork in pixels, by typing the number followed by "px" or you can select "pixels" from the dropdown menu.

Once you have an artboard to the correct size, AND you create artwork to the size of the artboard, you can export that art as a gif, png, or jpg. If you set tge resolution depth to screen, they you should end up with the correct size artwork regardless of being on a Mac, Linix, or a PC.

Your designer should be able to give you files that are the correct dimensions.
0
 

Author Comment

by:feesu
ID: 35053829
Thank you all for your replies.

This designer might not be an expert, or might not have worked with web before, however, I am obliged to work with him on this project.

Now, after I informed him that since he is working with Illustrator, I should be receiving from him a webpage width of 990px and on a 72ppi, he edited the file and sent to me, however, when I received the file, I noticed that it's of the same physical file size in MB I received earlier on higher resolutions (I don't know if that should indicate that he didn't change anything), and in addition, when I opened it in Photoshop, I got the same old image size, 3200 of width on 300ppi!

Is that because I opened it with Photoshop, or is it that the designer did not actually change anything?
0
 
LVL 3

Expert Comment

by:olliefelde
ID: 35058500
When you open it with Pshop, what precisely is that process? Do you just double-click on the file? Do you go into Pshop and select File>Open? Tell us just what you do. There's a way to get this right and we'll help.
0
 

Author Comment

by:feesu
ID: 35059157
It is a .ie file, I double click it, and it prompts me with which application would I like to open it, and I choose Photoshop.
0
 
LVL 3

Expert Comment

by:olliefelde
ID: 35059318
Then what happens? Does it bring up the dialog box asking for dimensions/resolution? If not, then do the following. Close the file. Now go to Pshop and choose File>Open As>yourfilename.ie, and be sure to select the choice of Illustrator file in the pull-down menu within that dialog. Then it should open a secondary dialog asking for what colorspace, dimensions and resolution you want it to open to. Then type 990px width, where appropriate, and tab to the height field. Delete whatever's there and leave it blank. Choose the resolution, should be 72 dpi, then click open.

This should open it to the size you need. It's not as difficult as it sounds once you get the hang of it. But it is a little tricky at first.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 35060017
I am not familiar with the .ie file type. Olliefelde, can you enlighten me on this?

@feesu,

Ask your artist export the artwork to a common web format such as jpeg, .gif, or .png.
Go to file>export in illustrator an be sure to select "screen" as the file resolution.
0
 
LVL 3

Expert Comment

by:olliefelde
ID: 35062523
I'm not familiar with the .ie file type either. However, I haven't used CS5 yet so I assumed that it's possibly a new extension? It can be opened by Pshop apparently so I just went from there.
0
 

Author Comment

by:feesu
ID: 35062897
olliefelde:

>> Then what happens? Does it bring up the dialog box asking for dimensions/resolution?
Yes it does, and I - after your first comment - started to change the width to 990px and I got the proper size.

However, my question was, do I need to do this anyways? Or is it because that this designer is not doing his job properly?

D_Brugge,

I have received the images from the artist, and on several stages, as I have always complained from the big size of resolution. Whenever I used to open the image in Photoshop and check its size and resolution, I use to get that huge size I mentioned earlier in this post.
0
 
LVL 3

Assisted Solution

by:olliefelde
olliefelde earned 111 total points
ID: 35063036
Yes, the designer could do this better. It should come to you in a .jpeg, a .png, a .pdf or be posted to a development server so that you can view it as it will be posted to the web. For whatever reason, the designer's not doing this. Ultimately, you'll need someone to present it to you through a web browser just like the world will view it when finished.
0
 

Author Comment

by:feesu
ID: 35063054
olliefelde,

If, as I stated before, the designer sent me the .ie file saying that this is with 72ppi and 990px width, but when I opened it with Photoshop I got the prompt of size and resolution with default of 300ppi and a huge width, does that mean that the designer did not actually send it with 72ppi or it doesn't indicate that?
0
 
LVL 3

Accepted Solution

by:
olliefelde earned 111 total points
ID: 35063174
You cannot "publish" an Adobe Illustrator file to the web as such. The file would have to be converted into images (.jpg, .png, .gif) and html code if you wanted anyone to view the page. What the designer is sending you, by not being one of these types of file, is not something final. That's fine except that you're not a designer or web developer. So, my opinion is that the there's no way to tell what the designer's final product will be.

Let me clarify the apples and oranges:

Illustrator is a vector-based program. It is used to create line-art that is extremely crisp and infinitely scalable in size with no quality loss. It uses mathematical formulae to describe an image. This is great except that vector art isn't usable on a web browser. Work created within Illustrator must be converted to a web-friendly format as described above in order to be viewed through a web browser on a website.

Photoshop is a bitmap-based program. It is used to create, edit and manipulate continuous-tone images, i.e. images where every (or most) pixel is a unique color, such as a photograph of a flower. It is capable of creating images, or converting images, for use on the web.

The catch is that it is harder and more time-consuming to edit in Photoshop than Illustrator. So, until you've finalized a design it makes more sense to work in the simpler tool/program. The real issue is whether the designer is inexperienced or incompetent. The designer SHOULD be giving you something simple to approve or disapprove.
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 56 total points
ID: 35063176
@feesu, while it's clear that this could be done better by the designer, I find that being able to deal with what people give me to work with makes me a better web developer and more valuable.  I don't know the best way for you to deal with office politics where you are, but 'proving' someone wrong can often backfire in office politics.  The designer is giving you something you can use and other people might feel that you're being difficult instead of him.  Just depends on how they look at it.
0
 
LVL 3

Expert Comment

by:olliefelde
ID: 35063192
DaveBaldwin is absolutely right about this. I'm not sure we're anywhere near the original question at this point.
0
 

Author Comment

by:feesu
ID: 35063204
olliefelde,

Thanks for elaborating on that. However, that was not my question, and I am a web developer.

My question was, that if the designer is sending me the file claiming that it is done with 72ppi, and when I open it with Photoshop it shows 300ppi and not 72ppi, DOES THAT MEAN that the designer did not actually send me a 72ppi file?

I know, I can convert the .ie or .psd to web images, and do my work, but I just wanted to confirm those facts before I blame the designer for not being up to standards or having minimum level of experience with web.
0
 

Author Comment

by:feesu
ID: 35063218
DaveBaldwin,

You are right, and I usually finish the task or project, then point things out. I don't let things halt or distract me.

So after finishing this project, I would be very clear that this could be done in a better way next time!
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 3

Expert Comment

by:olliefelde
ID: 35063238
It's entirely POSSIBLE that the designer is setting it up right but it's not converting appropriately for a whole host of reasons. Ultimately, it would be better for the designer to send you elements as image files. That way, they are what they are not a conversion or interpretation.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35063247
That's good.  However if you have already done that and you're not seeing a change, I would be concerned that this person might be someone's favorite son or something and continued criticism might not be received well.  Doing good work isn't the only reason that people are hired.
0
 

Author Comment

by:feesu
ID: 35063251
But what if the size of the file is 2MB while it was with 300ppi, and after he claimed converting it to 72ppi, I found the the file is still 2MB, does that indicate anything?
0
 

Author Comment

by:feesu
ID: 35063260
Baldwin,

I was being generic on the matter of how I deal, not in specific about this designer. This is my first project with him :)
0
 
LVL 3

Expert Comment

by:olliefelde
ID: 35063262
Nope. Until it's run through an image converter that compresses it for the web it doesn't really mean a lot.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 35063265
feesu:

Change the suffix to .txt and upload it here for us to take a look at. (EE will not let you upload an .ie file)

My search of the web indicates that there is not a registered file format of .ie

Like I stated before. It is not any skin off of your designers nose to take the existing file that he has already created and export it as a jpeg (or .gif or .png) The effort involved is not much more than necessary for doing a "save as".

And yes, it is true that in an office environment you often have to "take what you get" and make the most of it. But in this case, even if you can't get your designer to provide it, you should at least know what "it" is that you want.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35063267
Actually, you can push the numbers around a lot.  You can specify '72dpi' in Photoshop and keep the same number of pixels (and file size) but the inches change to reflect how many inches the pixels represent at 72dpi.  The file size doesn't necessarily change.  And if it is a vector file he's giving you, the file size probably doesn't change at all.
0
 
LVL 3

Expert Comment

by:olliefelde
ID: 35063279
Exactly! Vector-art is resolution-independent so file size is irrelevant.

0
 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 333 total points
ID: 35064128
Also, if you are putting it on the web, resolution doesn't matter. Almost no monitors display at 72 dpi any more and the web browsers ignore that aspect anyway. They just see 990 pixels wide and display 990 pixels. If it's 990 pixels at 300 ppi, it displays the same if it is 990 pixels at 10 ppi.

The ppi or dpi only matters when the image is sent to a printer.
0
 

Author Comment

by:feesu
ID: 35068012
Ok, I have been confused enough in this :)
I am attaching the file as D_Brugge asked.
One more thing for me to start the development part, I used to get .psd files and find the layers inside which make it easier on me to use drawings for my webpage, buttons etc.. Here, I see one full layer, I think that's another disadvantage, isn't it?
Charisma-final-72ppi-togo.txt
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 35071096
This is an illustrator file. And yes, life would be much easier if you had separate files. I'll write more when I get back from work.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 35086973

Forgive me for taking so long to get back to you. The artwork that you uploaded caught me off guard. I was expecting something a lot different.

When a web designer and a artist get together on a project, there is no hard and fast rule as to who takes the lead in creating the design. Usually, but certainly not always, the web designer decides the mechanical aspects to the layout such as what content should be included and where it should go, how many columns there should be and if they should be fixed, liquid, flexible, etc., if menus should be drop-down, roll-over, cascading, animated, etc. and so forth.

Usually, once this is established, the html and css code is then generated and tested. While the framework is developed, the component pieces of art are created such as sprites, roll-overs, backgrounds, and such so that they can be incorporated and worked on. Then the major pieces of art are generated and put into place and tested.

What you have uploaded is a mockup of a page layout. My first question is, are you supposed to build the web sit based on this mockup? If so, are you planning on building it using Photoshop's slice tool to create a web site from slices?

If your answer is that you are going to build this using the Photoshop "slice" method, then take whatever the artist gives you and have at it. Stretch it, chop it up, do whatever you need to do to get the site made.

You should know, however, that this is not the way professional web sites are made. Photoshop makes crappy websites. The code is bloated, it's hard to edit, it makes no accommodation for people with disabilities, and it takes a very long time to load.

Also, I see that the design is 520 pixels wide against a 768 pixel background. There is no need to go this small nowadays.

My suggestion, if your CSS and HTML skills are not yet up to creating a page like this, is to find a ready made template that has the LAYOUT and FUNCTIONALITY that you need, and ignore the existing photos and artwork. (The ignoring the existing photos and artwork part is actually very hard to do) Then turn that template, along with the artwork and have your artist change the artwork in whatever way he or she sees fit, as long as the dimensions and file names stay the same.

That way, you will have a professionally written site with modern code, but a look and feel that is custom and meets your needs.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35087096
Interesting.  I downloaded the file, renamed it to PDF, and it says it's 10 x 14 inches.  Below is what it looks like.  Am I missing something?
Charisma.jpg
0
 

Author Comment

by:feesu
ID: 35088683
D_Brugge,

Is there anything that I should deliver to the designer? Is there any recommendation that I should deliver to the client who is dealing with the designer?
0
 

Author Comment

by:feesu
ID: 35092350
D_Brugge,

I am a web developer and I do have the html CSS experience to do this, however, as any other developer I learn something new every day.

I am not planning to use a template, I have my own CMS that I built from scratch. I usually apply approved designs to it.

I can see from your reply that the graphic designer is not up to standards, and has not worked with web sites before. So based on that, I repeat my previous question, is there anything I should ask him to do? What do I recommend on the client who is dealing with him on this website, for future cooperation?
0
 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 333 total points
ID: 35095477
I apologize for jumping to conclusions. It's very difficult using the current question/answer method to ascertain the level of expertise one is dealing with. That of course goes both ways. You have to determine if the "expert" knows what he or she is talking about as well.

Yes, I concur with you that your graphic designer is not up to standards.

As to what to ask for.

To start off, you needed to be handed files that are ready to place. This means files in the proper format ( i.e. jpeg, gif, png), cropped to the proper dimensions in pixels, with the proper amount of compression (in the case of jpegs).

In the case of web elements, you should specify the exact color in hexadecimal format that you need them to be (if matching colors to other elements) and again dimensions.

Some times it's easier to do the work yourself instead of trying to explain it. For instance, you may ask for a 400px X 300 px rectangle of color #7d7bd5 on a background of #dadadc with rounded corners with a radius of 8 px, and then cut it up into "9-slice" segments yourself, rather than try and explain 9-slice scaling.

Or you may say, "You know those buttons that you made me on that mock-up? I need those by themselves without any type, against a transparent background. And could you please export them as png files so that the background stays transparent?"

Of course, it's all about communications. You need usable artwork to get your job done. The more you can communicate to your designer your exact needs, the better off you are.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 35095495
@DaveBaldwin:

You missed the embedded jpegs.  Try changing the format to .ai. You will be warned that there are missing fonts, but you should see the logo art.
0
 

Author Comment

by:feesu
ID: 35098294
D_Brugge,

>> Or you may say, "You know those buttons that you made me on that mock-up? I need those by themselves without any type, against a transparent background. And could you please export them as png files so that the background stays transparent?"

I loved that response LOL
I'm gonna use it!
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 35100093
Yea, sometimes you have to give them a work flow..

 1) Open a new file,
 2) make it 20px X 53px, (remember, FIRST number is width, always)
 3) open master file,
 4) copy button
 5) paste in new file, (make sure no other elements were copied)
 6) make sure artwork is inside of artboard borders
 7) name new file buttn_01
 8) Edit>Export
 9) select png
10) give me the file.
Do not pass Go, do not collect $200!

0
 

Author Comment

by:feesu
ID: 35102425
D_Brugge,

Finally, based on what you've seen, and based on comments I got on page width and ppi from all of you experts, I need a final decision of width and ppi that I should go with, and ask the designer to go with, so that according to it, I ask him to send me all the objects in the specs you mentioned above (separate object with transparent background etc..).

What's the final width and ppi? 990px and 72px since he's using Illustrator? Or do I go with higher?
0
 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 333 total points
ID: 35110041
The ppi does not matter. Web browsers ignore any setting that you make for ppi. It only comes into play when sending an image to a printing device.

As for width. If you are setting up the html yourself, then each graphic element will be a different size, and you would want to give that specification to your artist.

As to the overall page design. I would say to go with a fixed page size of 990 pixels. Of course, if you have borders or padding in your CSS you will want to adjust the size of any graphics that go inside., but for general use, you'll find that 990 pixels will fit your needs best.
0
 

Author Comment

by:feesu
ID: 35159548
Thanks alot everyone, you were extremely helpful!
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 35159646
Are you ready to close the question?
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now