Tag Info

New answers tagged

0

You'll find that every designer has a different process. I used to be PS or nothing, but now that websites are less photo based and rely more on CSS and SVG's for graphics I've become devoted to Illustrator. I still use PS to edit my photos. Using symbols have become valuable as it saves time in the long run, say you need to make a change to an icon, you can ...


0

You could create divs for the body copy. That way you control the width or make it relative to the screen's size but keeping smaller proportions inside the divs. For every div you create, you could set width, color, span, etc. See this page: http://www.w3schools.com/tags/tag_div.asp


0

Since there is no code to speak on there is no context, the issue can be related to pixel interpolation. Try looking for hinting and you'll get my draft, but the level the software allows you to play with that kind of stuff is not that high in comparison to Fontlab hinting, for example. Snap to Pixel or make the graphic a bit smaller, or choose Optimize for ...


4

Since this is tagged as web-design: Although your purpose for these calendar images is not clear, in order to create this in the most dynamic way, I'd recommend using HTML's little know <time> element (which is supported back to IE9) and CSS as opposed to creating a bunch of variation images because it's much easier to update. Here's a basic ...


1

A quick and dirty way in photoshop would be to open the image in photoshop, go to image/adjustments/hue&saturation, select colorize and then tune the Hue and Saturation sliders. Because you are using a png, you might have to clip out the parts you do not want to be effected and leave those parts a layer above the copy of the image with the parts you need ...


1

Personally, it all depends on your skills and requirements. Skills being able to learn and grasp stuff quickly. Requirements being finances. Learning something will need time., and that would kill your productivity for the time being. So if you have a lot of time to kill, go ahead and learn to code. I've been a designer for the last four years and i am ...


2

I work with Chinese-English prints a lot and usually people use separate fonts for Chinese and English. And like Ryan said, if English uses serif fonts, then Chinese uses serif fonts, same for sans-serif. We don't use Chinese font for English text because Chinese font is double byte and often will display latin characters in a monospace manner (unattractive ...


-2

Mac:"Hiragino Sans GB" win/mac :"Microsoft YaHei","微软雅黑" http://www.lofter.com/


2

I think the reality is you can do it either way. I would certainly try to use a font up front that supports English and Chinese, if that failed though I wouldn't lose any sleep over selecting a different font for the Chinese version. Just try to keep the overall feel the same between the two. If you use a simple sans-serif English font then try to find a ...


-1

If you're on a Mac you should check out PatterNodes, it's an app for making custom patterns using a parametric interface that makes it very easy to tweak the result and make something subtle, but your own. http://www.lostminds.com/content/product.php?patternodes


1

Try to ditch the border and especially the border-radius on your elements. Get rid of the padding from each of the three containers, so the list elements touch each other. Divide them just with a low contrast 1px solid line. More padding on the list-items would also look good. Try styling the headlines a little bit more subtle. Finally - I personal - would ...


1

One of the aspects of 'flat' design are flat areas of colour, without an outline. Your current design is teeming with outlines—try and remove those and give the areas they outline contrasting colours. The 'flat' design aesthetic that's very trendy at the moment also eschews rounded corners for regular, 90° corners, you might want to use those as ...


0

I'm going to assume that because this list is in alphabetical order from left to right, that your html structure was so that when the design stacks on smaller viewports that it would be in alphbetical order as that is the order in html. However, to achieve the design you want, I would use media queries to hide and show two different lists. Then I would use ...


4

I turn my vector images and logos in to a font (or fonts). Take your .ai files (after you clean them up, compound path, and crop the viewbox) and export as .svg. Then use the icomoon app to convert to a font. This will display at any size, any resolution crisply. https://icomoon.io/app/#/select Learn more: ...


1

You need to export your graphics at double resolution, say if for a standard screen you need an image at 64x64 resolution, you need a 128x128 copy of it (or even not a copy) that will be later processed on retina/high-dpi screens. But different environments may process them in different way, e.g. in HTML/CSS you need additional media queries for every kind ...


1

You dont have to rewrite your code .distributor-middle { text-align: center; } .distributor-right { text-align: right; } This will give you a centered text in the middle. You can also wrap the individual items in another div and give the middle a margin: 0 auto and text-align: justify or something and the last one float: right;. if you want to ...


0

make a layer above, fill it with the color of your choice. blend mode color or hue. you can use a layer mask and get in real close at that point if you want to keep parts of elements their original color. to make it transparent just ctrl click on the layer with the elements to get all dem good bits selected then you wanna click on the layer with ur color ...


1

In order to give ID's to groups and paths, you have to give them names in Illustrator. So, if you have a layer called my_layer and a path called my_path in Illustrator and you save them as an svg, you will get: If you don't name your path in Illustrator, it will save it with a random id. If you name the path and the layer with the same name, ...


1

Your headline font should fit in with the font used in the logo, this is a good design practice. "Fitting In" could either mean mirroring the same look, or providing a suitable contrasting font partner instead. ChunkFive has no WebFont variation, but the google font Alfa Slab is similar in that it is a Slab Serif as well as having a very heavy weight. ...


3

I don't think it needs to be the same as your logo, particularly if it's somewhat exotic, but it should complement your logo. If your logo has big chunky letters, the headline font should have something in the same genre rather than Bodoni. The logo should look like it belongs to the website, not that it had run there when it was a young logo, playing at ...


0

http://www.myfreetextures.com has a bit over 1000 free textures and images


2

Guidelines for choosing the dimensions of your full width browser image I've learnt these through research throughout the last year, and experimentation over the last few days for this specific use case. Choose an image with a single focal point, or no focal point at all. Your source image file will need to be huge (minimum 5000 x 5000) if you want to ...


1

I'm new here but I'll try answering your question based on my experiences in the web design field. First of all, in the current web design trend, we don't actually use flash anymore since it's not widely supported by mobile gadgets. We normally use html, css & jquery scripts or even a CMS(content management system like wordpress or magento) to built the ...


3

Asprilla, While above comments make very good technical points, I suggest tailoring your work to particular client, which starts by looking at their current site's Google Analytics - Reporting / Technology / Browser & OS / Screen Resolution. This way, you will be spending your time and your client's budget wisely by addressing your client's specific ...


6

There are several things to keep in mind when serving images to viewers. Keep the image ratio the same as the original dimensions We do this to prevent the image from getting skewed and to prevent images from being blurry. We can either keep the dimension ratio the same or clip off parts that don't fit. When using an <img> element or ...


5

First, I'd restructure the HTML. Having a div for every single line of text is overkill. All you need are 4 divs then paragraphs for the text. Containing div Three column divs paragraphs for text <div id="wrap"> <?php include 'menu.php'; ?> <div class="inner body"> <section class="round-border"> <div ...


3

Here is some additional information you may find useful. Screen Size Statistics Popular screen sizes vary, so here are some statistic sites that list screen size usage by percent, browser trends, operating systems and more. http://www.w3schools.com/browsers/browsers_display.asp http://www.netmarketshare.com/ Hero and Large Images A great, easy CSS ...


1

The short version Try to design for compatibility with the smallest viewport resolution: Desktops: 800x600 / 1024x768 (in pixels) older mobile phones: 320x480 (in pixels) tablets: 800x1280 (in pixels) By picking the lowest resolution, you ensure that the design will work for people with smaller resolutions as well as larger resolutions. The long ...


0

I'm doing the same all days. The only advice i could give you is: start with align to pixel from the very beginning of the project. Change from align to no align breaks all. Join me in the search for a better app for UI design, today I think illustrator's goods overcome its bads.


0

We are in similar situation working with PSDs to produce high fidelity web sites and our approach was to build an app to visually mark up layouts to quickly create a comprehensive spec. We're still fine tuning it, but if anyone is interested I'll be happy to share a link once it's ready - trying to keep blatant self promotion in check here.


0

As someone working with a developer I think it would be really useful to share with them the PSD in Creative Cloud (and I don't only mean it from being a Product Manager at Adobe) because not only can you enable people to download the PSD but you can also see at a single glance all the fonts/font sizes, the colors, the gradients used and use measurements ...


0

When looking at the images from the site, it seems that they were not saved exactly the same. Displayed image: Hidden image: The bottom image seems a bit grainy compared to the top image. I would double check to make sure both images were saved the same, and see if that fixes your problem.


3

"what is the process/workflow" There isn't one. Or rather, there isn't just one. It will vary from project to project, team to team. Common processes I've seen. 1. Send a large PSD to Dev The designer spends all their time in Photoshop then sends the file to the developer to figure out how to turn it into HTML. This can work when the designer has zero ...


0

Flat design = a generic term that refers to the trendy modern UI aesthetic of blocky flat icons and blocks of color. Metro Design = Microsoft's new UI design (now called Microsoft design language) for Windows 8 that uses the flat design visual aesthetic. Material Design = Google new UI design for Android that uses the flat design visual aesthetic. (Note ...


4

Material design is unrelated to flat design in its principles. Material design is skeuomorphic in that it is an attempt to make web design more realistic in how it portrays elements, using layers and animation in a way that makes sense outside of the browser. Visually flat design and material design are similar at the moment, but material design can be ...


0

I agree with Matrosov Alexander, and being a newbie here cannot comment, but have something to add. Many web designers have different workflows. In my experience it is best to ask the developer what their preferred documentation would be. For example, as a web developer if I cannot be directly involved when UI decisions are made I like to see ...


-1

in my view SVG is best than PNG use HTML 5 SVG codes to insert these SVG in your page


2

the ideal width for good readability ... should not be more than 600-700px wide This is roughly true, but only for content sections, generally speaking large blocks of text. Having a readable type, somewhere from 13px to 17px (generally 15-17px) depending on the nature of the site, if very important and the width of the section should be readable with ...


1

This is perhaps a question of taste but there are a few obvious problems with your approach. I have been reading about the ideal width for good readability and discovered that the content width should not be more than 600-700px wide. This isn't true, it depends on how your sizing your text and what typeface you're using. The actual typographic process ...


0

As a developer I can say that you only need to send a file to a developer and be sure that developer has appropriate software to open this file like photoshop or other. About fonts: Of course if you use some main font you can describe it, but if developer has a psd a developer can check it without any your comments in case if layer represented as a text ...


1

If I understand your question correctly, then you have two options: You can hand-draw the icons on paper, and scan them into an image-editing program. You can turn the "icon" into a fixed-size PNG with a transparent background, or into a scale-able SVG file. Then, just upload that image into your website, turn it into a link, and position it correctly... ...


11

If you already have your banner and are wondering about the little drawings on top, then I can think of two ways of getting them: 1) Buy them online, already made. Sites like iStock or GraphicRiver offer vector illustrations with transparent backgrounds, so it's quite easy to open the files and just paste them on your banner. There are also free icons you ...


4

There is a lot of software out there, some free and some paid. Just to list a few: FREE GIMP Ultimate Paint InkScape Paint.Net Paid Adobe Fireworks Adobe Photoshop Adobe Illustrator CorelDRAW All of which have different learning curves, you can fin more graphics software by doing a quick Google search.


0

Material design is not flat, its a bunch of flat layers of "material" that are spaced out a little bit on the Z axis. This means that these objects have shadows and are supposed to come from somewhere when they appear on the screen and leave to somewhere when they are not needed anymore. Which means they don't just fade in and out. There are also a bunch of ...


4

The simple answer here is use both. The fact that you've named SVG as an option, means we can rule out photo graphics as an intended use case - because SVGs are only good for line-art graphics such as logos, icons and clip-art-like illustrations. If you are considering this choice for photo graphics, there is no choice; PNG will probably always be better. ...


0

I would stick with PNG to be on the safe side. SVG is still not fully accepted by many big internet companies & browsers. Although SVGs are scalable and are vectors they are often unnecessary, take up more space and overcomplicated the website. I hope that answered your question :)


1

This decision should be made on a site to site basis, depending on the situation. However, by using a mobile-first (that is, in order, not in importance) design, this decision can be made more easily. The easiest way to get the best results is to start with the essentials. By beginning with the smallest screen size that we plan to support, we know we’re ...


1

Short version: <html> - typically only add what you absolutely have to <body> - again add judiciously As your project grows the CSS specificity can and will come back to bite you if you're not careful. Some more details and resources you may find useful HTML is highly permissive, there are tons of ways to accomplish a task, espeically in ...



Top 50 recent answers are included