O melhor tamanho para modelos de sites PSD? [fechado]
eu fiz alguns websites no Photoshop CS5, mas normalmente costumo torná-los raw em notepad++. Eu normalmente fazê-los ao vivo no site, e editar o código e atualizar a página para ver as alterações. Eu estou querendo mover-se para o método mais profissional e fazendo todo o modelo/design no photoshop. A coisa que me impede de mergulhar, é o lol muito inicial..
o que é uma boa resolução para usar para o modelo? Deparei-me com diferentes tutoriais e dizem que têm tamanhos diferentes. Por exemplo, a minha resolução do laptop é 1366x768. Eu tenho um LCD 22in no meu escritório, e eu sei que é uma resolução realmente grande também. Presumo que a resolução mínima da maioria dos monitores é 1024x768...
ao criar um novo modelo no Photoshop para criar modelos de sites, que tamanho devo fazer a imagem e porquê?
além disso, já que estamos no tópico, vocês têm links para bons recursos de coleções de imagens e de modo que possam encontrar ajuda o máximo na criação de seus modelos? Eu sou programador, e como todos sabemos, a maioria dos programadores são péssimos em imagens.. Só estou a tentar fortalecer a outra metade do meu cérebro. Obrigado antecipadamente!
4 answers
- Veja as estatísticas actuais para as resoluções de Ecrã mais utilizadas . Como você verá, 1366x768 é a resolução mais popular neste momento, seguido pelo bom velho 1024x768 que ainda tem uma enorme base de usuários. E fique de olho em resoluções móveis também.
- Factor na propriedade de ecrã necessária tomada pelo browser chrome e por outro os fluff.
- desde o desenho para vários tamanhos de ecrã é cada vez mais importante a cada dia que passa, encorajá-lo-ia fortemente a escolher algumas resoluções-alvo em vez de apenas uma. Tudo isto pode ser bem tratado pela CSS. Mesmo que você esteja visando apenas desktops, ainda faz sentido considerar diferentes tamanhos de tela. Uma vez que ainda estás a molhar os pés com o Photoshop, podes começar a partir de um dos muitos modelos de PSD baseados em grelha disponíveis. Conheço um 960px um e um 1140px um , mas podes encontrar muitos mais. Tu vais ... provavelmente terá que usar várias grades de qualquer maneira se você decidir suportar mais de um tamanho de tela.
E então quando você quiser pensar sobre tudo isso um pouco mais difícil, vá direto para este artigo: um conto de dois viewports {[[6]} por Peter-Paul Koch.
Editar:
Eu mesmo faço PSD's em 1100px ou 1440px de largura e o conteúdo principal é sempre 940-980px de largura.
Eu uso 1100 quando não há muito para olhar graficamente no fundo do corpo, e 1440 quando o fundo é mais crucial para a "sensação" do site.
Você quer projetar o seu site para a resolução de tela mais usada que parece ser 1280px por 720px. Portanto, isso é o que você quer que sua largura seja, você pode criar qualquer tipo de fundo e apenas se certificar de que você o desvanece para uma cor ou transparente e usar CSS para mudar a cor de fundo.
Certifique-se que tem guias que o ajudam a manter o conteúdo alinhado, da melhor forma, a criar um novo documento com a largura 960-100px e a altura 720px, arrastando depois as guias para todos os quatro partes.
Depois pode mudar o tamanho do documento para 1280px por 800-960px.
A razão pela qual você tem um guia em 720px é porque tudo acima dessa linha é garantido para ser visto em todas as resoluções, é chamado "acima da dobra". Bons designers levam isso em conta para garantir que o público será atraído para explorar o site, um slider de conteúdo destaque é uma saída fácil.
Eu também sou um desenvolvedor back end que está tentando aprender Photoshop..
Muitos designers front-end são ignorantes do que acontece no palco do desenvolvimento...
A maior parte do Photoshop moke up depende da especificação do cliente...
A altura não importa; o uso 960 px (12col,16col,24col), 980 px (12col,24,col), 1000 px (100 % responsivo amigável para aqueles que não utilizam sistemas de grade) ou 1140 (por teias de segmentação maior monitores ou seja, não móvel primeiro px...)
Afinal de contas, como desenvolvedores, nós corrigimos todos esses problemas; mas bons mockups são importantes...