Scaling Graphics for Web

I have a question for all Web Designers / Developers. I typically like to create my web graphics large, due to flexibility, retina display etc. The problem lies when I need an image to fit a container. Resizing the image stretches the image horizontally or vertically, all proportion is lost. Content Aware Scale is an option I've tried but getting the dimensions correct for horizontal and vertical appears to be a hit or miss. Is there a solution to this dilemma ?

Similar Messages

4 questions on export/importing graphics for Web and Photoshop.

Hi, I have 4 questions here, and if you can answer one or more, I'd be happy!! :-)
1. In general, can there be a loss of quality when I export a file from Illustrator CS3 to Photoshop CS3, and then re-import it into Illustrator?
My guess is that you can switch applications with one single file, but you have to know what you're doing (any advise? I'm working with files that contain both text with either illustrated graphics or photos).
2. When I switch applications like that, which one is the final application I should save my final work from (for use in print and web)? Does this matter at all? (Example: I have text created in Illustrator. I export it into Photoshop and add a filter, and maybe a blured-layer of the the whole graphic.)
3. After completing the steps in the example above, and I do re-import it all back into Illustrator, the image appears with horizontal path-like blue lines, that let me slice the photo/text if I wanted to. Why does it do this and how do I get rid of those blue lines?
4. When exporting a file for web, what options are you setting for .gif and .jpg in order to NOT see its white background/frame around graphic?

1. Yes. The artwork will be rasterized to a fixed resolution in Photoshop. When re-imported it may appear the same, but it will have limited resolution on output, whereas Illustrator vector art has no (or infinite) resolution.
2. Depends on the artwork and what the client or printer has requested. If you can keep the text editable in Illustrator (blur and some Photoshop filters are available) then you'll have a more versatile and resolution independent file than you would if you switched to Photoshop. In the end, if the resolution of you art is adequate, it's up to you which is better for you to work with, based on your skills and experience. Keep all working files so you can make changes to artwork imported from one program into another.
Some features you might enjoy: You can place Illustrator files into Photoshop and make them Smart Objects. They remember they are Illustrator files and can be edited in Illustrator at any time. Rotate, scale, or distort the artwork in Photoshop and it is re-rendered a the PSD file's native resolution. In CS3 you can add filters to Smart Objects while keeping the vector data intact.
3. I have read about this, but as I'm not fully up on CS3 and don't have it installed on my main system I can't help.
4. To not see a white background for JPEG use a different matte colour. JPEGs cannot be transparent, so some colour must show where you want transparency. for GIF, the same applies, but you can turn on transparency. The artwork will be transparent, but the matte colour will determine how the anti-aliased edges are rendered. Use a matte colour that's as close to your expected background as possible or choose None. PNG 24 supports 8-bit transparency, which looks best of all, but is not supported by MS Internet Explorer versions 6 or lower.

Converting illustrator graphics for web

what is the best way to convert Illustrator CS6 artwork for use on a website? I've tried Save for Web > PNG24 but the results are still not great when viewed in Preview or on my web browser.

Many thanks once again Jake. Your point about creating the image at the exact size as for final use is the information I had been looking for. I had suspected this to be the case but could never find any reliable confirmation on forums/google etc, so thanks for that. I've also just noticed that when creating a new file there is an option to increase the ppi resolution to 300, which seems to be an obvious solution to achieving sharper images. Thanks once again for your help, Jake

Graphic for web , aspect ratio 16/9 to be displayed in any monitor

i have to realize an animation 15 sec as intro for a web page, what is best preset in motion to wirk with hdv? dvdpro?
and what is the right deliver format for web? ( web page maker asked me an AVI i don't have in compressor that extension, i am supplying an h264)

hi,
work in any preset you like. It depends on what footage you are using if any. You will just want to make sure its set to anamorphic so it will be 16 x 9.
When you deliver you can choose what size ( ie width and height in pixels) to output at.
As has been discussed here recently avi is a container for many different flavours of codec. I would ask the web page man to be more specific ( and not to choose an avi style but thats my opinion ). Compressor doesnt save as this so you will have to save as some other format and then convert with a someother software. Unless there is a quicktime extension like Perian or flp4mac that handles it?
hth
adam

Crisp ,Sharp, Bright Shiny Graphics for web?

Hello all...I hope you guys will answer my question..How to create nice looking professional crisp sharp bright shiny images in Adobe Photoshop and Fireworks..What actualy do i have to consider...?Generally my designs are not crispier and it always saddens me..

azsmatswabi,
I would suggest your posting in the forum(s) of the application(s) you create the artwork in, and that you post images (using the Camera icon to avoid delay by queueing).
Is Illustrator out of the question?
Depending on the nature of the images, you may consider saving for the web as PNG, GIF, and JPEG.

Colors turn neon when opening a previously saved for web graphic

Whenever I flatten and save a graphic for web and try to go back and reopen it, all of the colors go to a funny neon. It doesn't let me adjust the colors back completely either. It also happens when I open screenshots. Any idea why this is happening all of the sudden? It didn't used to do this and then just started. I haven't changed anything except maybe did an update to Photoshop. Any ideas?

I have my settings at custom. Color management is set to "preserve embedded profiles."
My working spaces are prophoto RGB for RGB and US Web Coated SWOP v2 for CMYK.
I haven't ever gone in and changed any of these before. Should I?

All graphics / vector in Save for Web are getting blurry / unsharp from Illustrator

All graphics / vector in Save for Web are getting blurry / unsharp from Illustrator. Same problem with save for web in Photoshop. Frustrating to be working as a designer and not be able to create sharp logos for mail sign, word templates, PPT templates etc etc. I purchased this Adobe Creative Cloud package in Sept, and are working on my Mac HD, OSX, Vers 10.9.4. I have been using the same programs on a PC for years and never had this same problem. Its frustrating!! What to do??

gif, jpg and png are pixel formats, so please clarify what the problem is supposed to be.
Screenshots or posted files might help.

Adobe media encoder CS4 - alised graphics and small black bars at 480x360 for web---HELP!

I recently installed the CS4 premiere software with Adobe Media encoder. I encode video for the web.
I have been a professional web video producer for over 10 years and have been using adobe products my whole career
My issues are:
1) I can not get clean edges on my graphics when exporting a flash video (.flv or .f4v) using "field order: progressive" as it should be for web output. All my graphics are high quality and I have tryed many formats (.eps, .psd, .gif ,jpg, .pnd) but once I change the field order drop down in the encoder settings to "(none) progressive" the graphics become alised...
2) My videos which are a size of 480x360 now have small black bars at the top and bottom after encoding the original down to 480x360. I have tried to crop the video so the bar go away but the whole video get fuzzy...WTF
I have spent so many hours reading and searching trying to fix these two issued and I am thinking that I am going back to my old software and discrediting the new adobe product every chance i get!!!!!!!!!!
I was previously using premiere pro 1.5, editing video and graphics and then exporting an uncompressed .mov file and then used Flash 8 Video Encoder to render a .flv file. This produced great video with crisp graphics.
PLEASE HELP

Stan,
I was using the on2VP6 codec at data rates from 275k to 400k with good results. -- with the new CS$ endcoder i am used h.264 at 500k to 700k, video quality looks good but the graphic overlays look like alised crap. In the encoder settings the edges of the graphics get jaged when I make the field order progresive...
I am starting with DV NTSC video at 720x480.
I am going to go back to my old work flow and test it. The settings are a bit different from premiere pro 1.5 to CS4 -- in 1.5 i could export out an unconpressed .mov with square px and then bring that large file to flash media encoder to create the .flv

How to use chart engine for web dynpro java(EP) for Graphics generation.

Hi Frndz..
now lookiing out for different types of dynamic graphics generations according to my requirment, n i saw the followiing blog
Testing BusinessGraphics in Web Dynpro for Java
Itz very nice to see that we can generate planty of types, but here our server is EP 7.0(not CE 7.1) and i gone thru these links also
http://help.sap.com/saphelp_nwmobile71/helpdata/en/86/243f403f0a9354e10000000a155106/frameset.htm
http://help.sap.com/saphelp_nwmobile71/helpdata/en/0b/79553b066d9414e10000000a114084/frameset.htm
https://help.sap.com/saphelp_nw04/helpdata/en/0c/95c83956852b51e10000000a114084/frameset.htm
here it seems to be Chart Engine n Chart Designer is mainly for BSP(R3), how best we can use this for web dyn pro java.
Thanks in Advance
Regards
Rajesh

hi
if you want to use BusinessGraphics in WebDynpro java you have to configure IGS.
IGS Configuration
https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/4846ac90-0201-0010-099d-d3b4e271849c
Business Graphics docs.
https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/3261cd90-0201-0010-268c-d8d72e358af6
ChartDeigner Usage
http://help.sap.com/saphelp_nw04/helpdata/en/18/d4d43fb9490c65e10000000a114b1d/frameset.htm
Generating Gantt chart using web dynpro business graphics

Is Fw really better for web graphics?

Ok, so I've downloaded the Fw trial to see how it's better
for web graphics than Photoshop. With Photoshop the usual problem
is that I have to mess around to turn on/off layers, copy parts of
images into new images to export transparent logos, tabs etc. so I
hoped that Fw have some intelligent slice system for one step
exports. Unfortunately I haven't been able to find it. Maybe I'm
wrong but it seems to me that Fw has a very primitive flat slicing
system, no overlapping is possible. So for a very basic example if
I have a background graphics on the top of the page that I want to
export (not the entire page) and a logo *on* it that I want to
export as a transparent png or maybe just as a jpg including the
background, it's impossible, because the logo slice will divide the
page into rectangles no matter what. I don't care about
HTML/CSS/whatever I just want to export overlapping graphic parts
in one simple step by properly defined slices. Looks like I
couldn't find the one step solution I hoped for in Fw. Am I missing
something?

I. G. wrote:
> Ok, so I've downloaded the Fw trial to see how it's
better for web graphics
> than Photoshop. With Photoshop the usual problem is that
I have to messing
> around to turn on/off layers, copy parts of images into
new images to export
> transparent logos etc. so I hoped that Fw have some
intelligent slice system
> for one step exports. Unfortunately I haven't been able
to find it. Maybe I'm
> wrong but it seems to me that Fw has a very primitive
flat slicing system, no
> overlapping is possible. So for a very basic example if
I have a background
> graphics on the top of the page that I want to export
(not the entire page) and
> a logo *on* it that I want to export as a transparent
png or maybe just as a
> jpg including the background, it's impossible, because
the logo slice will
> divide the page into rectangles no matter what. I don't
care about
> HTML/CSS/whatever I just want to export overlapping
graphic slices in one
> simple step by properly defined slices. Looks like I
couldn't find the one step
> solution I hoped for in Fw. Am I missing something?
>
>
>
>
>
In a word. Yes. It's designed to work with screen graphics,
and handles
both vector and bitmaps well at the same time. It's got quite
a few
more web-centric workflows than Photoshop.
Fireworks CS3 supports multiple pages. Each page supports
it's own web
layer, so you have much more control over slices and can
avoid the
problems of overlapping slices this way.
Overlapping slices don't work because it's impossible for FW
to
determine which one is the most important - and should be
sliced in whole
>>So for a very basic example if I have a background
> graphics on the top of the page that I want to export
(not the entire
page) and
> a logo *on* it that I want to export as a transparent
png or maybe
just as a
> jpg including the background, it's impossible, because
the logo slice
will
> divide the page into rectangles no matter what.<<
I'm not clear on what you're trying to do here as you seemed
to have
left some information out. Assuming you want a repeating
background
image and as separate slice for the logo.
Draw a slice that covers the width of your background, by
however many
pixels tall you need. Either lower on the page or on a
separate page
plave the logo and slice it as well. As you are not concerned
about the
html or CSS it's pretty straightforward from there. Just
export the
slices, and tell FW not to include unsliced areas. In your
html, set you
background image as a background image and your logo either
as an inline
image or as a background image within another containing div.
HTH
Jim Babbage - .:Community MX:. & .:Adobe Community
Expert:.
http://www.communityMX.com/
CommunityMX - Free Resources:
http://www.communitymx.com/free.cfm
.:Adobe Community Expert for Fireworks:.
Adobe Community Expert
http://tinyurl.com/2a7dyp
See my work on Flickr
http://www.flickr.com/photos/jim_babbage/

Creating Graphics destined for Web & Television

I am having issues with creating graphics for a video destined for both web and tv.
Because I am going to DVD, the video needs to be interlaced (I will get best quality on my interlaced video assets). I created interlaced graphics and everything is great. Now, in order to deliver this video to the web, I must de-interlace the video. The problem with de-interlacing is that the video looks fine, but the graphics get ugly stairstepping on them.
What is the best way to get smooth clean graphics when the video is destined for both web and television?

The biggest issue is that I must create the video as interlaced because I am working with multiple interlaced source materials. The video is then going to DVD as well as web. It makes sense for me to have the final video be interlaced so I can preserve the full quality of my source materials and get smooth movement on a television monitor.
How do I then deliver this video to the web with clean graphics? I must deinterlace for the web and I am losing half the resolution of my video. The deinterlacing makes my graphics stairsteppy and ugly.
Anybody have a suggestion?

Need help creating smooth graphic with transparency for web use

I have created a logo that is mostly white with white text and will appear over a textured background image. The logo contains text that I've converted to outlines. I've tried saving it as both a .gif and a .png, but when it's imported into iWeb, the outline of the graphic looks jagged and rastered. When viewed in Photoshop, it looks OK as a .png, but not great as the .gif.
I've tried saving it out as RGB, indexed color and greyscale, using PhotoShops "save for web" function or just saving it as 72dpi myself. I don't know how to get the edges to remain smooth. Any advice would be greatly appreciated.

Thank you J - here's the weird thing. I actually HAD saved it as a PNG24, and it looked fine on my machine. When I sent it to my client, who used it on his iWeb page, it looks jagged.
After I got your answer, I went to his iWeb page and downloaded the same background image he's using and imported it into a Dreamweaver page on my machine, and placed the same PNG logo over top - it looks as crisp and clean as a whistle. I have to assume that something's happening when he imports it into iWeb. Since I know zero about iWeb, I guess I will have to post another question on their forum, unless anyone knows what could be causing this.

IBook for Graphic and Web Design

Hello,
I'm thinking of buying my sister's iBook (since she doesn't really use it). I was talking to a mac rep about using the iBook for Graphic and Web Design purposes and I wanted to get other people's opinions on how Adobe Creative Suite and Dreamweaver have performed in other people's iBooks.
Thanks!

Running a lot of applications simultaneously, or a few high processing type applications such as Adobe's is what takes up RAM. OS X utilizes Hard Drive available space to make up for memory (RAM) deficiencies. This will "slow down" a system's ability to manage the files. So if you like to multiple applications opened at the same time, buy more RAM. Personally, 1 gb ought to be the minimum for today's systems.
By contrast, a computer's processor, including logic board, video board, etc. are the engine of the system. The iBook has a small engine. So no matter how much RAM you feed it, it's still going to operate like a small engine. If you want more processing power, you would need to purchase a more powerful notebook (eg Power Book) or a more processor oriented machine such as the Intel iMac or Mac Pro.

Macmini among the latest i5 or i7 are they appropriate for web/graphics/software development

Macmini among the latest i5 or i7 are they appropriate for web/graphics/software development?
Can operate with ease with Adobe Creative Cloud cs6 Apps? Also with xcode or Eclipse etc IDEs?
Also can get carried easily, and is 240/110V voltage Europe/USA?
MACmini server have all abilities of macmini client plus more, hence, can run Adobe Creative Cloud cs6 Apps, xcode & Eclipse?

Electrical and Operating Requirements
Line voltage: 100-240V AC
Frequency: 50Hz to 60Hz, single phase
http://store.apple.com/us/browse/home/shop_mac/family/mac_mini/select
Realize that only the Middle Mini has a real Graphic card.
http://news.softpedia.com/news/What-You-ll-Need-to-Run-Adobe-CS6-Mac-System-Requ irements-267982.shtml
http://prodesigntools.com/products/adobe-cs6-system-requirements.html

Best Product for Web Graphics & Email Marketing

What is the best product to start with if my focus is creating graphics for the web and email marketing?

Editing PDF files: there is NO good product for editing the text or content of PDF files. There are tools but they are for a desperate last resort when things are very badly planned. Acrobat can do this.
Acrobat: good for scanning to PDF. But in general no sensible tool lets you work with PDF as your main format. For example if you want to do letters in PDF, you do them (typically) in Word and make a PDF. Want a page layout? Use InDesign or Publisher, make a PDF. Want to change the PDF? Edit the original and remake the PDF. You need to keep originals religiously.
Maps: look for a specialist tool for maps. Adobe don't have one.
General: don't expect to find one program that does all your tasks. You will probably want Acrobat though for some PDF-related tasks.

Scaling Graphics for Web

Similar Messages

Maybe you are looking for