Mixing CSS colors and image files from Photoshop for web

Hello,
I recently encountered a web production color issue and wanted to collaborate with other web producers to either inform or to see if there isn't a better work-around....
A web site design has a particular color palette and some elements are converted to HTML/CSS colors (rgb hex values) and other elements must be saved as images--both with the same exact color appearance. We graphics professionals know that generally all images should have the color profile indicated (embedded, tagged) in the image file (e.g., sRGB, Adobe RGB or whatever) in our color-managed workflow so that the color numbers have meaning. For web, I've always used sRGB (the web standard) and tagged the images with the sRGB color profile.
Historically, this probably hasn't mattered because no web browser cared about the image profiles anyway. However, recently, some browsers have started to implement color-management. This is good for pictures and such, but poses a problem for web graphic elements: the images are rendered in the color-managed sRGB, yet the CSS is still rendered outside of color-management (the so-called monitor or "device" profile?). Therefore, if a web page design's color palette is to be honored, the HTML/CSS hex colors must appear the same as the matching hex colors embedded in the images. However, modern browsers now render the colors in the color-profile-tagged/embedded images differently, so the colors on the rendered pages no longer match!
My work around has been to NOT tag (embed) the web-element image files with any color profile and thus cause the modern browsers to do what they used to: render the images without a color profile just like they render HTML/CSS hex colors. Perhaps in the future, there will be an HTML specification to inform the web browser to render all colors (HTML/CSS/images) in a particular color profile. (In my cursory testing, I've found that current Safari and Chrome for Windows 7 do alter the tagged-image appearances, yet Safari in iOS does not.)
Have other web producers run in to this issue and are there more eloquent work-arounds?

Hi,
This might help
Serving Static Content on WebLogic and GlassFish | cdivilly
Regards,
Jari

Similar Messages

How can i export a 24bit avi file from photoshop for mac?

how can i export a 24bit avi file from photoshop for mac? i have a client that specificly needs the files to be avi and in 24bit what are the settings that i need to use to export the video using photoshop on a mac?

Hello,
To make a 24-bit AVI file in Photoshop, go to File>Export>Render Video. Then, under File Options, choose AVI from the Quicktime Export drop-down menu. Click the Settings button. Click the Settings button in the AVI Settings window. Change Compression to None, and then choose "Millions of Colors" from the Depth drop-down under Compression.
The Millions of Colors option is for 24-bit video (8-bit R+G+B channels, 8x3=24). Millions of Colors+ is for 32-bit video (24-bit video plus an 8-bit alpha channel).
-Brett

I am using the desktop screensaver and a file from dropbox for photos. Does the list of screen savers actually use the file, or just link to it. If I delete the file from the dropbox, will the screen saver be lost?

Using the desktop slideshow, I have added a file from dropbox for the slideshow. If I delete the dropbox file, does that delete the file from the list on the slideshow? Do I need to leave the file on the computer itself rather than in the dropbox and then delete it from the dropbox?

If you are going to delete the file from Dropbox, you will need the file on your computer.
You will probably need to put the file in Library/Screen Savers

Extracting pics from photoshop for web

Hi all,
I posted the issue here (below) - but could use any assitance from the DW folks also - since that's where I'll be building the page...
Newbie extract help needed

Once you drop out any info from the PS file you don't want to carry over, like the background image, there's no need to flatten the PSD into a tiff...
1. In Photoshop, select an area with the Rectangle Marquee tool.
2. Hit Ctrl + Shift + C to "Copy all layers" in that selection.
3. Hit Ctrl + N to create a new document with the same pixel size as the selection (size should be automatic based on selection)
4. Hit Ctrl + P to paste the image to the new document
5. Hit Ctrl + Shift + Alt + S to Save For Web (important for load times to optimize your images for the web)
6. Choose jpg for high quality photographs, .gif for "simple artwork with transparency" or PNG-24 for "high quality artwork/photos with transparency"
7. Hit the 4 Up tab and change the quality settings until they are as low as possible while still looking "good" to you
8. Click the window with the "lowest good setting"
9. Save to your local site folder (if you don't have one in DW, do step 1 below first)
1. Open DW and Define a Site: http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs01-defining-a-new-site/
2a.You can then go to Insert > Image > Image to place the image where the mouse cursor is
2b. Alternatively, you can drag the image from the Files window into the page
I'm giving you the "long" way around with the images. Photoshop can produce html, and/or all of your sliced areas at once with a couple clicks. I prefer a bit more control over my images and the html PS produces should never be used for real websites (maybe quick mock-ups, but not for the real thing). It's horribly inflexible and when you start adding real content it will cause more problems than it solves.

Uploading video/image files from mobile

Hello
I need to develop wap website that will allow to upload video and image files from cellphone to server.
The question is what is the best java technology to be used for this case if i am interested in website-like and not application-like solution?
Thanks And best regards
Oifa Yulian

Hi,
Thanks for responding.
I tried using the X-SUP-APPCID, but this time in device logs it initially shows as uploading and once the complete data is sent I get the response code as 401 and in response headers I get 401 Unauthorized and it goes into my error function of File Transfer.
The headers which i am passing :
uploadCreate has my APPCID.
var headers = {
"X-Requested-With" : "XMLHttpRequest",
"Content-Type" : "application/atom+xml",
"DataServiceVersion" : "2.0",
"Accept" : "application/atom+xml,application/xml,application/atomsvc+xml",
"X-CSRF-Token" : "Fetch",
"X-SUP-DOMAIN" : "LntOdDomain",
"X-SUP-APPCID" : uploadCreate
params.username = uid123;
params.password = pwd123;
params.headers = headers;

Can't export an EPS file from Photoshop CS5 and open in Illustrator CS5.

I'm on Mac OS X Lion 10.7.5
I am making DVD covers for print. The barcodes for the DVD covers have to be done in Illustrator. But the original designs are done in photoshop including the text. For years this hasn't been a problem. Right before adding the barcodes I create an EPS file from photoshop, open that file in Illustrator and all my text is automatically coverted to perfect crisp clean vectors, viola! I add the barcodes and export the PDF for the printers.
But now I can't open my EPS files in Illustrator CS5 even though I'm exporting them the same way I always have from Photoshop CS5. Illustrator says... "The operation cannot complete because of an unknown error." --> Note it does not give an error number after this warning like I see it does for so many other people.
I have been trying to fix this for over 10 HOURS spanning 2 days! I'm infuriated I can't get help from Adobe on this and have read all the forums and don't see my problem listed anywhere.
I've tried:
- Deleting the .plist file and the Settings folder & resetting my permissions
- Uninstalling and Reinstalling Illustrator
- Turning off all other applications
- Creating more disk space on my hard drive (even though I have 200gb available)
- Restarting the computer
- Disabling my Font book and still I can't open the EPS file
I thought maybe it's possible it's the font I'm using Fontesque OT so I even tried converting text to objects prior to exporting the EPS file from photoshop to illustrator and turning off my font book, but still it won't open. And if I open the PSD directly in Illustrator, text comes out a bit fuzzy in the PDF I export.
If anyone can provide any solutions I would be so grateful! I'm at my wits end here, this should have taken under an hour to do and now it's ruining my entire weekend. I'm completely panicked because I was suppose to have these to my client over the weekend so they could turn them in for Print frist thing on Monday morning and of course Adobe provides no chat support or phone support after 7pm on weekday or on the weekend which is when this all started.

I never even thought of reinstalling photoshop, but I think this was a font issue. I'd never saved an EPS with Fontesque OT Regular enabled, only Fontesque OT Bold. Somehow I think the font was causing the problem because ridding the font from the equation allowed me to open the EPS file.
After 12 HOURS of trying different things I found a WORK AROUND...
I had to:
- Select the Text in Photoshop (with Fontesque OT enabled) --> Select Create Work Path --> Covert to Shape on each of the text items
- Save EPS file out of Photoshop
- Disable Fontesque OT font in Font Book
- Then open EPS in Illustrator add in my Barcodes and export the PDF
(the barcodes have to be added in Illustrator because they need to be pure 100% black with no CMYK color in them. You can't save them out of Photoshop that way, only Illustrator, otherwise I would have made my pdf straight out of photoshop like any other normal human
This work around is the only way I could get the EPS files to open in Illustrator and still have the text remain super crisp like a vector.
NOTE to others in the future about crisp text from Photoshop to Illustrator:
- Simply "converting to shape" did not preserve the vector. You have to Select Create Work Path --> then Covert to Shape on each of the text items (with the font enabled) for this to work and preserve the crispness of the text. Even creating "smart object" did not truly preserve my vectors or the text crispness in the EPS file once I imported it into Illustrator.
DrStrik9 thank you SO MUCH for trying to help me. You did give me ideas that helped me figure out the workaround and also helped me feel not so alone as I struggled through this. I'm going to follow up with your other suggestions about reinstalling photoshop and also checking my RAM, etc. But I just want to that you so so so SOOOO much for all your time and consideration in this matter. I hope you have a wonderful amazing week ahead and that someone does something very nice and thoughtful for you too

How use PHP to read image files from a folder and display them in Flex 3 tilelist.

Hello. I need help on displaying images from a folder dynamically using PHP and display it on FLEX 3 TileList. Im currently able to read the image files from the folder but i don't know how to display them in the TileList. This is my current code
PHP :
PHP Code:
<?php
//Open images directory
$imglist = '';
$dir = dir("C:\Documents and Settings\april09mpsip\My Documents\Flex Builder 3\PHPTEST\src\Assets\images");
//List files in images directory
while (($file = $dir->read()) !== false)
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
echo "filename: " . $file . "\n";
$dir->close();
?>
FLEX 3 :
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="pic.send();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.events.ItemClickEvent;
import mx.rpc.events.ResultEvent;
public var image:Object;
private function resultHandler(event:ResultEvent):void
image = (event.result);
ta1.text = String(event.result);
private function faultHandler(event:FaultEvent):void
ta1.text = "Fault Response from HTTPService call:\n ";
]]>
</mx:Script>
<mx:TileList x="31" y="22" initialize="init();" dataProvider = "{image}" width="630" height="149"/>
<mx:String id="phpPicture">http://localhost/php/Picture.php</mx:String>
<mx:HTTPService id="pic" url="{phpPicture}" method="POST"
result="{resultHandler(event)}" fault="{faultHandler(event)}"/>
<mx:TextArea x="136" y="325" width="182" height="221" id="ta1" editable="false"/>
<mx:Label x="136" y="297" text="List of files in the folder" width="182" height="20" fontWeight="bold" fontSize="13"/>
</mx:Application>
Thanks. Need help as soon as possbile. URGENT.

i have made some changes, in the php part too, and following is the resulting code( i tried it, and found that it works.):
PHP Code:
<?php
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<root>
<images>
<?php
//Open images directory
$dir = dir("images");
//List files in images directory
while (($file = $dir->read()) !== false)
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
echo "<image>" . $file . "</image>"; // i expect you to use the relative path in $dir, not C:\..........
//$dir->close();
?>
</images>
</root>
Flex Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="callPHP();">
<mx:Script>
<![CDATA[
import mx.rpc.http.HTTPService;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var arr:ArrayCollection = new ArrayCollection();
private function callPHP():void
var hs:HTTPService = new HTTPService();
hs.url = 'Picture.php';
hs.addEventListener( ResultEvent.RESULT, resultHandler );
hs.addEventListener( FaultEvent.FAULT, faultHandler )
hs.send();
private function resultHandler( event:ResultEvent ):void
arr = event.result.root.images.image as ArrayCollection;
private function faultHandler( event:FaultEvent ):void
Alert.show( "Fault Response from HTTPService call:\n " );
]]>
</mx:Script>
<mx:TileList id="tilelist"
dataProvider="{arr}">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="images/{data}" />
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:Application>

I can not open raw image files from my Cannon 5d mark iii with cs6 and my cs6 in mac

I can not open raw image files from my Cannon 5d mark iii with cs6 and my cs6 in mac

The Mk III requires an updated version of Camera RAw, so run Help --> Updates and install it.
Mylenium

When I try to backup my files from photoshop elements 12 the "calculating total media size" box will only get as far as 46% and then freeze, how can I make it go to 100%

When I try to backup my files from photoshop elements 12 the "calculating total media size" box will only get as far as 46% and then freeze, how can I make it go to 100%

hi barbara
thank you for your response, i appreciate it. there's definitely nothing wrong with the mouse or trackpad, both work fine in every other application....i can also easily change size dimensions in other programs on my computer so it doesn't seem to be that either. it seems like there is something weird going on in the way that pse and my mac are interacting with each other, just wish i knew what it was. thank you again, wish me luck!

How to extract text and image information from postscript file

I want to write a programe,and extract text and image information from postscript file using Java.Is it possible? How to extract ?
Thank!

First of all, PostScript is not a "text" file. It can and often does contain binary data. Since PostScript streams often contain nested procedures, unless you process the procedure definitions and can "execute" them, you cannot simply "scan" a file to get what you want. No, I can't talk about this in detail since it is quite complex. But Adobe does have the
PostScript Language Reference Manual on-line for download at
. Look that over and you will have a fairly healthy respect as to the task involved.
- Dov

Is it possible to export Vector Smart Objects as vector SVG files from Photoshop CC 2014?

I have Vector Smart Objects copied from Illustrator and pasted into Photoshop. I would like to export them as vector SVG files (using Generator or Extract Assets). I can add the .svg extension to the layer and actually export an SVG just fine. The problem is any SVG I have exported have all been raster images. It defeats the purpose of having that as an option as far as I'm concerned.
I remember watching and listening to keynotes and other speakers at Adobe MAX 2014 who said it was so powerful and amazing to create SVG files from Photoshop. If we're still exporting raster SVG files from Photoshop...that's not very impressive or exciting--especially since this era of modern web development benefits greatly from using vector SVG files.
I understand that Shape Layers can be exported as vector SVG files but that seems very limiting. I also realize that users can create some impressive vectors in Photoshop, but that is not optimal. Illustrator is a better tool for creating vectors and I normally use Photoshop and Illustrator side-by-side. I know that vector SVG files can be exported from Illustrator but that isn't as user friendly and convenient as utilizing Photoshop > Generator > Reflow.
My idea was to create my assets in Illustrator, paste them into Photoshop as Vector Smart Objects, set up my layout, and then use the Generator/Reflow method or Extract Assets to get a new web design started.
Maybe I misunderstood what the speakers at Adobe MAX had said. Perhaps it's just user error and I'm just missing something simple (it happens).
Photoshop CC 2014 notes the following under Help > System Info:
Adobe Photoshop Version: 2014.2.2 20141204.r.310 2014/12/04:23:59:59 CL 994532 x64
Operating System: Windows 8.1 64-bit
Any help or suggestions would be greatly appreciated! Thank you in advance for your time.

Not quite the same, but have a look at the new Libraries feature that came with 2014.2.2 I just tried it, and dragging a vector object into a library I created in Photoshop, was there in Illustrator. This happens without having to close and reopen Illustrator. Just use the drop down at the top of the Libraries panel (in Illustrator) to find your custom, or job specific library.

Can't drag and drop a file into Photoshop for some reason?

I don't know what made it stop but at this point it's beginning to bug me to no end. I can no longer simply drag a file into Photoshop. I now have to go to "file --> open" in order to get anything into. Is there anything I can do to restore the ability to drag and drop?
Just to let you know I reset the preferences already and that did nothing. The other thing is I'm running Windows 7, however I've never had an issue with PS on it. Lastly I'm using CS4.
Thanks for any and all help.
Jaleel

Jaleel215 wrote:
I don't know what made it stop but at this point it's beginning to bug me to no end. I can no longer simply drag a file into Photoshop. I now have to go to "file --> open" in order to get anything into. Is there anything I can do to restore the ability to drag and drop?
You should be able to drag an image file from Windows Explorer into the work area if PS is open and maximised.
At least it works that way with Vista 64. It won't work dragging it on to the task bar button or the PS icon.

Viewing mov, avi, and mp4 files in photoshop 12

How can I view mov, mp4, and avi files in Photoshop 12?

thanks for your reply Tom. the video is from cameras, video cameras, vhs tapes, and mini dvds. everything looks much worse after import into fcpx; i haven't imported hd files. The specs. are, everything gets blurry and color pales. i just tried importing four more files (and optimized), all mov, (no avi or mp4), and there is no change in quality. I'm comparing the video in fcpx to the same video before it was imported. i've compared it side by side to the files being played in quicktime, real player, idvd, and el gato eye tv (third party video capture software). everything is crisp and color is vibrant before going into fcpx.

How to make a image file from Pre installed Mac osx ? "PLEASE HELP :("?

hey guys ..Thanks u for the time.
So i have this eMac which has crashed and i have got may hands on another eMac.. and it works
... the only problem is.. I can take my eMac to the working eMac to do Target Mode or any thing...
So Help me..
My question is .. Is there a way to make a .DMG image file from pre installed mac osx OR
Is there a way to may a recovery disc??

You can use Carbon Copy Cloner to copy everything from the working eMac onto the non-working eMac while the working eMac is running. If your eMac will still do target mode into the working one, you can download the above software, select the booted drive as the source drive, and your eMac's drive as the target, however it is possible this will not work.
When you say your eMac crashed, what exactly happened? It is possible that the hard drive in your eMac failed or is failing, so in order to get it running again you would need to replace the hard drive. On the eMac, this repair is somewhat involved, and you have to be very careful because it exposes the CRT, which has several areas which can be extremely dangerous to touch if not properly handled. CRTs retain a great deal of voltage, even when unplugged, sometimes for weeks, and they can give you a nasty shock if you touch them in the wrong place.
Also keep in mind that cloning from the working computer to the non-working computer will ERASE any data that you have stored on that eMac, so if you don't have it backed up anywhere, you may want to attempt that with target mode before proceeding.
Good luck!

How to Copy an Image File from a Folder to another Folder

i face the problem of copying an image file from a folder to another folder by coding. i not really know which method to use so i need some reference about it. hope to get reply soon, thx :)

Try this code. Make an object of this class and call
copyTo method.
import java.io.*;
import java.net.*;
import java.util.*;
public class FileUtil
extends File {
public FileUtil(String pathname) throws
NullPointerException {
super(pathname);
public void copyTo(File dest) throws Exception {
File parent = dest.getParentFile();
parent.mkdirs();
FileInputStream in = new FileInputStream(this); //
Open the source file
FileOutputStream out = new FileOutputStream(dest); //
Open the destination file
byte[] buffer = new byte[4096]; // Create an input
buffer
int bytes_read;
while ( (bytes_read = in.read(buffer)) != -1) { //
Keep reading until the end
out.write(buffer, 0, bytes_read);
in.close(); // Close the file
out.close(); // Close the file
This is poor object-oriented design. Use derivation only when you have to override methods -- this is just
a static utility method hiding here.

Mixing CSS colors and image files from Photoshop for web

Similar Messages

Maybe you are looking for