Загрузка...PSD макеты для новичков
PSD макеты для новичков
В этой статье мы рассмотрим какие есть PSD макеты сайтов для новичков, что бы их сверстать для портфолио.
Также можете прочитать статью «Как начать изучать HTML и CSS», это если вы плохо работаете c HTML и CSS или только начали это учить.
1. Piroll:
Это пожалуй лучший PSD макет который подойдёт всем тем кто первый раз делает вёрстку по PSD, так как, в ней нет не чего сложного при этом, в нём есть моменты которые заставят не много попотеть.
В целом этот шаблон хорошо подходит для агентства, портфолио, современного бизнеса и личного использования.
2. Minimo:
Это опять же один из лучших PSD макета которые могут быть полезны новичку, единственный его не достаток в том, что из-за его минимализма он очень простой, но в целом хорош, но его плюс в другом, в том, что кроме главной страницы есть и другие внутренние, как для блога.
Современный, минималистичный дизайн для блога, разработанный итальянским дизайнером Chiara Canderan. В исходнике вы найдете макет главной, макет внутренней страницы с одной колонкой и макет внутренней страницы двумя колонками.
3. Trekking Store:
Это шаблон для интернет магазина, в целом тоже очень простой, но он научит вас делать магазины, что очень полезно, тем более такие задачи достаточно часто попадаются.
Но если кратко говоря, то это бесплатный PSD шаблон интернет магазина в современном, чистом стиле.
4. Smart:
Это на мой взгляд почти самый сложный макет который есть в этом списки, но только в том случае, если вы будите пытается внедрить анимацию во вёрстке, иначе он очень простой.
Простой и красивый landing. Архив содержит полностью редактируемый файл PSD. Создан специально для вашего бизнеса и обучения вёрстки.
5. MoGo:
Это наверное самый сложный макет из всех которых тут представлены, даже если мы не будем брать а расчёт анимацию, тут будут моменты которые заставят задуматься, а если вы ещё будите работать над интерактивом, то вам придётся попотеть.
Этот шаблон, выполненный в современном чистом дизайне. Отлично подойдет для агентств и компаний. Включает в себя следующие блоки: главная, услуги, работы, блог, контакты.
Вывод:
В этой статье вы прочитали какие есть PSD макеты сайтов для новичков, которые помогут вам обучится вёрстке по макетам.
Также дам не большой совет: во всех макетах которые тут есть, нет адаптивной версии, поэтому рекомендую вам создавать адаптивный дизайн по ним, чтобы и ему научится.
Раскройка PSD макета для сайта
У нас есть макет сайта, в формате PSD, мы хотим разрезать (раскроить) его на фрагменты для дальнейшей HTML верстки сайта.
Для этого мы будем использовать программу Photoshop
Шаг 1. Открытие PSD макета в Photoshop для раскройки
PSD — макет сайта для PS +готовые изображения, если у вас нет PS, либо вам лень это делать самим.
Разархивируйте файлы с архива в рабочую папку, если вы этого еще не сделали. Откройте файл с названием home-o.psd. Вид интерфейса самой программы Photoshop у вас будет отличаться от моего, так как у нас могут быть разные версии программы, и скорее всего сами окна программы у вас расположены, так как вам удобней.
Шаг 2. Инструмент раскройка
Найдите и выберите в панели инструментов (ToolBox) нужный нам инструмент «Раскройка» или он может называться «Нож», в зависимости от вашей версии программы. Находится рядом с инструментом «Рамка» или «Crop» в английской версии Photoshop.
Шаг 3. Разрезаем PSD макет на фрагменты
Пользоваться инструментом "Раскройка" очень просто, всё что вам необходимо, это выделить все необходимые вам фрагменты шаблона для последующей верстки. Но помните золотое правило: «7 раз отмерь, один раз отрежь».
Если вы не можете отрезать ровно необходимый фрагмент, увеличьте изображение до нужного вам масштаба, тогда перемещение инструмента будет с более мелким шагом, что позволит вам выполнить раскройку шаблона более качественно.
Шаг 4. Сохраняем выделенные фрагменты шаблона
Перед тем, как перейти к сохранению фрагментов шаблона в виде кусочков изображений, проверьте ещё раз, все ли нужные вам элементы были выделены. Если да, перейдите в раздел Файл – Сохранить для Web и устройств, или воспользуйтесь комбинацией клавиш Alt+Shift+Ctrl+S (Если хватит рук)
Шаг 5. Настройка сохраняемых фрагментов
У вас должен открыться следующий интерфейс, в нем вы можете просмотреть ещё раз размеченные области. Так же вы можете изменить масштаб изображения и его качество как в целом, для всего шаблона, так и конкретно для каждого выделенного фрагмента.
Вы можете выделить фрагмент, просто кликнув по нему, но убедитесь что в качестве текущего инструмента у вас выбран «Выделитель». Когда нужный элемент выбран, он подсвечивается и становится более заметным на фоне остальных фрагментов.
Для каждого выделенного фрагмента, вы можете выбрать в каком формате его сохранять, в каком качестве, устанавливать уровень размытия и метод оптимизации.
Обратите внимание – что эти значения указываются для каждого выбранного элемента по отдельности, т.е. вы можете различные фрагменты одного шаблона сохранять в разных форматах и с разной степенью качества.
Шаг 6. Сохранение изображений в папку
Когда вы выбрали все необходимые параметры, можно нажать «Сохранить», эта кнопка находится справа снизу. Именно «Сохранить», а не «Готово»! Дело в том, что этот инструмент позволяет нам сделать сразу множество вариантов раскроенного шаблона, на случай, если выбранные параметры качества нас не удовлетворяют, мы можем вернуться, произвести изменения и сохранить файлы заново.
Но не спешите продолжать. Здесь есть еще пара настроек, которые необходимо установит, если они не выбраны по умолчанию.
После того, как мы указали путь к папке в которую мы хотим сохранить наши нарезанные фрагменты, обратите внимание на поле «Формат» Photoshop позволяет создавать налету не только простые фрагменты, но и сразу верстку, но поверьте мне на слово, то что у вас получится в результате автоматической верстки, вам не понравиться. По этому проследите, что в качестве выбранного форматы было установлено значение «Только изображения»
А в поле «Фрагменты» должно стоять «Все фрагменты»
И только после этого всего можно нажимать «Сохранить».
Вам еще может выдать вот такое предупреждение.
Игнорируйте его!
Шаг 7. Удаляем лишнее, оставляем нужные фрагменты макета
В результате свой работы Photoshop создаст большое количество лишних изображений. Смело выделяем их и отправляем в корзину.
После этих операций у вас останется нужный вам набор фрагментов, используйте его в своем проекте.
Настоятельно рекомендую переименовывать названия фрагментов в соответствии с местом их применения, чтобы вам удобно было находить изображения по их названию.
Bootstrap сетка, PSD
При создании дизайна сайтов в Adobe Photoshop не обойтись без использования какой-либо системы сеток. Можно создать сетку самостоятельно, используя направляющие, либо воспользоваться уже готовым, проверенным решением — готовой сеткой Bootstrap в формате PSD. Не смотя на то, что дефолтные размеры Bootstrap сетки несколько стандартизируют дизайн, данный вариант успешно используют в своей работе огромное количество веб-дизайнеров по всему миру. Кроме того, такая стандартизация позволяет максимально быстро выполнять HTML верстку созданного макета, что неминуемо приводит к ускорению работы над проектом в условиях разработки сайтов на потоке или создания шаблонов.
Параметры стандартной Bootstrap сетки в PSD формате:
- Общая ширина рабочей области: 1920px;
- Ширина контейнера с отступами: 1170px;
- Ширина колонки без отступов: 68px;
- Ширина отступа (Gutter): 15px;
- Система сетки: 12-ти колоночная.
Расстояние между колонками и некоторые размеры могут иметь погрешность +/- 1px в связи с тем, что некоторые нечетные величины не могут быть поделены поровну. Но это некритично в масштабах разработки PSD макета.
Правила работы с PSD сеткой Bootstrap
Существуют определенные правила работы с Bootstrap сеткой. Некоторые начинающие веб-дизайнеры не учитывают в своей работе эти правила, в результате чего возникает непонимание между верстальщиком и дизайнером, в случае, если над проектом работает команда. Bootstrap сетка в PSD формате для создания дизайна сайта разрабатывалась основываясь на «физических» свойствах сетки CSS фреймворка Bootstrap и дизайнер должен придерживаться определенных правил для исключения излишних коллизий в процессе разработки.
1. Крайние поля служат исключительно для отступов на малых разрешениях и не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.
2. Вы можете использовать любое количество одиночных колонок для визуализации различных блоков сайта.
3. После разделения макета на колонки и блоки, промежутки (Gutters) между ними не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.
4. Не бойтесь выходить за рамки сетки. Если вы решили сделать какую-то нестандартную секцию или блок — реализуйте вашу идею вне рамок Bootstrap сетки, если это необходимо. Но постарайтесь обеспечить ваше решение какой-либо системой, например, придерживайтесь центра макета или частично используйте возможности Bootstrap сетки, соблюдайте кратность элементов или придерживайтесь любой другой логической системы при создании нестандартного блока. Так вы значительно облегчите работу верстальщика, если над проектом трудится команда разработчиков. Вам скажут спасибо.
Последний пункт очень важен, так как многие начинающие веб-дизайнеры боятся выходить за рамки Bootstrap сетки и дизайн, в большинстве случаев, получается довольно однообразный и скучный. Помните, что направляющие Bootstrap сетки необходимы вам только для разметки блоков сайта, которые необходимо упорядочить в соответствии с системой сеток, это может быть разделение макета на базовые логические части — сайдбар + контент, определение элементов блока, таких, как айтемы карусели, секции новостей и так далее. В остальном, не стоит ограничиваться рамками сетки и делать визуализацию только по направляющим. Однако если вы создаете дизайн определенной секции или блока в соответствии с системой Bootstrap сетки, обязательно придерживайтесь правил из пунктов 1,2,3 выше.
Зачем нужны счётчики аналитики на сайте и что они умеют
Если у вас есть бизнес в интернете, вероятно, вы хотите понимать, сколько людей к вам приходят и как они себя ведут. Именно для этого нам даны счётчики аналитики. Вот что о них полезно знать.
Что такое счётчик
Счётчик аналитики — это маленький скрипт, встроенный в веб-страницу, который фиксирует посещение сайта и втихаря собирает информацию о посетителе. Эта информация отправляется на сервер, который обрабатывает эти данные и рисует отчёт: кто был на сайте и что делал.
Технически счётчик — это маленький скрипт. Визуально счётчик может выводиться в подвале страницы или не выводиться — по выбору автора сайта. Хотите, чтобы люди знали, что за ними следят, — выводите счетчик. Не хотите — не выводите.
Что умеют счётчики
Когда массовый интернет только развивался, счётчики делали только одно: считали, сколько людей заходило на сайт в день, неделю или месяц. Тогда людей интересовала только посещаемость
Что счетчики умеют сейчас:
- смотреть, откуда пришёл посетитель сайта;
- понимать, до какого места посетитель долистал и в каких местах страницы он задерживался;
- видеть, сколько людей закрыли страницу сразу, как на неё попали;
- засекать время, проведённое на сайте;
- вычислять устройство, с которого посетитель смотрит сайт, — с компьютера, телефона или с планшета;
- показывать список поисковых запросов, по которым люди находят этот сайт;
- анализировать, что интересно посетителям сайта;
- показывать города, из которых заходят на сайт;
- показывать время, в которое сайт посещает больше всего людей.
И постепенно счётчики становятся всё умнее. Есть такие, которые следят за вашим перемещением по нескольким сайтам; есть те, которые могут уведомлять вас, когда какой-то конкретный человек пришел к вам. Возможно, скоро счетчики смогут делать вам мгновенный ПЦР-тест.
Как это работает
Счётчик — это специальный код, который вставляется на все страницы сайта (если у вас сайт состоит из отдельных HTML-файлов) или добавляется в общий блок для всех страниц (как в Вордпрессе). Выглядит он примерно так:
При загрузке страницы происходит следующее:
- Загружается и срабатывает этот скрипт.
- Скрипт добавляет новые невидимые элементы на страницу.
- К каждому из этих элементов привязано какое-то действие главного скрипта сервера.
- Когда на сервере срабатывает главный скрипт, он получает свою порцию данных о действиях пользователя и добавляет их в статистику.
- Так как таких мини-точек для запуска главного скрипта получается много, сервис аналитики получает полную картину того, что пользователь делает на сайте.
- И это всё происходит очень быстро и незаметно для посетителя.
Получается, что этот счётчик как бы расставляет на странице много камер наблюдения, каждая из которых отвечает за свой сектор. В зависимости от того, как посетитель пользуется сайтом, он попадает в поле зрения той или иной камеры. Потом система анализирует данные и добавляет их в статистику посещений.
Какие системы аналитики бывают
Есть две популярные системы аналитики — Яндекс.Метрика и Гугл Аналитика. В целом они умеют много похожего, но отличаются интерфейсом и системой сбора данных. Мы Яндекс, поэтому любим «Метрику».
А можно примеры использования?
Допустим, вы запускаете рекламную кампанию в соцсетях и хотите узнать, откуда придёт больше людей и по каким параметрам. Вы заходите в систему аналитики, записываете свои обычные показатели, чтобы потом было с чем сравнить, и запускаете рекламу. Через неделю-другую после запуска можно снова зайти и посмотреть: откуда пришло больше людей, как долго они были на сайте, заказали что-то или нет.
Или вам не нравится дизайн сайта и вы полагаете, что посетителям он тоже не нравится. Тогда вы ставите счётчик на нужные страницы и включаете «Вебвизор», а он записывает все действия пользователя на сайте. Потом вы заходите и смотрите эти записи — что делали люди на вашем сайте, как водили мышкой, где задерживались и на что нажимали. Такой анализ часто может помочь исправить слабые места в дизайне.
Что дальше
В следующем выпуске расскажем о том, как установить такой счётчик аналитики себе на сайт. На деле это гораздо проще, чем кажется. Подпишитесь на рассылку, чтобы не пропустить новую статью.
