Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I designed a page in photo shop.
When I try to convert it to HTML the header font looks a bit different.
But I applied the same styles and font, for example size is 36pt in Photo shop(non bold), I could get the same effect while I add BOLD when I coding in HTML.
The main problem is that, the font looks like cut letters, meaning the " I " looks like two dashes vertically arranged.
How to solve this?
Save that "page" as an image and then put that image into an HTML file.
EDIT: I think you can just use the PRINT key on your keyboard to make it really look like on your computer - even with all the Photoshop toolbars and such! But don't forget to provide the users with the color profile and illumination profile of your monitor and an exact layout of your room, and don't forget the type of light bulb you are using, the thickness and tinting of the glass in your windows and of course the angle of the sun!
The problem with converting photoshop files to a website is that Photoshop renders fonts different then browsers. In most of the cases, fonts are displayed the same as in your design, but sometimes you just can't get the fonts look exactly the same as in your photoshop file. Unfortunately, there isn't a fix for this yet.
Photoshop simply has a lot more font functionalities then browsers so you'll have to be satisfied with the simplified version in your browser.
What you can do is slice the text from the PSD as an image and include that in your HTML, but that is a very outdated method which will increase the loading time of your website.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I'm working on redesigning my small business website, so i figured, why not learn something while doing it! :p
Anyways... I am trying to get my logo into the HTML.
The --free and open-source... I might add-- template I used had a placeholder glyph that looks dang good. I cannot find out how to add my logo by making it a glyph. I have a SVG/AI/png/etc of my logo, but cannot figure out how to easily edit the font file to add glyphs.
I currently have it set as an image, but since this template updates sizes of things if u r on desktop, vs mobile, it doesn't look right.
I got it to kinda work with the BirdFont app to edit the font, but then when I edited it, all of the other glyphs went away, and the sizes were off.
With the pre-installed glyphs, you summon a glyph by:
<span class="glyphicon glyphicon-GLYPH_NAME_HERE"></span>
Also, in BirdFont, i couldn't edit the name that goes to glyphicon-GLYPH_NAME_HERE, so i just edited one of them that I know i won't be using.
TL:DR; What's an easy, quick, reliable way to edit a font file, containing glyphs, to add my logo -- as a glyph?
Thanks so much!
You may try Fontastic, which allows you to create fonts with lots of vector icons from multiple sources, and add your own icons (Add more Icons -> Import icons) from SVG files or SVG fonts.
edit the glyphicon css file for a glyph that you aren't using, and set that value to your new image.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
It almost seems like a no-brainer, but I wanna get a second opinion. I am designing a project for a client where it will output PDF's that can be printed. As a customer of theirs, you can customize the cover page with an uploaded image. When printing the cover page, is it better to have them try and upload as big an image as possible?
Seems like the answer would be yes, but I have never (web) designed for print before. I've either done one or the other.
Any thoughts on this would be greatly appreciated.
When you say "big", it's unclear what you mean. Do you mean file-size? Image dimensions? I'll speak to both.
The actual printing of the page doesn't have anything to do with file or image-size from a bandwidth load perspective.
The bigger the file-size, the longer the upload time, the greater the bandwidth use, and the larger the .pdf file size.
The smaller the dimensions of the uploaded image and the lesser of the resolution means that if the image gets resized to fit a certain area, then the image will appear pixelated both on the web and in print. Conversely, you can resize down an image and not lose quality.
Hope my perspective is helpful :-)
I think you should resize the image while uploading in order to it fits the PDF page cover, except if the image is smaller than the page.
You don't need to get huge images for medium sized pages.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
Since font rendering is a nightmare on cross platforms (i.e. windows has very ugly anti aliasing, and TTF fonts are not anti aliased at all) I came up with the idea to create a png file for every heading in my design.
My question however implies that if I would create a H1 html element and hide it with CSS while the title is shown by a png image, would search engines this work around?
What you are proposing is a very common method for replacing text with an image. Search engines don't mind.
I would suggest that instead of hiding the element, move it off-screen, -5000px or so. Also, your users are probably going to hate you, since your site will be slow. Best just to deal with the typography as it is. I don't know what Windows system you're using, but anti-aliasing works just fine on all of my Windows boxes. If you need a different font, consider web fonts.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I'm having problem to find why fonts are bold, even tho i didnt apply bold, but half are not bold. which is kind of more confusing.
so some are bold and some are not.
[Warning, link plays arabic vocals !] :)
check following screenshot and here is live demo link (on demo link will play audio, please click on pause and it wont play again on refresh)
if you see on top right corner, that arabic word is showing normal and next to it the other arabic fonts are bold.
on second line, same second word is not bold, which it was on first line. o.0
One possibility (that I have experienced) is that the font-face you are using does not have bold for the things you are looking for. (btw, I can't tell differences in my browser, Opera, everything looks gray).
I experienced this with a font I implemented using #font-face and font that the font I had chosen didn't have any bold versions at all for to use.
This seems be an artifact of how the text is rendered.
If you take the text value of one word in your span and move it to another, it renders the exact same way. In other words, this isn't caused by CSS. Different text seems to render at different weight.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I have just started practicing converting PSD's to HTML/CSS. But sometimes you see PSD's and it just seems impossible to craft using html and css.
Like the one here :
http://i.stack.imgur.com/rx0dl.jpg
Thanks alot
The way you should approach this is the same as you would approach any other PSD to HTML, divide it in blocks in your head and start from the top.
Here I made a very rough example of how you could divide this:
http://i.imgur.com/glZJ5.jpg
Use grid lines in photoshop to divide your image in different sections and create slices from there. You can even export to html once you've done that and it will create the css styles required too.
You can find a video explaining how to it here:
http://www.youtube.com/watch?v=DVfxe4pqvo8
Well, start with the basics:
A central content container. Unfortunately, images only describe the layout with one particular screen resolution, but it looks like the designer wanted a centered element with fixed with, probably 960px.
In that container, two headers. You can use the border-radius CSS property to make borders round, but you'll probably need some background images for some icons.
Add the example text, unstyled so far.
Add the front image. You can probably crop it in Photoshop.