I've made an image in Photoshop, but it won't show on my site. Instead, it shows up with the little white box with the ripped paper icon. Do I need to convert the PSD file to some other sort of file?
Here is my HTML snippet:
<!doctype html>
<link rel="stylesheet" href="styles.css">
<img src='file:///C:/Users/Tom/Pictures/logo.psd'>
<div align="center">
<h1>Home</h1>
Home
My Products
About
</div>
A PSD file is a file format used by and specific for Adobe Photoshop. Other applications (like your webbrowser) do not know how to read it. You need to convert it to another format.
In Photoshop, with the document open, click File » Save As..., and then select as file format the desired format (see image below). Which format to choose, is pretty much explained in another Stack Overflow answer.
It is also recommended that you avoid using file:///C:/Users/Tom/Pictures/logo.psd for links; use relative links instead. If you are ever about to put your website online, with many users, the image won't show up, because the browser of the visitors of your website will look for a file located in C:/Users/Tom/Pictures/logo.psd on their own computes.
You should use jpeg, png or gif, depending on what's more appropriate for your image. Take a look at this other answer for guidance:
https://stackoverflow.com/a/392646/1203176
You can't use a PSD in your website. Convert it to PNG, JPG, GIF or some other format.
You can do this by clicking file > Save for Web.
In the right corner you can select the new image type.
PSD is not a valid web image format. You might export your image in one of the following formats:
JPEG / JPG
PNG
GIF
You must convert it to png for exemple. to do that just open your logo.psd in photoshop and then click file==> save as and choose the png extension.
Web browsers do not render .psd files. This file extension is only properly understood by Adobe Photoshop.
Open your .psd in Adobe Photoshop
Select File -> Save for Web and Devices...
Save your file as .jpg or .png
Use this new saved file as a substitute image where you have the .psd in your .html file
Related
How to get an icon from font? Or convert font icon to .svg. I more interest in process (not third-party services)
On Windows, what I did was to install the font locally and then go into Character Map and find the symbol I'm looking for.
Then I copied and went into Illustrator and created an empty text box, pasted the symbol and then selected the icon font.
Then I just right clicked and converted to outline and exported to SVG.
If you don't have Illustrator, try doing the same thing within Inkscape (it's free).
You don't need to convert them into svgs by yourself, they already provide you with the svg code for each and every icon they offer on their official website; You can download the equivalent svg code for an icon of your choice from the following link:
https://github.com/FortAwesome/Font-Awesome/tree/master/svgs
There you will find svg code for all the Regular,Solid and Brands icons that you would see on the https://fontawesome.com/icons
Simply goto the https://fontawesome.com/icons choose an icon of your choice that you would like to use in your project and find the corresponding svg file from the list of files that you just downloaded from the above given link;
open the svg file in a code editor and copy the shape code from there which you can further consume!!!
HOW TO CONSUME? Well that's another topic....
P.S: Here is the link to the sprite file to download all the svg shapes in one file:
https://github.com/FortAwesome/Font-Awesome/tree/master/sprites
Chrome has an extension called SingleFile. It basically saves a web page in a one file *.htm page that is a clone of the original website. I have seen something like this done with Mozilla MAFF format. The MAFF format saves the file in *.maf, and is you want to see contents (html, css, images etc.) you can change the format to *.zip. Then you can unzip it. With the SingleFile (Chrome) you can’t unzip the file by changing extension. Does anybody know how this is achieved? Is this a known thing that *.htm can offer? Thanks
The MAFF format saves the file in *.maf, and is you want to see
contents (html, css, images etc.) you can change the format to *.zip.
Then you can unzip it.
I'm assuming that you're really asking just how the image files are stored in .htm since html and css can easily be stored as text in htm.
It uses uuencode/uudecode to embed image files in the .htm file. More on that here:
https://en.wikipedia.org/wiki/Uuencoding
This is why changing the extension to .zip won't turn the file into a zip package that you can unzip.
Illustrative side-by-side screenshots of external vs. embedded image.
I found this article may help: http://www.techgainer.com/enable-single-file-mhtml-support-chrome/
On Chrome address bar, type chrome://flags, then hit enter. Now use Ctrl+F (Command+F on Mac) bring search bar and search for mhtml as I did below. Once you find the option, click on Enable link.
To be clear I'm definitely not a very good graphics person... but I needed some number icons, and looking all over IcoMoon I could only find one set: http://brankic1979.com/icons/. The problem is I was expecting a CSS sheet or something I could download and then reference like a Bootstrap glyphicon, e.g., <span class="glyphicon glyphicon-name"></span>. This set is downloaded as a PSD file. Honestly I have no idea whatsoever where to go from here...
It seems like I can use IcoMoon to generate the icon if I import an SVG file, but I have no idea how to convert the PSD file items to an SVG file (I tried to copy one individually to a new canvas, but save as SVG is not an option). Any help appreciated!
Just do the following in Photoshop:
file > export > export as... >
than in the top right corner you see an area called file settings and then it says format. You just click the drop down and change it to a SVG.
I am trying to convert a word document into html. I used an online converter http://word2cleanhtml.com/ but it does not keep the pictures I have in my file. From the html I will be making a nook and kindle ebook. Does anyone have a tool or suggestion for this project?
Using save as html in word doesn't keep images either.
Download the KindlePreviewer: http://www.amazon.com/gp/feature.html/?docId=1000765261
Then, save your file as HTML. Images will not be part of the html file, instead they are stored in a separate folder.
Open the resulting html file into the KindlePreviewer, it will find the images in the images folder and add them to your book.
I have developed a django application to show svg image on browser.
I have vss image that i saved as svg and placed in media folder with appropriate settings
Problem: when i try to view the svg image through my django application , images not displayed.
To verify if my project setting are correct i look at the page source and its having svg content.
When i directly access the svg file using full path to svg file , it appear correctly.
Also when i create small svg file to draw circle at same location that is media and try to view it , it appeared on browser through my django application.
To me it look like svg file which i created from vss have some tags that contradict with html and hence not displaying svg image in browser.d
You should use models.FileField instead models.ImageField, and in your template use it as image tag.
The issue here is that Django uses the PIL library to validate that uploaded files really are images
more about this issue
And if you have troubles with render SVG images in browser, you should use third party library, e.g. Raphael.js