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 10 years ago.
Improve this question
Can anyone give me any advice or direct me to a good tutorial on converting an Adobe Illustrator template to a WordPress template?
I've read a lot about doing this by using slices, but I've also heard sites built with slices are a nightmare to maintain. This site will be updated frequently so I can't have that problem. Also, the site's background has a gradient, so I'm not sure how slices would work with that.
If I have to use slices to make this template though I could go with a solid color, but the gradient is preferred.
Thanks
Use slices just to cut up your site in a way that allows you to use current CSS techniques. For example, a small slice for a background image that's a seamless pattern, or a thin, tall slice for a vertical gradient (you'd use CSS to repeat-x it across). You'll probably need to hide various layers as you slice to get the right bits and pieces. You've probably read folks who have had issues with the old concept of slicing a design - where the whole site was built on pieced together images, and making edits was a pain as a result.
If you just use slicing to basically grab the individual elements you need (read up on image spites as well for efficiency!) and background images - just the parts you need whereever you can, because you can repeat vertically and horizontally - you'll be just fine.
You are going to want to break down all of the elements of your illustrator template. And then build that from the ground up on creating your Wordpress theme. Since you have a gradient background, slicing it all up would not be the best option. Take all of the elements of this Illustrator template and save them separately.
Then I would familiarize with the steps on turning these elements into a fully function Wordpress theme
http://wp.tutsplus.com/articles/news/building-wordpress-themes-from-scratch-a-new-book-from-one-of-our-wptuts-authors/
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm building a photography portfolio website, which will have a fluid, responsive design. To have the images look good at all sizes, and to not have to deal with retina resolution issues, I'm thinking of just using SVG files for all images.
Using SVGs sounds like a perfect solution to these issues, but for some reason I haven't seen any websites exclusively use them, which makes me wonder if there are any downsides to them (aside from lack of support in IE8, which I don't care about).
If you use them too much, or in animated form the end user might have some performance issues, especially on smart phones. Icon fonts are much CPU-friendly, but they are much simple and monochromatic.
Other than the lack of support for older-browsers, there's no downside to them. We love SVGs.
As mentioned in the comments, I would go with SVG icons/sprites/cartoons, and stick to bitmap/raster formats for photos. Photographs are bitmaps by nature, and when trying to convert them to vectors you may find some issues:
Not everything can be converted into a vector... or it could, but at a high price (bigger file size, complex files that require more processing). Then we could start a whole debate about file size vs image quality.
You are limited by the camera/lens technology: using photos in SVG may give crispier/sharper edges on scale, but the details inside won't appear because they are not there (e.g.: you may have a picture of a hand in SVG, but it doesn't matter how much you zoom in, you may prevent pixelation but you won't see the cells either).
Older browsers will not support the format (although you already mentioned that this is not a problem in your case).
Then there are other issues specific to a photography portfolio/store website:
If you are planning on selling the pictures, by using SVG you'd be giving the product away for free: right-click, "Save image as..." and the user will have the full size image without paying.
You could add a message/watermark to prevent that (or to sign/give credit to yourself), but watermarks would be "easy" to remove. And sadly we all know how the Internet works.
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 7 years ago.
Improve this question
I've been an IT pro for awhile and I am recently getting more and more into web development. I'm especially interested in HTML 5, CSS 3, JavaScript, jQuery, and responsive design concepts. One thing I always seem to have problems with is images. I'm hoping some pros here can help out someone just starting.
Where do you find images to use for your client's sites / or your own sites?
Besides taking your own pictures, is there a "go to" site that devs use that has good variety, high quality, and is preferably free?
Once you acquire some images, do you go through a routine of re-sizing them or otherwise fixing them up for use on your site? Gimp is pretty good for re-scaling, but sometimes the image quality degrades. It's probably best to get good images with the right size to begin with. Is there some CSS magic that devs typical use to get their images the size they want?
Like I said, I've been using Gimp to do simple things like create cool text, re-size images, and create basic banners. Is this a pretty good tool to use for this, or am I missing out on something better (and easier to use).
I've read a lot of articles online, but I trust people's input on this site.
If you need images for production, that you yourself can't make, you can check out shutterstock, for example. If your clients need photos or graphics, they will have to pay for them, one way or the other ;)
Here are some good primers for dealing with images on the web:
Adaptive images - http://adaptive-images.com
or
Responsive Images - http://scottjehl.github.io/picturefill/
Retina Quality Images on the Web – http://imulus.github.io/retinajs/
With Bitmap images (Photos for example) always get the largest you can get and scale down to the sizes you need. With Vector - SVG for example - you can scale without losing quality, but when you scale vectors you will likely have to rework the drawing, because the proportions will not fit.
GIMP is open source and if you can not spend any money it will do the job. Like is said: scale down from large photos. No the other way around. You will lose Sharpness and Quality fast when enlarging images.
I don't know of good Photoshop alternatives on Windows. But I could give many great and cheap alternative for Photoshop, should you be using a Mac.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am new to web design, and am struggling to get my head around the design aspect.
Let me be more specific in my question...do most people make their websites look attractive, with 3d boxes, shadow effects, textured backgrounds etc with CSS entirely? Obviously photo editing would be done elsewhere but being new to CSS it is hard to see how it could be as powerful as using a piece of software.
For example - the website below...would the main nav bar at the top (with a different texture to the background), , the actual background and the box with Online 3d kit builder etc all be designed using CSS or do designers tend to create those types of objects elsewhere and just reference them as images in CSS code?
And referring to the images just below the main picture, would they have the link bar put on them with CSS or in another programme?
I realise all people do things differently, but I would really appreciate people's views/exeriences.
Link - http://www.mkksports.co.uk/
Thanks in advance
In this case, the backgrounds and logo are made elsewhere and referenced by the CSS. The buttons in the header (including their orange button look on hover) are pure css. The teaser images' ("UNI SHOP", "BESPOKE SERVICES, etc.) overlay text and formatting are pure css.
The idea: if you can do it in CSS, do. It makes it much easier to change the whole site at once, and keep it consistent. For example, you wouldn't need the same designer's original photoshop file to make a completely new teaser image. Just wrap the new image in the right class, copying the markup, and you've got a new identically-styled teaser with the exact same formatting effect.
You should always use CSS for styling whenever possible. CSS loads much faster and uses less bandwidth than loading a bunch of images. Any time you can use CSS to get the same effect as you could with a graphic design program, you should.
With CSS3 and HTML5 it's quite easy to accomplish a lot of the looks that used to require images.
That being said, the site you referenced is using background images for the navigation/page background, but they are using CSS for the hover effect on the links in the menu.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
my new website is now finally finished and it runs pretty smooth, on most devices i tested. the only thing I optimized was the code, so i deleted all comments and other unnessescary lines in all .css and .html files. but beyond that, what else can i do to optimise a website specific for mobile contextes?
you can see here here (all images are only used for demonstration): http://mbaljan.de/weblab/sites/designtisch/
Firebug "page speed" provides lot of optimization options . You can try them .
You consider changing what is being served to the browser based on either internet connection speed or device or both. For example, serve smaller images when the website is being viewed on a mobile device. That would speed up the load time. Check out Adaptive Images to do that: http://adaptive-images.com/
Apart from that, trying to reduce the number of files being loaded is a good idea. E.g. 1 jQuery/javascript file. You can also try to minify all your javascript files (and CSS if you really want to) to reduce their files sizes and decrease load time. If you intend to modify those files again in future you'd have to keep an uncompressed backup though.
Check out: http://javascriptcompressor.com/
Another thing you could make sure you're doing is using image sprites. That way you reduce the number of image files being loaded. This won't work with Adaptive Images, so I find it best to use sprites just for things like logos and icons.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
My initial searching indicates that for security reasons I might not be able to do this, but I'll ask anyway. How can I get the color of any specified pixel on a web page?
To be more specific, this is my own web page which contains background-color, images, css-modified-elements. I need to know the color of a specific pixel on the fully rendered web page. The info can't be from a screen-grab, because I want to modify my fully rendered page.
Ouch !!!
Did someone really “minus 1” me for asking genuine question?
Tough crowd!
To be more specific:
I want to add a user-moveable canvas element to the web page that visually alters the part of the web page that the canvas is hovering over. Think of the canvas element as a magnifying glass that the user can move across the web page. But the actual effect I want the canvas element to produce is a color-filter (hence the need for the underlying colors).
Can't be done w/ script+tricks. Maybe via a plugin
If you can set up a server-side browser to render pages for you - that might work.
https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
Ok a few more details here....
With Chrome plug in you can load up your page, and use the little dropper tool to select a segment of the page that you are interested in finding out the color. It's straight forward, but to your "Edit" its sort of screen scraping. Not sure if you can or can't use chrome.
If you can't use a plug-in, do you have the ability to select the html element via right click?
You could use the html2canvas library to rerender your webpage to a canvas whenever your DOM updates, then grab the pixel information from the canvas.
However, it sounds like what you're trying to achieve might be possible to do with css filters. Here's a demo of what css filters can do.
You would need to render two layers with the same HTML, where the top layer has the filter applied to it and is cropped to cover only the desired area.