Creating Images for Web, question about settings, etc.

Okay before someone tells me "use the search function or google", let me say this...i already have.
I am looking for a guide or anything to ALL settings and recommendations for photoshop cs4.
I find different examples and such but nothing that is "great" and exactly what I need.
When creating a new file that will be used for the web. Logo, site graphics, etc. what are the best
settings when creating a new document? recommended settings for anything from the resolution, color mode
to the "pixel aspect ration" under advanced.
Basically I just need to do this part my self, i am pretty familiar with photoshop but just never took the time to actually know 100% of the best
settings that i should use.
I just want to be able to create the high quality images i can for my website,
I use .png for the most part {because i need transparency for several items}.
but I notice that alot of times it has that little bit of blurryness to it, i tried messing with the resolution, i tried resize, i tried alot of things.
my BIGGEST frustration and what ultimately led me to come to these forums was the use of the font, no matter what , my font always always always looks a bit blurry. what can i do to take this effect of blurryness away?
any and all help is appreciate and i give a thanks in advance!

The best setting for the issues you describe is to work on your art in Photoshop at a 100% view and to place in a web page at 100%. Do not try to scale the images with HTML/CSS.

Similar Messages

Saving two dimensions od image for web

Hi there,
I have made script (with your help ) to export images for web with dimensions 300x300 px. Now I want that my script do one more resize of that files so that i get two files one 300x300 and another 66x66 px. I will post my script and ask you to hel me find the bug
And one more question. My script exports file name + jpg but it also keeps orginal extension so I get ie. FileName.psd.jpg
can you help me fixing this in my script... else is fine...
thank you,
Voah
Edit:
In the meen time I managed to resolve the problem so here is the new script
But I have one more thing I would like to do. I have to manually make folder "300x300 and "66x66" or my script stops. How coud I make that script make that folders? (under inputFolder/300x300/ and inputFolder/66x66/)
// Save current dialog preferences
var startDisplayDialogs = app.displayDialogs;
// Save current unit preferences
var originalRulerUnits = preferences.rulerUnits;
preferences.rulerUnits = Units.PIXELS;
var inputFolder = Folder.selectDialog("Select the input folder");
//var outputFolder = Folder.selectDialog("Select the output folder");
ProcessImages();
function ProcessImages() {
var filesOpened = 0;
//   if ( inputFolder == null || outputFolder == null)
     if ( inputFolder == null) {
            alert("No source folder selected");
//     if ( outputFolder == null) {
//       alert("No output folder selected");
//else{
var fileList = inputFolder.getFiles();
for ( var i = 0; i < fileList.length; i++ ) {
       if ( fileList[i] instanceof File && ! fileList[i].hidden) {
                 open( fileList[i] );
                 ResizeImage();
                 filesOpened++;
return filesOpened;
function ExportPng(filePrefix, fileSuffix){
try
var docRef = app.activeDocument;
var docName = app.activeDocument.name.slice(0,-4);
var saveOptions = new ExportOptionsSaveForWeb();
saveOptions.quality = 70;
saveOptions.format = SaveDocumentType.JPEG;
saveOptions.optimized = true;
docRef.exportDocument(File(app.activeDocument.path+'/300x300//'+docName+'.jpg'), ExportType.SAVEFORWEB, saveOptions);
catch (e)
alert("Error encountered when attempting to save the image. \r\r" + e);
return;
// funkcija export 2
function ExportPng2(filePrefix, fileSuffix){
try
var docRef = app.activeDocument;
var docName = app.activeDocument.name.slice(0,-4);
var saveOptions = new ExportOptionsSaveForWeb();
saveOptions.quality = 70;
saveOptions.format = SaveDocumentType.JPEG;
saveOptions.optimized = true;
docRef.exportDocument(File(app.activeDocument.path+'/66x66//'+docName+'.jpg'), ExportType.SAVEFORWEB, saveOptions);
catch (e)
alert("Error encountered when attempting to save the image. \r\r" + e);
return;
function ResizeImage()
if (app.documents.length > 0) {
    var docRef = app.activeDocument;
    var n = docRef.pathItems.length;
        if((n>0)&&(docRef.pathItems[0].name!="Work path" )) {
             docRef.pathItems[0].makeSelection();
             docRef.selection.invert();
             docRef.selection.clear();
             docRef.selection.deselect();
   function fitImage() {
var docRef = app.activeDocument;
docRef.trim()
var docWidth = docRef.width.as("px");
var docHeight = docRef.height.as("px");
if (docWidth / docHeight > 4.8)
    docRef.rotateCanvas (315)
    docRef.trim()
else if (docHeight / docWidth > 4.8)
    docRef.rotateCanvas(45)
    docRef.trim()
if (docWidth < docHeight)
          docRef.resizeImage(undefined, UnitValue(270,"px"), 72, ResampleMethod.BICUBIC )
      else if (docWidth > docHeight)
                      docRef.resizeImage(UnitValue(270,"px"),undefined, 72, ResampleMethod.BICUBIC )
      else if (docWidth == docHeight)
                docRef.resizeImage(UnitValue(270,"px"),UnitValue(270,"px"), 72, ResampleMethod.BICUBIC )
docWidth = docRef.width.as("px");
docHeight = docRef.height.as("px");
if (docWidth < docHeight)
                    docRef.resizeCanvas(UnitValue(300,"px"), UnitValue(300,"px"), AnchorPosition.MIDDLECENTER);
      else if (docWidth > docHeight)
            docRef.resizeCanvas(UnitValue(300,"px"), UnitValue(300,"px"), AnchorPosition.MIDDLECENTER);
      else if (docWidth == docHeight)
            docRef.resizeCanvas(UnitValue(300,"px"), UnitValue(300,"px"), AnchorPosition.MIDDLECENTER);
var docRef = app.activeDocument;
var savedState = docRef.activeHistoryState;
fitImage();
app.displayDialogs = DialogModes.NO;
ExportPng( File( "",".jpg" ))
docRef.resizeImage(UnitValue(66,"px"),UnitValue(66,"px"), 72, ResampleMethod.BICUBIC );
            ExportPng2( File( "",".jpg" ))
docRef.close(SaveOptions.DONOTSAVECHANGES);
docRef = null;
// Reset app preferences
app.displayDialogs = startDisplayDialogs;
preferences.rulerUnits = originalRulerUnits;

Does this help?
main();
function main(){
var originalRulerUnits = preferences.rulerUnits;
preferences.rulerUnits = Units.PIXELS;
var inputFolder = Folder.selectDialog("Select the input folder");
if(inputFolder == null) return;
var fileList = inputFolder.getFiles(/\.(jpg|tif|psd|png)$/i);
var outputFolder1 = Folder(inputFolder + "/300x300");
if(!outputFolder1.exists) outputFolder1.create();
var outputFolder2 = Folder(inputFolder + "/66x66");
if(!outputFolder2.exists) outputFolder2.create();
for (var a in fileList){
open(fileList[a]);
var Name = decodeURI(activeDocument.name).replace(/\.[^\.]+$/, '');
app.activeDocument.trim(TrimType.TRANSPARENT);
FitImage(300,300);
var saveFile = File(outputFolder1 + "/" + Name + ".jpg");
SaveForWeb(saveFile,70);
FitImage(66,66);
var saveFile = File(outputFolder2 + "/" + Name + ".jpg");
SaveForWeb(saveFile,70);
app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
preferences.rulerUnits = originalRulerUnits;
function FitImage( inWidth, inHeight ) {
var desc = new ActionDescriptor();
var unitPixels = charIDToTypeID( '#Pxl' );
desc.putUnitDouble( charIDToTypeID( 'Wdth' ), unitPixels, inWidth );
desc.putUnitDouble( charIDToTypeID( 'Hght' ), unitPixels, inHeight );
var runtimeEventID = stringIDToTypeID( "3caa3434-cb67-11d1-bc43-0060b0a13dc4" );
executeAction( runtimeEventID, desc, DialogModes.NO );
function SaveForWeb(saveFile,jpegQuality) {
var sfwOptions = new ExportOptionsSaveForWeb();
   sfwOptions.format = SaveDocumentType.JPEG;
   sfwOptions.includeProfile = false;
   sfwOptions.interlaced = 0;
   sfwOptions.optimized = true;
   sfwOptions.quality = jpegQuality;
activeDocument.exportDocument(saveFile, ExportType.SAVEFORWEB, sfwOptions);

I designer I want to create forms for web client, does each client have to purchase form central to access the data?

I designer I want to create forms for web client, does each client have to purchase form central to access the data?

Hi,
In this scenario, you can share the document with the clients to and provide co-author privileges.
Co-authors can edit the form design, options, responses, and summary report (everything that you can do).
Note:- They do not require a paid subscription to view the responses, free subscription users can become co-authors.
Please refer to the following thread to know how to share a form with others:-How do I share a form I created with others?
Regards,
Nakul

Which way to get image for webi report?

Hi,
I have to add image to webi report. So any way is there for adding image for webi intelligence.

check this thread:
Adding an image (logo) to webi report

I am using CS6 and when I go to save an image for Web the image does not retain its quality

I am using CS6 and when I go to save an image for Web the image does not retain its quality. The first week I did this it worked just fine and now the images save very pixely.
Here is a screenshot of my image on the artboard as I am editing it
Here is a screenshot of the image as I'm trying to save it for Web
As you can see, the image becomes pixely. I have tried to save it as every type of png and jpeg but nothing seems to work. I have no idea why it has started to do this. Please help!

Change None to Art optimized then click apply(alteast in CS5 there was an apply, believe they removed that in CS6 as so many people missed that part).

Save image for web/devices - random streaks

I have no idea why, but sometimes when i save images for web It leaves random streaks across certain areas. It has nothing to do with transparency/gradients because i've used normal fills and it still does it. It's probably something stupid but i can't seem to figure it out.

Document DPI vs. Save for web vs. preview. Make sure to always work in 72 DPI and you'll have a lot less problems to get predictable results. Also use the align to pixel grid options to avoid semi-transparent gaps and edges, where applicable...
Mylenium

Create iView for Web Dynpro Application

Hi guys,
I've created a Web Dynpro Application via NWDI and deployed to the j2ee server. Now, I'm trying to create an iView to link to that application. The steps I've done are:
1. Create iView for Web Dynpro Application
2. Select "Create iView from each application View"
3. Select my application.
That's when the error occurs at step 3. I select my application and click next, but an error msg keeps appearing telling me to "To continue, select at least one application" despite having already done so. Can anyone enlighten me on this? Thanks!
ZHenmin

Hi,
First make sure the applications runs fine standalone. Also the versions for WAS and EP are maintained correctly. Actually, this error seems to be occur for many users. Check this thread too.
Open new Web Dynpro iView in EP7
If nothing works, restart the server and try creating the iView again.
Regards,
Harini S

Problem creating Image for HP dc5100SFF

We just installed Zenwork 6.5 and was in the process of creating image
for HP dc5100 desktop systems, and we encounter some problems. The PC
downloads Linux.3 and in the process of executing, cannot obtain IP
address from the DHCP server. How can I get it to see the NIC driver
which is Broadcom Netxtreme gigabit ethernet card.

I am running SP1a
> On Tue, 20 Sep 2005 18:39:34 GMT, [email protected] wrote:
>
> > How can I get it to see the NIC driver
> > which is Broadcom Netxtreme gigabit ethernet card.
>
> are you running sp1b?
> --
> If you have already compiled drivers or have linux.2 please put them on
> http://forge.novell.com/modules/xfmo...ect/?zfdimgdrv
>
> Marcus Breiden
>
> Please change -- to - to mail me.
> The content of this mail is my private and personal opinion.
> http://www.edu-magic.net

Getting 3 cursor images for arrows, hand, magnifing glass etc.

all of a sudden getting 3 cursor images for arrows, hand, magnifing glass etc. and can't get rid of.
thanks

http://www.johnrellis.com/psedbtool/photoshop-elements-faq.htm#_Setting_the_Windows

Creating Thumbnails for web page links to larger images.

I want to create thumbnail images for linking to web page linking to enlargements. I'm using PhotoShop Elements 2.0 on a Dell 2400, XP Home Edition with 512mb RAM and 35gb storage available.
The language I read in help sections doesn't addressed the issue I want help with. I believe it addresses saving thumbnails for Windows and Mac using .tiff or .psd format, not the .jpg or .gif I need. It seemed like there should be a way to change the thumbnail format. Any suggestions would be appreciated.

Hi Ted,
You can use the ' Web Photo gallery ' as Jodi suggested for a large
number of images or,
Open your image, click the bar at the top of the displayed image &
reset the size to what you want, then 'File', 'Save for Web' & save as
.jpg or .gif. .jpg gives more options for reducing file size so that
is what I use. Close the image without saving
HTH,
Alex,

Optimum Settings for Creating .MOV for Web

Hello,
I shot my video footage using a Canon XL-1 with a MiniDV tape. I then loaded this footage into Final Cut Pro (Version 4), running on MAC (Version 9.0), and then completed my editing. Besides creating a final 42-minute version to be shown on television, I would like to break up this 42-minute version into three separate pieces (a 21-minute, an 11-minute, and a 10-minute slice) for Web/Internet delivery.
To do this, I will create three separate .MOV files; however, I would like to know the 'OPTIMUM' configuration Final Cut Pro settings/considerations before creating these .MOVs for optimum audio/video quality when shown on a website. By the way, after I produce these .MOV files, I plan to encode them using FlixPro's ON2 V6 Codec to finally produce Flash 8 .FLV files for uploading to my web server.
Any and all advice regarding optimum Final Cut pro settings/considerations before creating these .MOVs would be aprreciated immensely!

Thank you for your reply. I take it then that current default settings are OK.

I am done editing in Develop; how do I save edited images for web?

I get the import and development options in Lightroom but I was told by a LR representative when I called for assistance that LR does not retain any data. So, if I import photos from my camera (NEF files) and edit in Develop; where do I save the edited photos and how can I adjust them for optimum quality on the web? It seems that there are instructions on how to import and save photos from your camera, etc. but once you modify the photo using Develop, is the original then modified as well?
Sorry for the question, but I have modified several photos using the Develop Option and hate to lose all my work. I am lost as what to do now in order to save my edits. Ugh!
Thank you to anyone who can help! I am a MC Windows user if that helps.

Editing in develop is totally non-destructive. All your develop settings are saved automatically in the LR database (catalog)
For web usage select thumbnail(s) of your images in the Library and click Export. Choose jpeg, size, quality and resolution of 72 and set color space to sRGB. Add sharpening if desired. Choose a folder, sub-folder or desktop and export. Your jpeg copies will be ready to upload from your chosen folder when the export completes.

Creating video for web

Hi,
I'm currently putting together some videos in FCP for our new website. I've used FCP a lot for creating video for DVD's and exporting to .mov but converting to flash is relatively new to me.
I am using the On2 Flix FLV exporter to export direct from FCP to a 704 x 396 flv file.
Can someone clarify how I should set up my sequence in FCP to get the best quality results? All the source material is DV PAL for video (720 x 576 anamorphic) and PNG-24 for still images (in this case a background which I will input text over in FCP). Should I be setting all my sequences to 704 x 396, and what pixel aspect ratio should I use seeing as it is for flash/web use?
Also, in the Sequence Settings dialog box what should I set as the Compressor settings (dv pal/h.264 etc) as flv does not appear as an option?
Thanks
Jack

Thanks guys. So if I am to carry on working in the standard DV-Pal sequence I'm wondering what to do when importing graphics. I have been given a psd which contains a title screen that will be placed before each video. The psd has been given to me at 704 x 396 - the size of the final delivered FLV rather than the DV Pal sequence. When I bring this image into FCP and render it makes the image look pixelated/blocky (I'm exporting from Photoshop as a PNG-24). What is the proper way to export graphics for use in Final Cut? Should I re-size the image to match the sequence or bring it in at 704x396 and have Final Cut resize it?
Thanks
Jack

Save For Web - Default Output Settings

Hi all!
When I use "Save For Web" in Illustrator CS5, I don't like having hypens in my file names (it messes with alphabetical sorting when some of my similarly-named files have hypens, the rest have spaces). So everytime I export an image for the first time using save for web, I have to go into "output settings > saving files" and uncheck "Unix Filename Compatibility". Having to do this every time is a little annoying.
I tried unchecking that box, and then saving the output settings as a settings profile, overwritting "default settings.iros", hoping that Illustrator would load that file everytime and leave the Unix box unchecked. But alas, that did not work, and when I go to "Save For Web" now on a new image, instead of using the default settings profile, it just uses "Custom" instead, with the Unix box checked.
So it seems Illustrator would rather use it's own default settings, instead of mine. Is there any way I can set it to stop checking that box every time I create a new image and export it for the first time?
Thanks!
Joey

You are correct it is writtn that way in the Save for the Web Preferences and I assume if you knew what to put in its palce and resaved the preferences it ould 'no loo'nger be a problem for you the thing is what would you write in its place?
At the bottom it saays name compat

Performance advice required - creating images for a scrolling list view on Android

This is a question about how best to manage thumbnail images in an list view style app written in Actionscript 3 for Android.
I am building an app that uses a list view control to show lists of data. As each list item appears on screen during a scroll through the list I create a thumbnail image to display in the list item cell.
Currently I am embedding the jpg thumbnails in actionscript and using mx.core.bitmapasset to get bitmaps on the fly. On a live device this is unfortunately slowing things down - the smooth scrolling list jerks every time a new cell appears on screen.
There are probably going to be 500+ thumbnails but a list will only ever have about 150 items in it at any one time, of which only about 6 or 7 are onscreen at the same time. The list view control is one that I have created myself in actionscript but I am pretty sure the thumbnail creation is the cause of the slowdown. If I take out thumbnails the scrolling is smooth. If I reuse the same thumbnail across all cells then scrolling is smooth too. The component reuses cells as they disappear off one end of the list so there isn't much creation of objects going on.
I am running this in debug so it might be possible that in release things are better (maybe?).
Does anyone have any advice on how best to approach this problem of getting jpg assets available quickly?

Hi,
I think you can use ContentCache here. See http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/core/ContentCache .html. You need to create an instance of ContentCache and set the contentLoader property of your Bitmap object to this instance. You can control the number of cachedEntries by setting maxCacheEntries. The tutorial by Mihai Corlan http://corlan.org/?p=3106 shows how you can use it. I hope you find it useful.
Thanks,
Sanika

Creating Images for Web, question about settings, etc.

Similar Messages

Maybe you are looking for