Skip to main content

Saving Images for the Web in Photoshop

Recently we ran into a problem where we had uploaded some images and they were using CMYK – which will not work on some browsers and can result in images not being shown or displaying as broken. To avoid this you can easily save your images in a format that is more ideal for the web (RGB).

To do this in Photoshop (CS4 shown, it’s similar for other versions) just do the following:

1. Open your original file, adjust according to your needs.

2. When ready, click File -> Save for Web and Devices

clip_image001

3. When that comes up, make sure the checkbox to convert to sRGB is checked and it is in the format you desire (small note: PNG files will not work properly in IE6).

SaveForSettings

4. Click Save!

You now have an image that will work properly!

Comments

Popular posts from this blog

Using the Source Property

For each of the properties in your template you can set a source for it, this isn’t always used but can improve user experience drastically when done throughout a site. The source field comes in to play whenever you are using any of the following fields: Droplink, Droplist, Droptree, File, Grouped Droplink, Grouped Droplist, Image, Multilist, Treelist, Rich text field and a number of others. There are various ways of setting these up to achieve different results – but in general you are using the source to limit the set of items that can be used, and this requirement can also help you determine what kind of field to use. For example, if you have a Set of items all split down into sub folders and want the content editor to make use of the tree, you could use a TreeList or Drop Tree, but if you just want a set of items without the opportunity to see where those items are – multilists or droplinks are the way to go. For Images you’re generally just specifying where to look for and put th

Web Forms for Marketers: Send Email

To have the save action for your form actually send email, you will need to change one of the settings, otherwise you will receive this error whenever submitting the form: We experience a technical difficulty while processing your request. Your data may not have been correctly saved. Also in your log (/data/logs/newest log file) you will see this error after the form has been submitted: Exception: System.Net.WebException Message: The remote name could not be resolved: 'example.host' Source: System at System.Net.ServicePoint.GetConnection(PooledStream PooledStream, Object owner, Boolean async, IPAddress& address, Socket& abortSocket, Socket& abortSocket6, Int32 timeout) at System.Net.PooledStream.Activate(Object owningObject, Boolean async, Int32 timeout, GeneralAsyncDelegate asyncCallback) at System.Net.PooledStream.Activate(Object owningObject, GeneralAsyncDelegate asyncCallback) at System.Net.ConnectionPool.GetConnection(Object owningObject, GeneralA

Adding your own Icons

I have returned from blogger oblivion – stay tuned for more frequent updates! I’m looking forward to meeting people at Dreamcore this year – I’ll  be sure to update as that is happening. Back to the topic: adding your own icons! As you may have noticed, items can be configured to have an icon – and Sitecore provides an extensive list of them. But you may want to add your own for whatever reason. To do this you’ll need an image suitable for making into an icon, and the ability to resize this image to the correct sizes (Paint.net, Photoshop, GIMP). For our example we’re making an Arke Icon and we're going to say our largest icon will be 128x128, so we have a transparent png called logo.png to work with:  The image you want to use should have a transparent background unless you want the icon to be a square, and ideally not overly detailed as it will be very small. Next, we need to make this image into various sizes, and put logo.png into the appropriately named directories, the st