Slices

[Btreb]

Hello photoshop Gurus

My name is Bryan and I have been trying to create a newsletter for my company.

I created a template in photoshop and use slices to define the URL links. I export for the web and get a folder with images and a HTML file. I can click on the HTML file and it comes up in Safari and looks fine. All the URL links work and sends me to the proper site. I do a find/replace edit in Text Edit so the file can find the images.

I import this into Thunderbird to send out as an email. I did a test, and it comes to some people perfectly, but for other people it comes in changed. Some parts offset or in bad cases the slices are separated and jumbled. Any idea what I can do to keep this from happening? I have included what it should look like, and what it came in the worse case in my email.

Again, I have two different emails and it came in correct in one application, but doesn't come in correctly in the other application. I thank you for lookingand would love if someone can educate me in helping to solve this problem.

Regards
Bryan

 

[polarwoc]

Hi Bryan,

I import this into Thunderbird to send out as an email.

I have never worked with Thunderbird, so please explain what it does. From what you said, what I understand is you are providing the HTML file as input to Thunderbird and the program is sending it to people - I would like to know in what format? While your first image looks like a web page HTML, your second one (that has mismatched slices) looks like a PDF file.

If it is a PDF, or if it is a HTML, can I have a look at the files?

Also, I am thinking in terms of the devices the two sets of users have in viewing the file. If it is PDF, everyone should see the same. On the other hand, if it is HTML, each device/browser displays it differently.

 

[Btreb]

Hi Bryan,

I have never worked with Thunderbird, so please explain what it does. From what you said, what I understand is you are providing the HTML file as input to Thunderbird and the program is sending it to people - I would like to know in what format? While your first image looks like a web page HTML, your second one (that has mismatched slices) looks like a PDF file.

If it is a PDF, or if it is a HTML, can I have a look at the files?

Also, I am thinking in terms of the devices the two sets of users have in viewing the file. If it is PDF, everyone should see the same. On the other hand, if it is HTML, each device/browser displays it differently.

Hello Polarwoc,

Thank you for responding to my query .
The file I am sending in Thunderbird, is a HTML file. I chose Thunderbird based on a tutorial I viewed on how to make newsletter in photoshop. After I export the file from Photoshop(save for web), it creates a HTML file and a folder with the images(i believe are the areas from the slices). I then take steps to open the HTML file in TextEdit and do a find/replace edit for the Images to the file path
name so the file knows where to get the images. I then have to copy the body of the HTML file I edited and import it into a new Thunderbird email. That is what is sent out as the newsletter. I am not a very experienced computer person. I have basically learned to try to create this newsletter in photoshop as I have the program, and the company really doesn't want to spend the $$ for programs and services until we can show the newsletter is generating business. It fascinates me that the same HTML file I email to different people has different problems. Maybe its not a photoshop problem.
Maybe its a Thunderbird problem. Thunderbird is a free email program I downloaded online(suggested by the tutorial). I have tried to attach the HTML files in this response, but it won't let me do so.
Do you know how I would attach them?

Thank you again for looking.

Cheers
Bryan

 

[Btreb]

Hi Polarwoc,

I saved HTML files as PDF's and attached them

Thx

 

[Btreb]

Hi Polarwoc,

I am also attaching the PSD file if that helps

Bryan

 

[polarwoc]

Hi Bryan,
Just letting you know that I read your message, but I will be able to check out the attachments and respond in the evening after returning from work. Please bear the delay.

Also, I am thinking in terms of the devices the two sets of users have in viewing the file. If it is PDF, everyone should see the same. On the other hand, if it is HTML, each device/browser displays it differently.

If you have any information of what sort of devices - Hardware/Browser/OS - are having display issues? For example, the display is only bad on Android devices running Marshmallow OS, or on devices running Firefox browser, etc?

 

[polarwoc]

Bryan, would you be able to zip the contents of the folder containing your HTML folder and share it? It is probably "/Users/bryantrebelcock/Desktop/CPI/Studio Admin/Email template/JB Newsletter" this folder on your desktop.
That way, I can get all the sliced images and related CSS files that were generated by Thunderbird.

 

[Btreb]

Polarwoc, I hope this is what you are asking for. This is the exported file from photoshop. I edit the HTML before inserting in Thunderbird.
Thx
Bryan

 

[polarwoc]

Hi Bryan,
I looked into the HTML code and noticed that the generated code has needless columns in its tables and also multiple formatting issues which are transferred over into your Edited HTML file. Since this was generated, you have little control over it. Some browsers have better resilience over others, which probably explains why display looks okay in some and format goes awry in others.

I retraced the steps you mentioned:
1) Opened the PSD file in PS,
2) Made Slices, exported them as well as created a HTML through the "Save For Web..." dialog box (I must note that at this point, my generated code looks very clean with only necessary rows and columns)
3) Displayed this on a browser and find a clean display. Note that this web page does not have links on it at this stage. I assume you associated links to these slices on Thunderbird, which could have generated the additional columns.
4) Now, I opened the HTML code on an editor and added the links in manually. You can see the attached Web.zip for my retraced files.

Now, since this code is clean with no unnecessary elements in it - could you check if its display is consistent on devices that did not display it well before? If that is the case, we can narrow down the suspects.

 

[Btreb]

Hi Polarwoc,

I have sent your HTML file to both of my email accounts and it comes in perfectly. I have emailed the file to the photographer who had the most affected breakdown(waiting to hear back). I want to thank you for taking your time to look into this. I was adding the links to the slices in photoshop. I am not proficient in HTML and would not know how to add link in the edit program. I took your HTML file and did the find/replace method in text edit to insert into Thunderbird that I learned how to do and it worked great. Is there a trick to doing the slices? I have always wondered why when I do my slices, it skips a number on the next slice sometime. I'll do slice 2 then slice 3, then when I do the next slice, it is #5. Is there something I am doing wrong? After I get the page sliced up, I then select the slice I want and assign the corresponding link. Again, I can't thank you enough for sharing your expertise.

Bryan

 

[polarwoc]

That was no problem at all, Bryan. Do let us know if you hear anything adverse from the Photographer.

Is there a trick to doing the slices? I have always wondered why when I do my slices, it skips a number on the next slice sometime. I'll do slice 2 then slice 3, then when I do the next slice, it is #5. Is there something I am doing wrong?

In PS, Slices always get numbering from Left to Right and Top to Bottom order. If you leave out a gap between two slices, the gap is assigned a number, but it is not an active slice. Active slices are shown in Blue while the inactive ones are shown in Grey. In case you come across bad numbering, just delete the last slices where the numbering went wrong and recreate them without a gap.

I have to thank you, because after seeing your post, I learnt about slices - something I wanted to do for long, but been deferring.