Photoshop for web graphics vs fireworks - sizing shapes and images

Hi all,
I'm a web designer / developer and I've always used fireworks to create my graphics for buttons, or backgrounds of web sites.
I'm aware that photoshop is apparantly the tool of choice for most pro web designers, but........
How the heck can you size things in Photoshop (CS3)???!
Sounds like a daft question, and sounds like an extremley basic task, but I cannot find how / where to do it in photoshop.
Say I need two shapes to be the same width, and I'm creating two images, how do I set the two shapes to be 100px wide for example? I don't mean the canvas, I mean a shape within a canvas.
Point me in the right direction and call me stupid!
Thanks

I don't know of any books that concentrate purely on editing graphics in Photoshop. The program was designed as a photo editor, after all, and web graphics are just a sideline.
Best overall book I know for learning the basics is the Photoshop Classroom in a Book, available for each version of the program. You can ignore the photo manipulation chapters (though I would recommend them ... one day you might want to put a photo on your website.)

Similar Messages

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/

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

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

Flex for Web/Graphics Designers

Hi,
I am a hard core web graphics designer and have worked
extensively in designing websites and web applications using CSS
and HTML. I have also created interactive presentations in Flash
but to the basic navigation level and not advance action scripting.
I do not have much knowledge in programming.
I would want to know how Flex works for web graphics
designers? What capabilities I will have to build into myself so
that I will be able to work on Flex and also propose solutions
while discussing with clients and developers?
It will be great help if any of you can guide me to become
and expert with Flex?
Regards,
Amit

Hi Rahul,
Thanks for the link. Let me go thorugh it and I'll get back
to you on that.
The reason for getting into Flex is: I feel it is related to
Flash and its really been a long time since i was deciding to get
into some programming (especially actionscripting). After
introduction of Flex, i thought it will be good to learn Flex as an
upcoming medium in creating RIAs by using actionscripting. In a way
I will get a chance to clear my fundamentals of programming which I
am looking forward to as the first step to learn the logic of
programming. Correct me if I'm worng.
I am open to doing courses also if needed. Please help me in
that.
Regards,
Amit

InDesign... invisible shapes and images

I have a 100 page book and I just noticed I have many missing rectangle shapes and images. I copied and pasted a vector file in the program, could that have caused it? I really need help trying to fix this problem.... The layers are still there but their just invisible
Thanks

Looking at the new screen shot the selected rectangle is centered on the spine and has no witdh or height (look at the values in the control panel) which would explain why it is invisble.
Can't tell you how it got that way, though, but I think the file is now probably corrupt. See Remove minor corruption by exporting and be prepared to delted and recreate these rectangles.

2007 iMac vs New MBP for Web/Graphic Design?

Hey everyone,
I'm a web/graphic designer currently using a Mid-2007 iMac and looking to upgrade to the top level MBP for better performance and mobility. I'm usually running a few programs at a time (photoshop, indesign, illustrator, safari, spotify, etc) and my current setup seems to be bogging down lately. Given the specs below, will I see a big boost in performance by upgrading to the MBP? On paper 2.4ghz vs 2.8ghz doesn't seem like a lot, but I know the RAM, graphics card and whatever "turbo boost" is all play a big role as well. Any advice?
Current iMac:
-Mid-2007 iMac - 24"
-2.4GHz Intel Core 2 Duo
-4 GB 667 MHz DDR2 SDRAM
-ATI Radeon HD 2600 Pro 256 MB
-500 GB SATA Disk
Potential MBP:
-2.8GHz Quad-core Intel Core i7, Turbo Boost up to 4.0GHz
-16GB 1600MHz DDR3L SDRAM
-512GB PCIe-based Flash Storage
-Intel Iris Pro Graphics and NVIDIA GeForce GT 750M with 2GB of GDDR5 memory

Hi Bee!
Thanks very much for your advice!
However, why do you suggest the 21.5" over the 27"? Do you think it is worth the extra screen size, because I can afford either?
It seemed to me that the iMac was the best option also - I'm in need of the power, but I'm still deliberating over size.
Also, on a side note, do you know of any iPhone apps that can help me with transferring files from home to college I'm getting an iPod Touch as part of the new deal Apple are running and I just wondered if there were any apps that I would find handy for transporting files etc.?
Thanks again!

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?

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.

How do I change my Japanese Photoshop for an English one in the Design and Web Premium CS6 series?

Hi,
I recently purchased a Japanese version of Design and Web Premium CS6, I called Adobe and got a set of serial number for an English version. All the programs except for Photoshop were successfully translated into English.
How do I get an English version of the Photoshop program?

Hi Kazuya38,
Please peform the following steps in order change the User Interface of Photoshop CS6(Japanese or any other language) to English.
Windows:
Navigate to the directory C:\Program Files\Adobe\Adobe Photoshop CS6\Locales\<languageSet>\Support Files
Look for the file named "tw10418.dat"
Rename the file extension to .back from .dat(please make sure Photoshop is closed
Restart Photoshop.
You need to follow the same procedure for C:\Program Files(x86)\Adobe\Adobe Photoshop CS6\Locales\<languageSet>\Support Files
Mac:
Navigate to the directory /Applications/Photoshop CS6/Locales/<languageSet>/Support Files
Look for the file named "tw10418.dat"
Rename the file extension to .back from .dat(please make sure Photoshop is closed
Restart Photoshop
Note: Here <languageSet> is ccorespond to your current language.
Hope this helps.
Let me know if you have any other question.
Regards,
Sumit Singh

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.

Using a FLV file in Flash for Web Graphic

Hello thank you for looking in.
I made a FLV file in After effects. 5 seconds long. I would like to convert it (So I think) in Flash so I can park it on my website for some 'eye candy' I was able to import the FLV an After Effects creation exported as an Alpha FLV.
I import it to the stage, have a few options about players when doing so. I used the stand alone Player option when opening my sequence. I prewview it and it works fine using both Browser and Player mode when previewing movie. However, I am unsure how to make that file play or loop forever? I am unsure of exporting it so I can just upload it to my Wordpress site and stuff it in my header so it plays when a browser opens that page. I know that is a tall order to ask. If you could either direct me to a link to the proper steps I would need to learn I would appreciate it.
Thanks in advance for any direction on this one. I have created a flash poject or two and exported them as swf and have had them work, but I have never used an imported FLV is there any diff? And how come it does not automatically loop without the ACTION ()Stop ?

I was able to get my FLV FLASH to Loop, must have been a glich on my end. Closed it and reopened it and it reverted back to a loop. I am still wondering, or I forgot the steps to exporting my work with JS ? I cannot remember where I found that info, nor how I did it. As of now I turn on JS toolbox and my Html export is a white box....I would love to export as no background, or Alpha and have the JScode export so all I need to do is cut and paste into my HTML page and change the upload address or A href " " Steps...Anyone? Thanks
BTW I was able to export my AE file as a SWF however all the cool stuff that made the eye candy was not supported like fill over stroke or 3d when exporting out of AE direct as a SWF with LOOP. FWIW

Sizing window and image for screen resolution

Applet creates Frame that displays JPG or GIF image. Would like to size Frame, and zoom image, on basis of screen resolution, to avoid necessity to scroll image. How can applet or button or frame access screen resolution numbers? Thanks.

Hi,
Call this method. Pass the Frame as parameter
<pre>
public void centerFrame(Frame frame)
//Center the window
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
Dimension frameSize = frame.getSize();
if (frameSize.height > screenSize.height) {
frameSize.height = screenSize.height;
if (frameSize.width > screenSize.width) {
frameSize.width = screenSize.width;
frame.setLocation((screenSize.width - frameSize.width) / 2, (screenSize.height - frameSize.height) / 2);
frame.setVisible(true);
</pre>
Hope this solves ur problem
Regards,
Harsha
[email protected]

Drag and drop forms, shapes and images VS 2013

I am new ti visual studio and cannot seem to get image, form or shape drag and drop to work in webpage designer.
can anyone please point me in the right direction.
Cheers

Hi AndyF1ynn,
Actually this forum is to discuss the VS usage issue, if this issue is related to web development, you could ask this question in the ASP.NET forum:
http://forums.asp.net. If then, you could get an answer more quickly and professional. Thanks for your cooperation.
Best Regards,
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Inserting shapes and images within tables

Hi all
Is it me or it's impossible to insert a shape into a table by trying to drag it in there? Same with images. I'd really love to have this functionality. It seems that everything works fine when it's outside a table, but when I attempt to drag an image from Safari - it won't work. What gives? Is there a workaround?
Thanks in advance.

About images in tables!
At this point tables in Pages don't accept floating images in individual cells. You can drag an image onto a blank area of the screen and choose Inline from the menu bar. Then you can drag it into a cell on the table.
I needed to create business cards and this is totally unacceptable using inline graphics. So, I opened up Numbers and created an Avery template by resizing the columns and rows to fit. Then you can drag floating images such as pictures, logos, etc into an individual cell.
Hope this workaround helps!

Photoshop for web graphics vs fireworks - sizing shapes and images

Similar Messages

Maybe you are looking for