Лучший размер для шаблонов веб-сайтов PSD? [закрытый]

Я сделал несколько веб-сайтов в Photoshop CS5, но обычно я просто делаю их сырыми в notepad++. Обычно я делаю их живыми на сайте, редактирую код и обновляю страницу, чтобы увидеть изменения. Я хочу перейти к более профессиональному методу и сделать весь шаблон/дизайн в photoshop. То, что удерживает меня от погружения, - это самое начало lol..

какое хорошее разрешение для шаблона? Я столкнулся с различными учебниками и у них разные размеры. Например, разрешение моего ноутбука 1366х768. У меня есть 22IN LCD в моем офисе, и я знаю, что это действительно большое разрешение. Я бы предположил, что минимальное разрешение большинства мониторов-1024x768...

при создании нового шаблона в Photoshop для создания шаблонов веб-сайтов, какой размер я должен сделать образ и почему?

кроме того, поскольку мы находимся в теме, у вас есть какие-либо ссылки на хорошие ресурсы коллекций изображений и такие, что вы найти помогает вам больше всего в создании шаблонов? Я программист, и, как мы все знаем, большинство кодеров сосут изображения.. Я просто пытаюсь укрепить другую половину моего мозга:)

спасибо заранее!

4 ответов


Я бы предложил следующий порядок действий:

  1. взглянем на текущую статистику для наиболее широко используемые разрешения экрана. Как вы увидите, 1366x768 является самым популярным разрешением прямо сейчас, а затем старый добрый 1024x768, который все еще имеет огромную пользовательскую базу. И следите за мобильными разрешениями.
  2. фактор в необходимой экранной недвижимости, взятой браузером chrome и другим пухом ОС.
  3. начиная с проектирования для нескольких размеров экрана становится все более важным каждый день, я настоятельно рекомендую вам выбрать несколько целевых разрешений, а не только один. Все это может быть хорошо обработано CSS. Даже если вы ориентируетесь только на настольные компьютеры, все равно имеет смысл учитывать разные размеры экрана.
  4. Так как вы все еще получаете ваши ноги мокрые с Photoshop, вы можете начать с одного из многих шаблонов PSD на основе сетки доступны. Я знаю 960px один и 1140px один, но вы можете найти много больше. Вероятно, вам все равно придется использовать несколько сеток, если вы решите поддерживать более одного размера экрана.

и затем, когда вам захочется подумать обо всем этом немного сложнее, перейдите прямо к этой статье:Сказка о двух иллюминаторах Питер-Пол Кох.


посмотрите на smashing magazine и подписаться на их бюллетень, а также webdesignerdepot и проверить Codrops.net - ... Они имеют большие халявы, учебники и обновления стандартов. Я люблю проверять почту, чтобы увидеть их.

Что касается PSD-их нет установленного размера. Я видел профессиональный макет разработчиков wordpress в 1100px (высота настолько вариант на основе вашего макета). Я бы не рекомендовал намного больше, чем 1366px в ширину.

Я мог бы сделать 1366 или 1440, потому что это разрешение большинство людей увидит. Когда вы отправляете макет в 1920 году, люди думают, что сайт слишком мал, когда контент все еще 940-980, что они все

Edit:

Я сам делаю PSD либо на 1100px или 1440px в ширину, и основное содержание всегда 940-980px в ширину.

Я использую 1100, когда не так много, чтобы смотреть графически на фоне тела, и 1440, когда фон более важен для "ощущения" вебсайт.


вы хотите создать свой веб-сайт для наиболее часто используемого разрешения экрана, которое кажется 1280px 720px. Потому что то, что вы хотите, чтобы ваш ширину, вы можете создать любой тип фона и просто убедитесь, что вы исчезать это один цвет или прозрачно и использовать CSS, чтобы изменить цвет фона.

убедитесь, что у вас есть направляющие, которые помогут вам сохранить содержимое встроенным, наилучшим образом, создать новый документ с шириной 960-100px и высотой 720px, а затем перетащите направляющие на все четыре стороны.

затем вы можете изменить размер документа на 1280px на 800-960px.

причина, по которой у вас есть руководство на 720px, заключается в том, что все выше этой линии гарантированно будет видно на всех разрешениях, это называется "над складкой". Хорошие дизайнеры учитывают это, чтобы гарантировать, что аудитория будет привлечена к изучению сайта, слайдер рекомендуемого контента-это простой выход.


incomepitbull, я понимаю, откуда вы идете...
Я также разработчик back end, который пытается изучить Photoshop..
Многие дизайнеры переднего плана не знают, что происходит на стадии разработки...
В основном Photoshop moke up зависит от спецификации клиента...
Высота не имеет значения; используйте 960 px (12col, 16col, 24col), 980 px (12col, 24, col), 1000 px (100% отзывчивый дружественный для тех, кто не использует системы сетки) или 1140 (для веб-таргетинга больше мониторы ie не мобильный первый px...)
В конце концов, как разработчики, мы исправляем все эти проблемы; но хорошие макеты важны...