Tag Info

New answers tagged

0

I can only speak of personal experience, but I tend to contain my web designs in Photoshop to a single file with different layer groups, as suggested in the comments. This has the upside that all visual 'language' is identical, for I copy any layer I need from elsewhere in the file. No header type that accidentally has another font size, or standard colours ...


2

I would say no, and here's why. If you prototype in AE, you're going to be disappointed. The web is nowhere near as robust as AE when it comes to motion graphics. It really just depends on your programming level and the tools at your disposal, I suppose. I would much rather prototype in an actual web page that way I'm sticking to the "laws of the web" and ...


1

There are PSD templates you can download and/or buy which typically come with actions that place your design into their (three different screens showing responsive design in your case). Just do a Google search for "mockup template psd" and you can click on just about any of the first few results.


3

I'm more of an After Effects guy than web design so I can't really give an professional opinion from a web standpoint but you can definitely design really nice UI's with After Effects, actually many UIs seen in movies are made in After Effects (with some of the assets made in PS and AI of course). It doesn't have such highly sophisticated vector tools like ...


0

I would suggest use retina images in website.This is best way.Please see this link. http://imulus.github.io/retinajs/ The reason of images see blurry images in mobile. http://www.alaress.com.au/2011/04/developing-for-high-dpi-devices/


0

Please see this links.I hope to u useful this links. http://blogs.adobe.com/jkost/2013/01/viewing-photoshop-cs6-in-low-resolution-on-a-retina-display.html http://blogs.adobe.com/jkost/2013/01/retina-display-support-and-photoshop-cs6.html


3

I did some more research on licensing and came across the following: Can I use Typekit web fonts for anything other than a website? No. Our web font license requires that the fonts be added to a website with the Typekit embed code. If the website or web app is viewed in the browser (either on the desktop or on a mobile device), it's covered by ...


5

My understanding is No. The page view cap is there to gain further money for Adobe if you need more page views. It has absolutely nothing to do with bandwidth or foundry licensing. Adobe has plenty of servers and bandwidth to serve everything and they are the foundry. Adobe would see embedding a Typekit font, with anything other than their own embed code, ...


0

Select the text layer, go to Edit>Transform>scale Do you you see the text with transform pints withing the document area ? If yes, probably change text color or increase font . If no, it is out side the document area, you need to re-position it.


0

Either the font is too big and the text area is small or caps lock is on.


1

Maybe having an icon about subject or logo or theme of the external site representing will help.


0

If you can change the HTML/markup: just add a class to those two particular elements and style that. If you can't: Use nth-child or preferably nth-last-child(n). The latter will count backwards from the last child-element instead of forwards from the first. The code below would select the last two li elements in a ul container with the class main-nav ...


3

This seems like a simple matter of a two step workflow. Crop all images to allow the same amount of white space around the product. Resize the images after the crop so they are all the same size. That should get all the images the same. (These are smaller because I only had your 250x250 images to work with)


2

Set some standards based on the limitations of the images you're working with As discussed in the comments on Scott's answer, a good option is to choose your smallest image, enlarge it as much as possible without visible quality degradation, and then use the same amount of white-space available in that image as the benchmark for all other images. Set a ...


4

I've managed to achieve what you're after. First off though, your code was very messy and in future you should prune/clean it before asking others to help you fix it. I took a 15 minute look at your code to understand it, and then rewrote the parts you're asking about with much less mess. This is what I get with the structure I've prepared for you: The ...


0

Google use a capital A underlined and italicised in Gmail - - but I wouldn't recommend that. Even after months of frequent use I still end up puzzled looking at every icon every time I need formatting options: I'm just not ever looking for an underlined italic A when I'm looking to change formatting. So my suggested workflow would start with what people ...


1

{CSS} inside a document icon is the representation most often used for changes to a stylesheet. If your goal is to simply represent "style" an "Aa" icon is most often used. However you may also consider using an artist palette as older versions of windows programs would use this.


0

To be honest I don't really see the problem. Upping the resolution of that particular image should not mean a very much larger file size. At least not if you compress it right. In any case, your best option is probably to use media queries as listed here: For including high-res graphics, but only for screens that can make use of them. "Retina" being ...


-2

Could we change text link color when hovering over help menu items? The color used at the moment seems too similar.this may help us distinguish it , but is it possible? idea from EAN BARCODE


-1

I would suggest you create svg file from original logo creative


0

I would suggest you export your logo as an .svg file to fit in retina devices if that is your intended target. Since SVG isn't fully supported across all browsers I would suggest implementing PNG fallback: <img src="logo.svg" onerror="this.src=logo.png"> if (!Modernizr.svg) { $("img[src$='.svg']") .attr("src", fallback); } SVG Fallback per ...


-1

1.-You shall use a image type "png" for drop distortions(Use Natural Sizes for mobile devices). 2.-check resolution screen mobiles. now days resolution screen is great 3.- Use tag for mobile browser not change resolution ( Use custom with to mobile devices) <meta name="viewport" content="width=device-width,user-scalable=no"> 3.-Use custom css image ...


1

First off, I would say that you should follow the KISS (Keep it simple stupid) principle whenever in doubt. You have a lot of text to cover and the fanciness of the page is making it look horrible. Plus you text is too big to read. What you want is a gird based website, There are lots of templates (both free and paid) out there for you to check out. Here ...


2

There are hundreds of stock photographs like these for sale all over the web, these being some of my personal favorites If you just search for "device mockups" you should get a fair few results. There was a pack a while ago that was absolutely fantastic, that you only needed to drop your screenshot into a smart layer and it would adjust it to the device ...


2

Docpad is one of my personal favorites, especially the implementation used by SemanticUI which gives the option of demonstration displays, or keeping things short and simple. Ideally documentation should have a few key elements Grouping of articles with common themes Clear and meaningful titles. Rather than using the function names as a title, use the ...


3

I think you're off the mark but not necessarily for design, though not necessarily NOT for design either. You're off the mark because you can't seem to justify the reason behind the shift. If you're changing someones branding you should have very sound reason to do so, it doesn't appear you have that. See this question and the answers as possible help on ...


3

Well there is now 978.gs that is better than 960. That said there is no reason to use 978.gs or 960 but since the OP asked for a web design template other than 960 I provided the solution of 978.gs. You ask for a design template when you should be designing in the browser if you're using Bootstrap. If you use 978.gs you will need to build your own CSS which ...


1

Unfortunately, if the logos were merged with the background (make sure it's not actually a Smart Object, though) your best option is to redraw the whole thing. Any chance you can get a new file with the correct layers? The PSD should be optimized for web, and the designer should know how to prepare the assets. You shouldn't have to manipulate the original ...


1

Alternatively, you could use an SVG at 385x105 in place of a PNG or JPG. SVG's are resolution independent – which means none of this "is my logo going to look good on everybody's screen" stuff to worry about. And often times, an SVG will be more light-weight than a JPG or PNG. AND SVG's play very nicely with media queries.


2

First, as some others have mentioned, the logo image is being displayed at a size different from its actual size. Doing that leaves it to the browser to perform the sub/supersampling needed to resize an image and browsers aren't awesome at that. Along with that, it looks like the logo file you are using is in fact a bit fuzzy. PNG is a good format here, but ...


2

It's a dynamic image set to resize based upon browser window size. Some sizes will look poor. Setting a specific size for the image (then adjusting the site CSS media queries to call other sizes for other screens) would server it better. Most web site logos are not set to scale when the browser window size changes. While that theory works wonderfully for ...


1

It looks pretty crisp to me, but it does indeed look slightly squished. Maybe the dimensions of the original image produced by the designer are not similar (ex: 1000x1000 --> 2000x2000) to how you're displaying it on your site?


1

Something even better than post-it notes: "Magic whiteboard paper". Basically, it's a type of thin white plastic paper with just enough static electricity that it sticks gently to any flat surface, without glue or mess: Since it's static electricity not glue, you can move it around as many times as you like. Since it's basically paper, you can buy a roll ...


1

You can also try adding a grain on top of the gradient- it will kind of simulate PS's gradient dither. Effects > Texture > Grain. It's a raster effect so not optimal, but it should help.


0

To answer your boiled down question, while often times this isn't needed—or in fact will take more design/development time—but in your example case there can simply be a narrow crop of the image (with retina @2x versions too) for the mobile layout. That's the beauty of CSS media-queries, that you can include specific versions of the image a wider range of ...


3

Does the logo work from an aesthetic point of view. It's...kinda ugly...which...yea, I suppose it does work. And I don't mean that in an insulting way. If the intent was to make a rather haphazard logo to go off of the 'ugly' aspect, I think it works. If that wasn't the goal, then I'd suggest rethinking the layout a bit. It's hard to read at first ...


0

In illustrator save for web settings increase no of colors to get bands removed.


0

Nunito http://joelcrawfordsmith.com/new/font/avenir Nunito is an excellent match to Avenir. The ascenders are slightly higher in Avenir but even the most persnickety designer would have a hard time telling them apart.


3

The dimensions are variable. User Joojaa is correct when they say that "You can no way know what size or shape the recipients screen is going to be." You cannot set any explicit value in your CSS, because if you want to consistently support all browsers, you have no way of knowing what size it's going to be. I'm going to give you one method, using just ...


1

For the logo at least: Some of the logo has gradient effects and some doesn't, eyeballs and teeth do, but the rest doesn't... this doesn't make the logo look cohesive. Next, parts have drop shadows, others don't ('Ugly' does, 'app.com' doesn't), and the drop shadows are different colors... again doesn't look cohesive. I would make the whole thing ...


0

What do you mean by "it does not scroll vertically"? That you do not want it to scroll vertically, or that for some reason it is "fixed"? There is no such thing as guidelines for web page withs and heights anymore. As user2725502 and Joojaa points out: the massive variety of devices makes this wildly impractical if not directly impossible to do sensibly. ...


0

These days webdesignerd tend to use responsive values. So make it responsive by using %. Although this makes using images tricky


1

The best way around this is to expand your fonts/any other assets in your SVG that aren't rendering properly when you open it in the browser. What this means is, you need to highlight your text areas and turn them into Illustrator paths instead of leaving them as selectable text. The easiest way to do this is: Select all of your text Go to Object >> ...


0

Finding cursors I'm sure that a simple search could pull up many free cursor sites. The first site in the linked result, Open Cursor Library, seems fairly extensive to me. I'm sure that you should have little trouble if what you want is to use cursors. Creating cursors If you want to design your own cursors instead, you could surely open Photoshop or Gimp ...


1

I would save a backup with fonts active, and then save another version with fonts converted to outline, saved as .svg format for usage on the web.


4

Why not put all of the external links in to one dropdown list entitled Partners or similar, and use all of the subtle indicators suggested in this post? I won't pretend any of these are my own ideas, they come from all of the others on this post. I've just added the twist of putting it in to its own dropdown menu, because to me, that makes much more sense ...


3

As your design should just be a guideline, you can make every design you can imagine. In ye olde days, people would slice up photoshop files into separate images and then use frames or tables to stick it back together as a website. This created bulky, non-responsive websites. Fortunately, web design has developed. Every self-respecting developer should use ...


0

It depends entirely on the client. If you're talking about a business client, they typically don't want a design, they want a complete product. They likely want to higher a firm that design and produces the web site. If the client is another design firm or development firm, they may just want you to handle visual design, and they'll take care of ...


3

If you have to include each one on a site why not create a multi-color navigation panel that uses the colors for each site if they are different. Clicking the top level will target a new page to the site, but also allow for drop down navigation with the color styled as the background or do a solid line on the left or right to still indicate that you're in ...


8

I'd simply use a small, unobtrusive "New Window" icon....



Top 50 recent answers are included