Шаблон сайта отпуск HTML, CSS, Шрифты, Photoshop (psd), 2 страницы


Содержание

50 Бесплатных Шаблонов Сайтов на HTML5 и CSS3

Свежие бесплатные шаблоны сайтов 2020 г. на HTML5 и CSS3. Любой шаблон html5 css3 можно скачать как для личного пользования, так и для коммерческих проектов. Тематика шаблонов самая разная. Здесь и шаблоны портфолио, шаблоны корпоративных сайтов, лендинги (целевые страницы), шаблоны сайтов услуг, шаблоны блогов и фотогалерей. См. также HTML шаблоны на русском.

Все представленные шаблоны для своего сайта построены на современных версиях HTML5 и CSS3. Кроме того, авторы применяют такие модные фишки, как плоский дизайн, отзывчивый дизайн, адаптивная верстка, слайдеры на jQuery, анимация на CSS3 и пр. То есть, если вы ищете шаблон мобильного сайта, то можете выбрать любой из представленных. Красивые html5 шаблоны 2020, хоть и бесплатны, но выглядят на уровне премиум-класса.

Здесь вы найдете более 50 бесплатных адаптивных шаблонов сайтов высокого качества на HTML5 и CSS3, которые можно использовать как для новых сайтов, так и для переделки уже существующих. Стильные шаблоны сайтов html5 — это то, что вам нужно!

Обновлено 12.03.2020: Так как статья была написана 2 года назад, то многие ссылки стали битыми. Либо владельцы шаблонов слились, либо поменяли статус шаблонов с бесплатных на платные, либо инопланетяне все похерили. Просьба к вам, уважаемые читатели, если нашли такую ссылку, киньте в комментах, я поправлю.

1. Snow — бесплатный шаблон лендинга на HTML5 и CSS3

Шаблон html5 css3 целевой страницы Snow построен на фреймворке Bootstrap. Шаблон очень стильный и классный! Фиксированный фон и громадный Jumbotron — штука, которая показывает главное содержимое сайта. А что на лендинге самое главное? Правильно, призыв к действию. Естественно, шаблон полностью адаптирован под мобильные устройства. Вы можете использовать его даже в качестве основы для собственных шаблонов.

2. Sima — шикарный коммерческий шаблон сайта

Этот шаблон html5 css3 также построен на фреймворке Bootstrap. Вы можете создать на этом шаблоне уникальный сайт с портфолио, вашей командой, ценами, отзывами и всем другим, что будет необходимо. Например, отлично подойдет этот шаблон для сайта клининговых услуг. Анимация в этом шаблоне плавная и эффектная, чистые и хорошо читаемые шрифты. Просто идеальный шаблон!

3. White — прекрасный шаблон одностраничника!

Отличительная особенность шаблона сайта White — два варианта фона в верхней части. На ваш выбор либо слайдер с картинками, либо видео фон. Очень качественный и эффектный шаблон для сайта!

4. Platz — бесплатный HTML5 шаблон сайта на основе сетки

Современный, визуально привлекательный HTML5 шаблон сайта, разработанный на основе сетки (подробнее о сетке читайте здесь). Красивый и отзывчивый дизайн шаблона для блога или сайта.

5. Mart eCommerce — прекрасный HTML5 и CSS3 шаблон сайта для электронной коммерции

Свежий и стильный дизайн шаблона сайта лучше всего подходит для всех видов модных сайтов, продающих обувь, одежду, часы, аксессуары, спортивную одежду и др. В комплекте идет PSD файл, который вы можете скорректировать под свои нужды.

6. Nava — эффектный HTML5 и CSS3 шаблон для творческих сайтов

Nava представляет собой современный HTML5 шаблон сайта, который используется в основном для творческих профессионалов, которые хотят показать их работу во всей красе. Множество вариаций настроек шаблона позволяет сделать ваш сайт уникальным. Легкий, красивый и отзывчивый шаблон для сайта.

7. Box Portfolio — уникальный творческий шаблон сайта на HTML5 и CSS3

Шаблон сайта Box Portfolio обладает чистым и современным минималистичным дизайном. Отлично подойдет для профессионалов, желающих эффектно показать свои работы в сети. Как следует из названия, шаблон сайта идеально заточен под портфолио.

8. Mountain King — популярный и функциональный HTML5 и CSS3 шаблон сайта

Горная тема в дизайне сайтов очень популярна в последнее время. Шаблон сайта Mountain King не исключение. Включает 336 векторных иконок от Typicons. Плюс великолепная анимация на CSS3. Шаблон отлично подойдет для сайтов о путешествиях и портфолио.

9. Beauty Spa — классный шаблон сайта на HTML5 и CSS3 для спа-салонов

Beauty Spa — отзывчивый шаблон сайта, имеющий множество функций, идеально подходящих для сайтов спа-салонов, оздоровительных или фитнес-центров, сайтов о йоге или даже парикмахерских. Отличная читаемость шрифтов и ненавязчивый минимализм.

10. Bent – стильный и эффектный лендинг для сайтов на HTML5 и CSS3

Bent — великолепный бесплатный шаблон сайта на html5 и css3. Отзывчивый дизайн, CSS3 анимация, параллакс прокрутка, настраиваемая навигации и прочие вкусняшки. Это чистый дизайн шаблона для сайтов, которые хотят использовать сбалансированную конструкцию, чтобы гарантировать, что посетители будут наслаждаться внешним видом сайта, и в то же время четко видеть его основное содержание.

11. Triangle — бесплатный отзывчивый многоцелевой шаблон на HTML5 и CSS3

Triangle эксклюзивный творческий HTML5 и CSS3 шаблон сайта специально для тех, кто хочет нарулить свой клевый дизайн, но при этом не сделать хуже. В шаблоне есть более 40 предварительно разработанных страниц, которые позволят вам настраивать ваш сайт, как душе угодно.

12. Future Imperfect — блестящий шаблон сайта для творческих людей!

Испытайте подлинное чувство удовольствия с этим шаблоном сайта, идеально подходящим для писателей, авторов, копирайтеров и других работников пера и бумаги. Шаблон можно использовать также для личного блога, блога о путешествиях, о творчестве и пр. Креативный дизайн и адаптивная верстка шаблона понравятся многим.

13. Bodo — прекрасный шаблон для персонального сайта

Bodo — красивый шаблон сайта на HTML5 и CSS3, который идеально подходит для персонального сайта. Особенно для организации портфолио. Чистая и четкая типографика, карусельный слайдер, всплывающие popup окна для показа работ и многое другое.

14. Lens — идеальный HTML5 шаблон сайта для фотографов

Фотографы всегда ищут идеальный шаблон для своего сайта, чтобы показать работы во всей красе, эффектно и самое главное — крупно! Редкий шаблон сайта отвечает этим требованиям. Lens — один из таких шаблонов сайта фотографа.

15. Spectral — уникальный шаблон сайта ручной работы на HTML5 и CSS3

Если вы ищете бесплатные шаблоны сайтов по теме авто тематика, то Spectral будет идеальным решением. Здесь совершенно уникальный дизайн шаблона одностраничного сайта ручной работы. Дизайн можно менять по своему усмотрению. С помощью этого шаблона можно сделать потрясающий сайт абсолютно на любую тему, будь то впечатляющий блог о путешествиях или фотогалерея, сайт автомобильной тематики или хостинг-провайдера.

16. Oxygen — одностраничный HTML5 и CSS3 шаблон сайта

Oxygen — удобный и уникальный шаблон для бизнес сайта. Современный плоский дизайн, адаптивная верстка. Наример, этот шаблон идеально подойдет для сайта о мобильных приложениях или мобильной технике.

17. Mobirise Bootstrap — совершенный бесплатный шаблон сайта на HTML5 и CSS3

Если вы ищете бесплатный шаблон сайта, то Mobirise Bootstrap будет идеален, чтобы начать работу. Это многофункциональный шаблон с массой дополнений в комплекте. Три, предварительно сделанные, макета главной страницы и блога помогут вам в этом. Mobirise Bootstrap также SEO оптимизирован на 100% и адаптирован под любые размеры экранов.

18. La Casa — красивый и бесплатный HTML5 шаблон для сайта недвижимости

Шаблон Brandy прекрасно подойдет для организации коммерческого сайта о недвижимости. Отзывчивый и очень красивый дизайн понравится не только владельцу сайта, но и посетителям.

19. Drifolio — стильный HTML5 шаблон сайта для портфолио

Стильный и анимированный HTML5 и CSS3 шаблон сайта для организации портфолио. Чистый дизайн, отличная типографика, красивые иконки и многое другое.

20. Pluton — яркий и стильный шаблон для одностраничного сайта

Pluton – яркий и эффектный шаблон сайта на Bootstrap. Современный шаблон сайта, с его уникальным одностраничным макетом и адаптивным дизайном, который отлично подходит для студий, фотографов и творческих дизайнеров.

21. SquadFree — профессиональный шаблон одностраничного сайта на HTML5

Шаблон SquadFree отлично подойдет для создания коммерческого одностраничного сайта. Выглядит шаблон не только профессионально, но и адаптирован под все виды экранов. Шаблон собран на основе Bootstrap.

22. Sublime — завораживающий шаблон сайта на HTML5 и CSS3

Sublime — чистый и потрясающе красивый шаблон сайта на HTML5 и CSS3, идеально подходящий для стартапа, креативного агентства или сайта-портфолио. Отзывчивый дизайн и два варианта страниц на выбор.

23. Timber — необычный и красивый HTML5 и CSS3 шаблон сайта

Timber — свежая, стильная и необычная тема шаблона одностраничного сайта. Диагональ — главная фишка дизайна этого шаблона. Шаблон отлично подойдет для бизнес-сайта или портфолио. Есть встроенная галерея, карта и контактная информация, которые вы легко сможете адаптировать под себя.

24. E-Shopper — лучший шаблон сайта для электронной коммерции

E-Shopper — прекрасный вариант шаблона сайта для электронной коммерции. Построен на основе bootstrap с удивительным набором функций для полноценного и эффективного интернет-магазина.

25. Magnetic — бесплатный HTML5 и CSS3 шаблон для фотосайта

Совершенно потрясающий HTML5 и CSS3 шаблон для создания фотосайта или портфолио дизайнера, иллюстратора или художника. Этот шаблон поднимает планку профессиональных шаблонов на новый уровень! Отзывчивый дизайн, отличная поддержка всех видов устройств отображения, легкая и удобная навигация и многое другое.

26. Mabur Portfolio — прекрасный шаблон сайта в стиле минимализма на HTML5 и CSS3

Плоский дизайн этого шаблона сайта в стиле минимализма отлично подойдет для создания портфолио. В шаблоне все детали выверены идеально!

27. Modern Bootstrap HTML5 — бесплатный одностраничный шаблон сайта

Этот бесплатный одностраничник на основе фреймворка Bootstrap прекрасно подойдет для корпоративных сайтов, как для малых компаний, так и для крупных. Плоский дизайн, адаптивная верстка, все элементы дизайна высокого качества. Шаблон представлен в 4 различных цветах.

28. Infusion — стильный одностраничный шаблон сайта на HTML5 и CSS3

Infusion — это прекрасный пример шаблона сайта в стандартах HTML5 и CSS3, который специально разработан для создания бизнес портфолио. Богатая функциональность этого шаблона позволяет эффективно работать с клиентами и привлекать новых.

29. Yebo — корпоративный шаблон сайта на HTML5 и CSS3

Этот высококачественный шаблон сайта в плоском стиле прекрасно подойдет для любого корпоративного сайта. Адаптивный дизайн, масса настроек и возможностей для редактирования.

30. Twenty — эффектный HTML5 и CSS3 шаблон сайта с параллаксом

Этот уникальный и очень красивый шаблон сайта с эффектом параллакса не оставит никого равнодушным. Одностраничный шаблон построен на чистом HTML5 и CSS3 с адаптивной версткой, впечатляющими фонами, поддержкой социальных медиа и пр.

31. Urbanic – отличный HTML5 и CSS3 шаблон сайта на Bootstrap

Urbanic – свежий и классный HTML5 и CSS3 шаблон сайта, построенный на движке Bootstrap. Прекрасно подходит, чтобы сразу начать создавать свой сайт без особых проблем. Шаблон отлично адаптирован под любые размеры экранов.

32. Design Showcase — HTML5 шаблон сайта для портфолио

Визуально гармоничный и эффектный шаблон сайта на HTML5 для организации вашего портфолио. Шаблон прекрасно адаптирован под мобильные устройства, что для сайтов такого формата очень непросто сделать.

33. Mamba One — простой и стильный шаблон сайта на HTML5 и CSS3

Mamba One — это пример простого, но стильного шаблона сайта для создания одностраничника. Совместим со всеми современными браузерами и везде будет отображаться адекватно.

34. KreativePixel — бесплатный шаблон сайта для фотографов

Еще один прекрасный шаблон сайта для фотографов. Отзывчивый дизайн и очень удобная сортировка фоток в портфолио и галереях понравятся многим любителям фотографии. В шаблоне также применен параллакс-эффект, что тоже впечатляет зрителей при просмотре фоток.

35. Retina Ready Responsive App — бесплатный шаблон лендинга на HTML5 и CSS3

Как следует из названия, этот замечательный шаблон сайта не только идеально заточен под целевые страницы, но и отвечает новым мобильным веяниям, особенно в плане четкости отображения на устройствах с Retina дисплеями.

36. Brushed — отзывчивый HTML5 и CSS3 шаблон сайта на движке Bootstrap

Brushed — отзывчивый, бесплатный HTML5 и CSS3 шаблон сайта на основе движка Bootstrap. Также оптимизирован для Retina дисплеев (iPhone, IPAD, IPod Touch и MacBook Pro Retina).

37. Big Picture HTML5 и CSS3 шаблон сайта

Добро пожаловать на Big Picture! Этот адаптивный шаблон сайта на HTML5 прекрасно подойдет всем творческим людям, которым есть что показать, и показать это крупно и эффектно на своем сайте. Кроме того, в шаблоне применена отличная анимация.

38. Tesselatte — бесплатный отзывчивый шаблон на HTML5 и CSS3

Простой шаблон одностраничника, который учитывает все необходимые инструменты для успешного создания сайта. Идеально подойдет для личного блога писателя, копирайтера и просто любителя печатного слова.

39. Overflow — уникальный шаблон сайта на HTML5 и CSS3

Этот уникальный шаблон сайта на чистом HTML5 и CSS3 прекрасно подойдет любому творческому человеку. Он полностью отзывчивый и совершенно бесплатный.

40. Runkeeper — отзывчивый и очень красивый шаблон сайта

Runkeeper — бесплатный, отзывчивый и очень красивый шаблон сайта. Его можно использовать для сайта любой тематики. Блестящий стиль и четкие шрифты, адаптивный дизайн и впечатляющие детали шаблона. Все работает на вас!

41. Pinball Responsive Grid Style — отличный шаблон сайта на основе сетки

Этот замечательный профессиональный шаблон сайта на основе сетки идеально подойдет для корпоративного сайта. Современный плоский дизайн и отзывчивая структура шаблона прекрасно отображается как на экранах больших мониторов, так и мобильных устройств.

42. Prologue — чистый шаблон одностраничного сайта на HTML5 и CSS3

Этот чистый, простой и четкий шаблон сайта на HTML5 и CSS3 прекрасно подойдет для постройки лендинга. Минималистический дизайн не отвлекает от главного. Эффектная боковая панель навигации с прокруткой и четкие линии страницы — просто идеальное сочетание!

43. Helios — современный шаблон сайта на чистом HTML5 и CSS3

Еще один шаблон сайта в стиле минимализма и чистых форм. Специально разработан, чтобы использовать преимущества больших экранов дисплеев, но так же прекрасно адаптирован и под маленькие экраны мобильных устройств.

44. Telephasic — бесплатный и отзывчивый шаблон сайта на HTML5

Этот современный, отзывчивый и абсолютно бесплатный шаблон сайта обладает одним большим преимуществом — он прост и лаконичен, но многим именно этого и не хватает.

45. Strongly Typed — очень красивый шаблон сайта в стиле полу-ретро

Новый шаблон сайта с минималистичным полу-ретро стилем. Просто ретро уже не в моде, а вот легкий намек на него — очень даже кстати. Этот шаблон сайта полностью отзывчивый, построен на чистом HTML5 и CSS3 и включает все необходимые основные элементы страницы. Шаблон Strongly Typed идеально подойдет для сайтов творческой тематики. Например, для сайта о домашнем декоре.

46. Striped — чистый, красивый и функциональный шаблон сайта HTML5 и CSS3

Свежий и чистый, красивый и функциональный, новый шаблон сайта на HTML5 и CSS3. Имеет в своем арсенале все необходимые элементы страниц, в том числе оформленные цитаты, таблицы и списки, а также адаптированный сайдбар (справа или слева — по вашему желанию).

47. Parallelism — необычный и стильный шаблон сайта на HTML5 и CSS3

Parallelism — стильный шаблон сайта для организации портфолио или фотографий. Необычность его в том, что прокрутка здесь не вертикальная, как обычно, а горизонтальная. Это придает сайту особый шик и запоминаемость.

48. Miniport — полностью отзывчивый HTML5 шаблон сайта в стиле минимализма

Отличный шаблон сайта в стиле минимализма на HTML5. Прекрасно подойдет как для личного сайта/блога, так и для небольшого корпоративного сайта одностраничника или в качестве сайта-визитки.

49. Verti — просторный и свободный отзывчивый шаблон сайта на HTML5

Чистый и просторный дизайн этого шаблона сайта прекрасно подойдет для набольших корпоративных сайтов или для коммерческих проектов. Отзывчивый и удобный как для автора, так и для пользователей.

50. ZeroFour — впечатляющий и стильный шаблон сайта на HTML5 и CSS3

И последний в списке, но не последний по качеству и внешней эффектности шаблон сайта — ZeroFour. Стильный дизайн, очень красивое меню, идеально выверенные формы и кнопки, красивые иконки и многое другое. И все это абсолютно бесплатно!

Надеюсь, вы нашли для себя что-то подходящее среди этих замечательных шаблонов сайтов на HTML5 и CSS3. Удачи!

Добавьте в закладки, чтобы потом быстро найти.

ПС: Если никак не можете определиться с выбором, прочтите статью «Я не знаю, чего я хочу». Будет полезно.

Конвертировать онлайн PSD шаблон в HTML шаблон сайта

Здравствуйте, не так давно я бродил по просторам интернета, что в общем не такая уж и редкость, в поисках вдохновения. Посещал различные сайты: с шаблонами, уроками и прочими тематическими материалами. Мой проход близился к концу, как я попал на первый взгляд совсем неприметный сайт с громкий и кричащим названием: Psd2Html Converter. Скажу так, я несколько раз встречал подобный сервис (о его названии можно сделать предположение, что он делает), но они были: платные и давали ужасный результат.

И так, сайт Psd2Html Converter — это автоматическая верстка сайта из Photoshop дизайна, так заявляет сам разработчик. Я скажу иначе: это онлайн сервис, которые помогает преобразовывать PSD формат в HTML шаблон сайта с файлами CSS.

Если говорить о качестве, то я остался весьма удивлен, приятно удивлен. У меня на PC было несколько довольно сложных и хороших макетов я и решил проверить на них. Буквально через минуту я получил результат и поверьте — хороший результат. Конечно, человек бы сверстал лучше. Но вместо того чтобы верстать целый день этот шаблон с нуля, я за час его доработал и адаптировал. Качество верстки мне понравилось. Сервис отлично понимал где текст а где картинка. Этого было достаточно, чтобы я добавил этот сайт к себе в закладки, но ярешил провести еще один небольшой тест: закинул PSD шаблон сайта одно из начинающих дизайнеров. Верстка PSD шаблона была ужасная и нелогичная и как я удивился когда сервис все равно умудрился сделать из этого хоть что-то человеческое.

Илон Маск рекомендует:  Что такое код parse_url

Пока этот сервис бесплатный, но я не могу вам гарантировать что он будет таковым всегда, (точнее разработчик говорит, что до 02.10.2012 акция — сервис работает в бесплатном режиме!), потом услуга будет платной: ориентировочная цена 3-4$ за одну конвертацию, при всяких там программах возможны скидки, но об этом лучше читать на сайте разработчика.

И так, выводы: я очень советую этот сервис тем, кто дружит с Photoshop и не так силен в верстке, это уникальная для вас возможность сверстать сайт без знаний на то и потом реализовать его на рынке.

Просмотров: 33691 | Дата публикации: 31.03.2012

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Многие макеты веб-дизайнерами рисуются в программе Adobe Photoshop. Именно поэтому знать и владеть этой программой верстальщикам просто необходимо. Кстати о его основах я уже писала в статье Фотошоп для верстальщика.

Для «набивки руки» предлагаю Вашему вниманию подборку из 20 бесплатных макетов для верстки. Выбирайте то, что нравится и действуйте!

Надеюсь, потом Вы скинете в комментарии свой сайт-пример с версткой одного из этих макетов, чтобы показать всем какой Вы молодец ��

Шаблон сайта отпуск: HTML, CSS, Шрифты, Photoshop (psd), 2 страницы

В данной статье речь пойдёт о сайтах, которые разработчики создают вручную, т. е. верстают.

Статья предназначена для пользователей, знакомых с HTML и CSS. Также желательно знать хотя бы основы Adobe Photoshop

Одним из этапов создания реального сайта, является создание PSD шаблона. Можно ещё встретить такие названия как макет, дизайн или исходник.

Шаблон заказывается дизайнеру. Дизайнер рисует макет в программе Adobe Photoshop и сохраняет его в формате PSD.

Что такое PSD формат?

Для лучшего понимания можно привести простой жизненный пример. В детстве все клеили аппликации. Вырезали из бумаги домик – наклеили. Вырезали ёлочку – наклеили. И так до тех пор, пока работа не готова.

А теперь можно представить ситуацию, при которой фигурки вырезали, разложили на листе в нужных местах, но ещё не приклеили. Так вот PSD формат файлов, можно сравнить с аппликацией, на которую ещё не приклеили фигурки, но расположили их в нужном порядке.

Благодаря этому каждую такую «фигурку», а точнее каждый отдельный фрагмент шаблона можно сохранять как отдельную картинку, которую потом можно использовать на сайте.

Вот макет страницы, которая будет создана.

После того как у нас есть готовый шаблон в форматеPSD можно перейти непосредственно к вёрстке

  1. Создать папку, в которой будет храниться вёрстка, например «Сайт».
  2. В папке «Сайт» создать папку для изображений, например img.
  3. В папке «Сайт» создать папку для стилей, например css.
  4. Теперь необходимо запустить программу Adobe Photoshop и в ней открыть psd файл. Отсюда необходимо «вытащить» все изображения, которые будут использоваться на сайте.

Здесь необходимо обратить внимание на кнопку «Слои». На рисунке она выделена красным овалом.

Это кнопка включает и выключает окошко со слоями. Слои – это и есть те самые не склеенные детали аппликации. Слои для удобства распределены по папкам, которые можно сворачивать и разворачивать. Принцип работы почти тот же что и в проводнике Windows.

Первым делом все папки лучше свернуть. Разворачивать по мере необходимости.

Теперь можно начать «вытаскивать» картинки

Первым делом нужно выбрать инструмент рамка . Затем выделить только ту часть, которая ограничивает логотип сайта

После этого нажать клавишу Enter. Всё кроме выделенной области будет отрезано.

Теперь можно убрать фон. Для этого нужно отключить слой с фоном.

С целью быстрого поиска нужных слоёв можно выполнить следующие действия:

  • выбрать инструмент «Перемещение»
  • Включить для выбранного инструмента настройки «Автовыбор» и «Группы слоёв»
  • Выполнить щелчок по любому объекту (в частности по белому фону). Слой с этим объектом станет активным

Здесь слой назван «Фигура 2». Щелчком по изображению глаза слой становится невидимым.

Однако остаётся ещё два слоя, которые также необходимо отключить. Действия аналогичные.

Теперь можно сохранять. Для этого необходимо выполнить следующие действия

ФайлСохранить для Web

Выбрать из 4 предложенных вариантов, а из предложенных второй. Расширение выбрать gif.

Нажать кнопку Сохранить.

Имя файла logo.gif. Файл сохранить в папку img. Туда следует сохранять и остальные изображения.

Если качество не устраивает, то можно сохранить в формате png-8 или png-24.

Можно следовать таким принципам:

  • фотографическое качество – jpg
  • фотографическое качество с прозрачным фоном– png-8, не устроило качество – png-24
  • мало цветов в изображении – gif

Для того, чтобы вернуть первоначальный вариант до обрезки, нужно открыть окно история

Выполнить щелчок по названию файла и установить подходящий масштаб.

Аналогичным образом сохраняются другие изображения.

Группу собак можно сохранить на прозрачном фоне. Так впоследствии будет проще поместить на страницу, например другую группу собак. Можно сохранить с фоном «шапки» сайта.

То же самое касается изображения лапы, которое появляется при наведении на пункт меню

Остальные изображения – по желанию. Можно на белом, можно на прозрачном.

Здесь следует выбирать вариант сохранения очень аккуратно, потому, сто в psd исходниках нередки изображения с плохо обработанными краями. Вот пример:

Изображение было сохранено на прозрачном фоне. Однако при просмотре его на чёрном – видны плохо обработанные края. Но при использовании светлого фона – этот дефект может быть незаметен.

Для фона нужно будет вырезать маленькую картинку, которая заполнит страницу как кафельная плитка. Однако в этом примере фон не является повторяющимся. Поэтому лучше найти похожую картинку. А можно попробовать подобрать, вырезая из фона различные фрагменты.

Начало вёрстки. Обёртка. Шапка сайта.

Вёрстка будет рассмотрена с использованием HTML5 и CSS3.

В папке своего сайта нужно создать HTML файл. Например index.html.

В папке css создать файл style.css.

Кроме этого, в папке css необходимо поместить файл reset.css со следующим кодом

Дело в том, что разные браузеры для одного и того же тега могут иметь различные настройки. Для обеспечения кроссбраузерности их необходимо сбросить. Предложенный выше код разработан Эриком Майером.

Сначала в index.html следует написать основные теги.

Для тега в стилях нужно установить фон.

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

Теперь нужно создать обёртку сайта – блок в котором будет помещаться всё содержимое.

Рядом с закрывающим

Также внутри блока находится слово wrapper. Оно там находится временно. Цель – во время вёрстки видеть блок и отличать его от остальных. По этой же причине в стилях блоку будет временно дан какой-нибудь светлый фон.

Для установки стилей необходимо знать его ширину и отступы сверху и снизу. Для измерения можно в Adobe Photoshop инструментом «Прямоугольная область» выделить изображение сайта от правого до левого края. Высота не важна.

Ширину можно увидеть в окне «Инфо»

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

Получилось 100px сверху и 85px снизу.

Таким способом определяются любые расстояния в исходнике.

Справа и слева установлены отступы auto. Благодаря этому блок выравнивается по центру.

Теперь создаётся «шапка» сайта. В Adobe Photoshop необходимо измерить её высоту.

Этот блок состоит из двух частей. В первой части логотип и ссылки, во второй собаки и слоган.

Для первой части создаётся ещё один блок.

Высота этого блока 100px. Цвет фона – белый. И ещё объекты внутри этого блока будут двигаться позиционированием. Поэтому понадобится установка свойства position: relative.

Внутри этого блока следует поместить блок с изображением-логотипом. Это изображение можно сделать ссылкой на главную страницу.

В стилях можно указать размеры этого блока. Можно не указывать, если для блока не планируется использовать фон отличный от белого.

Следующий компонент – это контакты и время работы.

В стилях нужно будет установить размер текста, цвет и шрифт.

Для определения размера текста, шрифта и цвета в Adobe Photoshopможно выбрать инструмент «Горизонтальный текст» и выполнить щелчок по нужному тексту. В панели свойств можно увидеть размер и шрифт. Цвет указывается в прямоугольнике. На рисунке, для наглядности, он отмечен красным овалом.

Щелчок по прямоугольнику вызовет палитру цветов.

Здесь можно скопировать шестнадцатеричный код цвета.

Кроме этого блок нужно будет передвинуть. Лучше всего делать это с помощью позиционирования. Для

Отступы можно измерить в Adobe Photoshop способом, рассмотренным ранее.

Вот результат в браузере

Остались в этой части ссылки на вход и регистрацию.

Сначала указываются стили для

Ссылки на регистрацию и вход целесообразно сделать блочными элементами, установив свойство display: block, и поместить в нужные места позиционированием.

Можно для ссылки, на которую навели сделать особенный стиль, чтобы добавить динамики. Очень часто убирают подчёркивание. Или наоборот. Подчёркивания нет, а при наведении оно появляется.

Вот результат в браузере

Следующий компонент – это нижняя часть «шапки» сайта.

Оба блока (dogs и slogan) нужно подвигать позиционированием по аналогии с предыдущими блоками. Для слогана ещё устанавливается свойство line-height. Оно служит для увеличения межстрочного интервала

На этом пока все. В следущей статье мы разберем создание навигации для нашего сайта. Часть 2>>

Создание шаблона сайта из PSD

В этой статье, посвященной переработке PSD/HTML, мы возьмем PSD проект, который я сконструировал в предыдущей статье, и вернем функциональный HTML/CSS шаблон.

Это вторая часть статьи по проектированию делового веб-сайта. Во второй части мы сфокусируемся на конвертации и кодировке PSD макета, созданного нами в предыдущей статье.

Финальный результат

Вот шаблон, который мы попытаемся создать. Кликните по изображению и вживую увидите финальный результат.

Перед стартом

Удостоверьтесь, что у вас есть PSD файлы, которые мы создали в первой части статьи – нам понадобится извлечь изображения и включить их в шаблон.

Если вы еще не закончили с первой частью статьи, то советую пройтись и сделать то, указано в первой части (или хотя бы скачать PSD – исходники).

Эта статья предполагает, что Вы уже имеете некоторые HTML и CSS знания – однако, если что-либо станет не понятным – оставляйте комментарии – постараюсь помочь.

Создание файловой структуры

1 Создайте на вашем рабочем столе новую папку и назовите ее templates (или как вам будет угодно).

2 Внутри этой пустой папки создайте другую папку и назовите ее «images» — эта папка будет содержать все наши изображения, которые понадобятся нам в шаблоне.

3 Затем создайте три новых файла и назовите их index.html, style.css, и reset.css.

Index.html – это файл, где мы напишем html код к нашему шаблону. Style.css будет содержать код css, который заставит все выглядеть красиво и приятно.

Настройка reset.css

В файле reset.css нам необходимо использовать сбросы стилей. Основная причина, по которой нам понадобился reset css состоит в том что различные браузеру имеют тенденцию по разному отображать элементы HTML (например, размер шрифта заголовка, размеры подложки и полей). Использование reset.css уменьшит эти несогласованности.

4 Я буду использовать сброс стилей от Эрика Мейера. Скопируйте Reset CSS код в ваш файл reset.css.

Добавление базовой HTML разметки

5 Теперь откройте index.html с помощью любого редактора. Можете воспользоваться популярным редактором Dreamweaver (или CODA) или любым другим. Добавьте основную структуру для новой HTML страницы — многие популярные редакторы, такие как CODA или DREAMWEAVER автоматически сделают это за вас (или с помощью назначенной функции). Ниже приведен блок кода основной структуры вашей HTML страницы (у вас может немного отличаться).

Ссылаемся на CSS стили

6 Внутри тега head файла index.html, вам необходимо добавить следующие строчки кода, для того чтобы можно было подключить наши стили.

Это скажет index.html, где найти основную таблицу стилей.

7 Теперь откройте файл style.css и добавьте следующую строчку кода на самый верх документа, чтобы подключить файл reset.css.

Это гарантирует, что reset стили подключены перед любыми другими стилями CSS (это важно из-за модели наследования CSS).

Превосходно! Сейчас все три файла соединены друг с другом, итак мы можем приступить к кодированию.

Структура шаблона

Ниже, вы можете увидеть базовую структуру и основные секции HTML/CSS шаблона. Потратьте некоторое время на изучение базовых секций веб-страницы.

Код основной секции страницы

8 Для начала, создадим основную структуру index.html. Добавьте следующий блок кода для секций макета.

Как вы можете видеть, мы заключили все основные секции шаблона внутрь блока #wrap, это сделано для того, чтобы нам было проще отцентировать веб-страницу.

Основная секция нашего макета включает: #header, #featured-content, #services, #additional-information (содержит #client-testimonials и #featured-project), и #footer.

Создание фона

9 Чтобы создать фон нашего HTML/CSS шаблона, мы, сперва, должны вырезать фоновое изображение из PSD файла. Приведенный далее метод мы будем использовать и для нарезки второстепенных деталей CSS, и, кстати, здесь приведена краткая процедура. Первый шаг: в фотошопе выберите инструмент Rectangular Marquee Tool (M) и выделите узкую часть блока, куда бы вошел header и белый фон.

10 Как только вы сделаете выделение, идите в Edit > Copy Merged (Правка > Копировать объединение), создайте новый фотошоп документ и затем вставьте выделенную область в новый документ (фотошоп должен автоматически задать размеры нового документа и эти размеры будут основана на изображении, которое содержится у вас в буфере обмена).

11 Затем вы должны пойти в File > Save for Web & Devices (Сохранить для Web и устройств) и сохранить файл. Формат файла выберите GIF и затем сохраните его как main-bg.jpg внутри папки images.

12 Теперь добавьте следующий код в файл style.css, тем самым мы зададим фон.

Здесь мы закрепляем фоновое изображение за тегом body HTML документа и затем повторяем его вдоль оси х через всю страницу.

Мы также установили ширину макета и отцентировали его на экране ( margin: 0 auto; центрируем макет).

Добавление логотипа

13 Сейчас мы добавим логотип в header. Для начала нам необходимо извлечь его из PSD. Lля этого нужно выбрать слой, в котором сохранен логотип, нажать на комбо Ctrl+A, и, не отпуская, дважды щелкнуть по миниатюре слоя на панели слоев.

Тем самым мы выделим текст логотипа.

14 Нажмите копировать, создайте новый документ и вставьте текст в новый документ.

15 Выберите Save for Web & Devices, выберите формат PNG и сохранить файл как logo.png в папке images.

Здесь мы используем формат PNG, так как мы хотим, чтобы изображение имело прозрачный фон, что позволит нам использовать изображение на любом фоне.

16 Сейчас добавьте HTML код, приведенный ниже, который создаст разметку для логотипа.

17 Затем, чтобы вывести логотип на экран, установите изображение логотипа как фон заголовка блока header (#header h1). Добавьте следующий код в style.css файл.

Для начала устанавливаем высоту контейнера header, затем закрепляем изображение логотипа как фон заголовка h1.

Мы воспользовались техникой «замена фонового изображения css», которая прикрепляет фоновое изображение к элементу и затем сдвигает текст элемента за пределы экрана с помощью text-indent: -9999px атрибут/значение.

Замена фоновым изображением обеспечивает некоторые выгоды для SEO и облегчает понимание контента для пользователей использующих screen readers.

Создание навигации

18 Чтобы создать блок навигации, добавьте следующий HTML код в файл index.html.

19 Добавьте следующий CSS код в файл style.css.

Все довольно просто: Мы сделали контейнер #nav плавающим ( float:right ) и также сдвинули его вниз на 72px с помощью атрибута margin. Элементы li также сделаны плавающими, (чтобы быть уверенным в том, что элементы расположатся друг напротив друга в одном ряду, а не друг под другом), но относительно левой стороны.

Остальная часть кода просто добавляет стиль ссылкам и разделитель «-» между названиями страниц.

Код первой контент секции

20 Чтобы создать эту секцию, нам необходимо вырезать несколько изображений из PSD. Первым будет заголовок. Мы будем применять тот же процесс, что и для нарезки логотипа. Выделите текст, предварительно выбрав нужный слой на панели слоев, затем жмите копировать, и создайте новый документ в фотошопе.

21 Вставь текст в новый документ и затем сохраните его в папке images через Save for Web & Devices и сохраните как featured-content-title.png.

22 Затем те же операции повторите с подзаголовком (назовите файл featured-content-subtitle.png ), пунктирной линией (имя horizontal-line.png ), и текстом ( featured-content-text.png ).

23 Сейчас, после того как мы извлекли все необходимые изображения, нам необходимо написать HTML код. Добавьте следующий код в контейнер #featured-content вашего index.html файла.

24 Затем добавьте CSS код, приведенный ниже, для оформления стиля наших элементов.

В этом блоке кода, мы сперва сдвинули вниз контейнер #featured-content на 65px с помощью атрибута margin .

Затем мы снова воспользовались техникой ‛замена фонового изображения CSS‛ для элементов h2, h3, и p, чтобы показать фоновые изображения, которые мы извлекли.

Стиль для пунктирной линии был написан отдельно (смотрите комментарии CSS), так как мы будем использовать его и в других контейнерах. Это также способствует упорядочиванию нашего кода.

Создание секции обслуживания

25 Сперва, как обычно, извлечем необходимые изображения из PSD файла. Нам потребуется синий фон блока (сохраним его как services-box-bg.png ), затем основные заголовки блоков (сохраним их как web-design-title.png , marketing-title.png , и optimization-title.png respectively ), пунктирная линия ( service-dotted-line.png ), и кнопки у основания каждого блока ( get-more-details-button.jpg , view-case-studies-button.jpg , и learn-more-button.jpg ). Воспользуйтесь тем же самым способом, который мы прошли в предыдущих пунктах, для извлечения и сохранения изображений.

26 Сейчас добавьте следующий HTML код внутрь контейнера #services в index.html.

В этом коде мы добавили три новых контейнера, каждый из которых получил класс .service-box . Внутри каждого из этих блоков присутствует заголовок, текст, пунктирная линия и кнопка.

Первому блоку также назначен класс .first ( ), это сделано для того чтобы немного изменить стиль этого контейнера от остальных.

27 Теперь добавьте следующий CSS код в ваш основной стилевой файл.


Там, где требуется, мы снова воспользовались «техникой замены фонового изображения».

К остальным элементам добавлены необходимые поля или отступы, с целью позиционировать и назначить элементам нужные интервалы.

Следует отметить, что блоку service-box присвоено левое поле шириной 46px. Это обеспечивает последовательный интервал между блоками обслуживания. Однако, если бы вы назначили и первому блоку левой поле в 46px, ты в шаблоне это выглядело бы неорганично.

Это исправить довольно легко: достаточно установить левому полю блоку .first значение 0, тем самым мы исключим значение атрибута margin класса .service-box и гарантировали приемлемое расположение блока.

Создание секции клиентских отзывов

28 Нам требуется вырезать заголовок из PSD файла. Воспользуйтесь тем же способом, что и раньше и сохраните изображение как client-testimonials-title.png .

29 Добавьте следующий HTML код в файл index.html внутрь контейнера #client-testimonials .

Здесь тоже все просто: мы имеем три контейнера .testimonial , которые содержат изображение автора, имя автора, текст, и название компании.

30 Теперь добавьте следующий CSS код в ваш основной стилевой файл.

Первые три строчки кода связаны с родительским контейнером #additional-info , которому в первой строчке задана высота и поля.

Важной деталью является ширина (425px) и поле (45px) контейнера #client-testimonials , они должны соответствовать соответственно ширине и полю проектного блока. Равная длина этих блоков позволит визуально отдать этим блокам по равной половине экрана.

31 Между этими двумя блоками нам необходимо добавить пунктирную линию, которая будет нашим разделителем. Вырежьте ее из PSD и сохраните как vertical-line.png .

32 Теперь добавьте следующую строчку кода между блоками #client-testimonials и #featured-project в вашем index.html файле.

33 Затем вставьте следующий блок кода CSS в ваш файл style.css.

Приведенный CSS гарантирует, что линия окажется между двумя различными секциями.

Создание секции под проект

34 Вырежьте заголовок из PSD, тем же способом, что и раньше, и сохраните его, как featured-project-title.png .

35 Добавьте ниже приведенный код HTML в ваш index.html.

36 Ниже приведенный блок кода отвечает за оформление секции проекта, добавьте его в свой CSS файл.

Ширина этого контейнера равна 425 px, ширина левой подложки 45 px. Также мы опять воспользовались техникой замены фонового изображения для заголовка и затем просто установили размер шрифта, цвета, и полей.

37 У футера очень простой код. Добавьте следующий код в ваш index.html.

В футере присутствует горизонтальная линия, как разделитель между блоком #additional-info и самим футером, и обычный текст о правах.

38 Теперь добавьте следующий CSS код, который отвечает за оформление футера.

Все просто: мы задали высоту футера и назначали нижнюю подложку в 30px, что создаст органичное пространство шаблону.

Затем мы задали шрифт, цвет и установили подложку, с целью отодвинуть текст от горизонтальной линии.

Конец!

Это все. Если вы делали все согласно плану, у вас должно получиться так, как на скриншоте ниже.

Источник sixrevisions.com/tutorials/web-development-tutorials

Файлы оригинального урока:

Файлы переводчика, по которым сделаны скриншоты статьи:

15 простых руководств по преобразованию Photoshop-документов в HTML/CSS

Сегодня мы хотим поделиться с вами полезной подборкой из 15 легких руководств, посвященных преобразованию PSD-файлов в HTML или CSS, что будет очень полезно и удобно для многих дизайнеров-новичков. В целом, базовые знания в области HTML или CSS не будут сильной проблемой, так как здесь все описано очень досконально, и вам потребуется чуть немного больше времени на изучение этих руководств.

Ниже вы можете видеть перечень из 15 руководств, посвященных превращению PSD-документов в HTML или CSS. Надеемся, что вам понравится эта подборка, и пригодятся представленные уроки. Наслаждайтесь!

В этом руководстве подробно рассказывается о том, как преобразовать посадочную страницу с продукцией из PSD в HTML.

Это руководство научит вас тому, как превратить привлекательный дизайн страницы «Скоро открытие» в дизайн настоящей веб-страницы. Дизайн выполнен в очень стильном темном стиле, а также оформлен обратным отсчетом. Давайте приступать!

Здесь вы сможете получить некоторые советы и подсказки о том, как конвертировать PSD в HTML. Стоит отметить, что здесь не представлены развернутые комментарии к HTML-тэгам, CSS-свойствам и техникам, однако хорошо описан сам процесс превращения PSD в HTML-шаблон.

В этой публикации мы попытаемся разработать профессиональный и очень опрятный сайт для архитектурной студии, который создатели решили назвать Studio Hunter. Здесь вы сможете пройтись по основным целям студии: утонченность, простота, ритмика и профессионализм.

Здесь вы научитесь использовать CSS3 и те новые свойства, что технология принесла веб-разработчикам. В рамках данного руководства будут использоваться тени текста, фоновые градиенты и многое другое.

В этом руководстве вы сможете научиться тому, как разработать полностью функциональный веб-дизайн из заранее подготовленного дизайна в Adobe Photoshop.

В этом пошаговом руководстве вы сможете научиться тому, как можно преобразовать красивый и привлекательный эскиз в PSD-файле в полностью работающий веб-шаблон на HTML и CSS

В этом руководстве вы познакомитесь с дизайном блога Brillante, а также попробуете конвертировать его в HTML/CSS-шаблон, а также научитесь встраивать собственные шрифты.

Здесь вас обучат превращению дизайна современной дизайн-студии (разработанного Tomas Laurinavicius) из PSD-шаблона в полностью работающий сайт на XHTML/CSS.

В этой статье вы сможете научиться превращать шаблон портфолио Dezign Folio из PSD-формата в HTML. Процесс превращения сопровождается пошаговой инструкцией. Вы научитесь создавать шаблоны при помощи CSS-платформы, некоторых CSS-стилей и javascript.

Данное руководство рассказывает о превращении теплого и привлекательного веб-дизайна из PSD в HTML и CSS.

Данная статья поможет вам научиться конвертировать интересный дизайн портфолио из PSD в HTML-формат. Процесс сопровождается пошаговой инструкцией. Вы научитесь создавать шаблоны при помощи CSS-платформы, некоторых CSS-свойств и javascript. Стоит отметить, что полученный шаблон будет кросс-браузерным и динамическим.

Данное руководство научит вас тому, как преобразовать PSD-документ в опрятный и полностью функциональный XHTML/CSS-код.

В этом руководстве вы сможете научиться воссоздавать привлекательный шаблон из PSD-документа в HTML.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Joker: бесплатный одностраничный HTML-шаблон для портфолио

Bootstrapped: бесплатный Bootstrap-шаблон в HTML и PSD

9 статей и руководств по конвертации PSD в HTML

H4-Informer: полностью структурированный PSD/XHTML-CSS шаблон

Бесплатный полностью JS-анимированный шаблон для веб-дизайн студии

Бесплатный шаблон веб-сайта со слайдером для дизайн-студии

Шаблон страницы для Facebook в гранжевом стиле

Бесплатный шаблон для веб-сайта дизайн-студии

Бесплатный шаблон веб-сайта дизайнерской компании для WordPress

Бесплатный PSD-шаблон веб-сайта галереи

  • 26.10 | 18:00 —

Топ UX тренды для банкинга в 2020 году

Армированный скотч — назначение и характеристики

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

Мы сами вдохновляемся материалами, которые предлагаем вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, сниппетов и т.д.), и мы всегда сохраняем ссылки на источники, и сообщаем авторов изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но мы ведь не волшебники, чтобы угадывать, кто является автором.

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

20 адаптивных русских HTML шаблонов для разных тематик

Если вы ощущаете, что пришло в ремя вдохнуть новую жизнь в уже существующие свои онлайн-проекты, то сегодняшняя публикация окажется как нельзя кстати. В первую очередь подборка пригодится тому, у кого используются обычные простые HTML шаблонов сайтов, т.к. их мы и будем рассматривать. Причем не только с минималистичным дизайном, но и по другим тематикам/направлениям.

Частично инфоповодом для такой темы послужило недавнее обновление в крупноым маркетплейсе TemplateMonster, которые запустили новую категорию готовых HTML макетов на русском языке .

Профессиональные платные варианты представлены ниже, сначала покажем вам классные общедоступные макеты. На самом деле сейчас данная ниша достаточно неплохо развита, особенно с появлениям разных библиотек/фреймворков по типу Bootstrap. Кроме того, за последние несколько лет технология HTML5 для сайтов стала повсеместно использоваться, добавив много интересных опций и решений (без необходимости установки CMS) .

Найти подходящий дизайн не проблема, однако тут есть один нюанс — скачать бесплатно шаблоны сайтов HTML на русском в большом количестве, увы, не получится. Подавляющая часть материалов в сети все же англоязычная, поэтому после их загрузки и перед установкой на хостинг придется самостоятельно провести локализацию. В принципе, это сделать не сложно, просто пройдитесь по всем файлам и, где нужно, замените исходные значения текста на переведенные.

Вот какие варианты нам больше всег приглянулись:

Премиальные готовые HTML шаблоны сайтов

С помощью профессиональных дизайнов от разработчиков из TemplateMonster у вас гораздо больше вероятность получить результат, который завоюет сердца пользователей и вашей целевой аудитории. Вдохновившись этими макетами, вы наверняка создадите какой-то интересный, стильный и красивый веб-проект. Тематики в маркетплейсе представлены разные: финансы, искусство, медицина, техника, бизнес и много-много других.

Из преимуществ такого подхода можно назвать:

  • во-первых, тех.поддержку сервиса (что оценят больше новички);
  • во-вторых, вы сможете использовать специальный Novi-билдер для внесения изменений во внешний вид и наполнение веб-ресурса (данный софт позволит забыть о верстке кода и всем, что с ней связано).

В сегодняшей премиальной подборке сможете скачать шаблоны HTML сайтов на русском простые, яркие, стильные, функциональные и т.п. Вот наш Топ-10…

ФинПРО

Финансы и консалтинг — эти два направления должны быть представлены в самом наилучшем виде, если вы хотите достичь успеха и выделиться на фоне конкурентов. Именно поэтому вам стоит обратить внимание на текущую тему. Она однозначно порадует вас своим функционалом/дизайном: поддерживает всевозможные галереи/карусели, вкладки, выпадающее меню и т.д. Также в архив решения включены релевантные фото.

Диагональ

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

Mongo

С помощью этого многоцелевого макета реально сделать как бизнес-сайт, так и персональный блог (чем-то визуально он напоминает универстальную тему Monstroid 2). Решение станет вашим мощным ассистентом в разработке, а встроенный инструмент Novi-билдер позволит работать с веб-дизайном простым перетаскиванием элементов. Если у вас есть желание разнообразить ваше детище какими-то увлекательными деталями, попробуйте несколько плавных анимационных эффектов. Все грузится быстро, имеется кроссбраузерность.

ПРОБизнес

Эффективный HTML шаблон на русском для корпоративной ниши — прекрасный выбор, если собираетесь продвигать свою консалтинговую компанию в интернете. На домашней странице неплохо будут смотреться крупные и впечатляющие фото + допускается добавление видео, что несомненно поможет всем запомнить ваш ресурс надолго. Встроенные таблицы с тарифными планами дадут возможность поделиться расценками на ваши услуги.

E.morton

Это замечательное решение подходит для портфолио художника либо онлайн-презентации работ из разных сфер творческой деятельности. Оно позволит создать необыкновенный и приятный взору веб-проект за считанные часы. Интерфейс порадует как вас, так и ваших посетителей своей простотой и привлекательностью. Здесь предусмотрены различные виды/типы вебстраниц с немалым количеством вариантов футеров и хедеров + несколько вариаций цветовой схемы.

Artfactor

Если вы занимаетесь оформлением интерьера и хотите продвинуть ваши услуги на просторах интернета, обратите внимание на Artfactor. Специальный Novi-билдер даст шанс редактировать элементы веб-дизайна в визуальном режиме. При желании здесь легко добавляется классный слайдер и таблица с ценами. А если кто-то из постоянных клиентов захочет получать от вас новости/обновленя, ему будет доступна форма подписки на соответствуюущую рассылку.

БьютиДент

Чтобы представить стоматологическую клинику/бизнес как надежное и заслуживающее доверие медицинское учреждение, задумайтесь о выборе запоминающегося качественного дизайна. Здесь вы получите набор соответствующих инструментов для создания отличного вебсайта, например: блог, социальные фишки, Google-карты, галерею, страницу контактов и много других опций. При желании добавьте несколько симпатичных графических эффектов.

MetaSoft

Если хотите найти готовый шаблон HTML сайта для успешной презентации вашего программного обеспечения или веб-приложения, то MetaSoft отлично подходит для этой задачи. Он смотрится реально очень стильно, а функционал, в свою очередь, нисколько не уступает внешнему виду. Проект включает такие фишки как: параллакс эффект, Google карту и шрифты, подписку на рассылку, несколько видов галерей, блог, CSS-анимацию, мощный поиск и др.

Интеллект

Макет пригодится при разработке веб-ресурса школы, онлайнового детского центра развития и любых других обучающих направлений. В архиве получите разнообразные полнофункциональные плагины, которые сделают проект еще более мощным и заметным в сети. В принципе, набор фишек для профессиональных тем TemplateMonster плюс-минус похожий, поэтому здесь есть все те же базовые элементы: социальные опции, слайдеры, поддержка Bootstrap 4, множество визуальных стилей для элементов/футера. Дополнительно к основным страницам рарзешается писать посты о ваших классах и учителях в блоге.

Анна Панова (ресурс диетолога)

В мире все больше людей начинают задумываться о том, чтобы начать питаться правильно. Если вы являетесь специалистом в этой сфере и помогаете людям выбрать правильный режим питания/диеты, обязательно создайте свою персональную веб-страницу. Текущее решение отлично вам с этим поможет, — он позволит сделать качественный онлайн-проект со всеми необходимыми фишками: списком событий, формой контактов, странице «о себе». Он является кроссбраузерным и оптимизирован для быстрой загрузки. Здесь достаточно легко создать свой блог.

Novi-билдер

Одним из самых важных компонентом всех адаптивный шаблонов сайтов на HTML и CSS от компании TemplateMonster есть наличие специального конструктора страниц Novi-билдер. У вас есть возможность загрузить любой HTML-макет в этот конструктор, а потом вносить в него необходимые изменения в визуальном режиме. Другими словами, вы сможете просто перетаскивать элементы на те позиции веб-страницы, где захотите их расположить. Дополнительно есть опция сохранения части дизайна в качестве пресета, дабы потом добавлять его в свои последующие работы.

Если вы заинтересовались этим программных продуктом, то у разработчиков есть кое-что, что должно впечатлить вас еще больше. Речь идет о подписке, открывающей доступ ко множеству дополнительных плагинов/страниц. Всего существует три тарифных плана под разные типы пользователей:

  1. Для новичков/стартаперов ($29 в год)
    • Novi-билдер + специальные плагины;
    • неограниченное число создаваемых проектов;
    • все апдекты будут бесплатны;
    • включает тех.поддержку для разработчиков;
    • гарантия манибэк 30 дней;
    • многоцелевые интересные HTML-макеты.
  2. Опытным веб-разработчикам ($49 в год)
    • все то же самое, что в предыдущем варианте + более 20-ти HTML-шаблонов.
  3. Для тех, кто планирует делать свои макеты и продавать их (единоразовая плата — $149)
    • кроме все, озвученных выше опций, здесь имеется пожизненная(!) поддержка и обновления;
    • доступ ко всем Novi-темам;
    • возможность продавать темы, созданные с данным билдером.

Итого. В нашей статье найдете 20 русских HTML шаблонов сайта скачать которые вы можете как бесплатно, так и выбрав профессиональные решения. Тут уж все зависит от вашего бюджета и тхенических зданий. Если сможете самостоятельно разобраться в нюансах верстки, смотрите первую десятку в подборке. Предложения от TemplateMonster подойдут всем, кто хочет получить готовый продукт, а также некую поддержку при создании онлайн-проекта + возможность самостоятельно править веб-дизайн с помощью Novi-конструктора. Надеемся какой-то из этих вариантов пригодится вам в реализации своих целей независимо от выбранной бизнес-ниши или сферы деятельности.

Создание шаблона сайта из PSD

В этой статье, посвященной переработке PSD/HTML, мы возьмем PSD проект, который я сконструировал в предыдущей статье, и вернем функциональный HTML/CSS шаблон.

Это вторая часть статьи по проектированию делового веб-сайта. Во второй части мы сфокусируемся на конвертации и кодировке PSD макета, созданного нами в предыдущей статье.

Финальный результат

Вот шаблон, который мы попытаемся создать. Кликните по изображению и вживую увидите финальный результат.

Перед стартом

Удостоверьтесь, что у вас есть PSD файлы, которые мы создали в первой части статьи – нам понадобится извлечь изображения и включить их в шаблон.

Если вы еще не закончили с первой частью статьи, то советую пройтись и сделать то, указано в первой части (или хотя бы скачать PSD – исходники).

Эта статья предполагает, что Вы уже имеете некоторые HTML и CSS знания – однако, если что-либо станет не понятным – оставляйте комментарии – постараюсь помочь.

Создание файловой структуры

1 Создайте на вашем рабочем столе новую папку и назовите ее templates (или как вам будет угодно).

2 Внутри этой пустой папки создайте другую папку и назовите ее «images» — эта папка будет содержать все наши изображения, которые понадобятся нам в шаблоне.

3 Затем создайте три новых файла и назовите их index.html, style.css, и reset.css.

Index.html – это файл, где мы напишем html код к нашему шаблону. Style.css будет содержать код css, который заставит все выглядеть красиво и приятно.

Настройка reset.css

В файле reset.css нам необходимо использовать сбросы стилей. Основная причина, по которой нам понадобился reset css состоит в том что различные браузеру имеют тенденцию по разному отображать элементы HTML (например, размер шрифта заголовка, размеры подложки и полей). Использование reset.css уменьшит эти несогласованности.

4 Я буду использовать сброс стилей от Эрика Мейера. Скопируйте Reset CSS код в ваш файл reset.css.

Добавление базовой HTML разметки

5 Теперь откройте index.html с помощью любого редактора. Можете воспользоваться популярным редактором Dreamweaver (или CODA) или любым другим. Добавьте основную структуру для новой HTML страницы — многие популярные редакторы, такие как CODA или DREAMWEAVER автоматически сделают это за вас (или с помощью назначенной функции). Ниже приведен блок кода основной структуры вашей HTML страницы (у вас может немного отличаться).

Ссылаемся на CSS стили

6 Внутри тега head файла index.html, вам необходимо добавить следующие строчки кода, для того чтобы можно было подключить наши стили.

Это скажет index.html, где найти основную таблицу стилей.

7 Теперь откройте файл style.css и добавьте следующую строчку кода на самый верх документа, чтобы подключить файл reset.css.

Это гарантирует, что reset стили подключены перед любыми другими стилями CSS (это важно из-за модели наследования CSS).

Превосходно! Сейчас все три файла соединены друг с другом, итак мы можем приступить к кодированию.

Структура шаблона

Ниже, вы можете увидеть базовую структуру и основные секции HTML/CSS шаблона. Потратьте некоторое время на изучение базовых секций веб-страницы.

Код основной секции страницы

8 Для начала, создадим основную структуру index.html. Добавьте следующий блок кода для секций макета.

Как вы можете видеть, мы заключили все основные секции шаблона внутрь блока #wrap, это сделано для того, чтобы нам было проще отцентировать веб-страницу.

Основная секция нашего макета включает: #header, #featured-content, #services, #additional-information (содержит #client-testimonials и #featured-project), и #footer.

Создание фона

9 Чтобы создать фон нашего HTML/CSS шаблона, мы, сперва, должны вырезать фоновое изображение из PSD файла. Приведенный далее метод мы будем использовать и для нарезки второстепенных деталей CSS, и, кстати, здесь приведена краткая процедура. Первый шаг: в фотошопе выберите инструмент Rectangular Marquee Tool (M) и выделите узкую часть блока, куда бы вошел header и белый фон.

10 Как только вы сделаете выделение, идите в Edit > Copy Merged (Правка > Копировать объединение), создайте новый фотошоп документ и затем вставьте выделенную область в новый документ (фотошоп должен автоматически задать размеры нового документа и эти размеры будут основана на изображении, которое содержится у вас в буфере обмена).

11 Затем вы должны пойти в File > Save for Web & Devices (Сохранить для Web и устройств) и сохранить файл. Формат файла выберите GIF и затем сохраните его как main-bg.jpg внутри папки images.

12 Теперь добавьте следующий код в файл style.css, тем самым мы зададим фон.

Здесь мы закрепляем фоновое изображение за тегом body HTML документа и затем повторяем его вдоль оси х через всю страницу.

Мы также установили ширину макета и отцентировали его на экране ( margin: 0 auto; центрируем макет).

Добавление логотипа

13 Сейчас мы добавим логотип в header. Для начала нам необходимо извлечь его из PSD. Lля этого нужно выбрать слой, в котором сохранен логотип, нажать на комбо Ctrl+A, и, не отпуская, дважды щелкнуть по миниатюре слоя на панели слоев.

Тем самым мы выделим текст логотипа.

14 Нажмите копировать, создайте новый документ и вставьте текст в новый документ.

15 Выберите Save for Web & Devices, выберите формат PNG и сохранить файл как logo.png в папке images.

Здесь мы используем формат PNG, так как мы хотим, чтобы изображение имело прозрачный фон, что позволит нам использовать изображение на любом фоне.

16 Сейчас добавьте HTML код, приведенный ниже, который создаст разметку для логотипа.

17 Затем, чтобы вывести логотип на экран, установите изображение логотипа как фон заголовка блока header (#header h1). Добавьте следующий код в style.css файл.

Для начала устанавливаем высоту контейнера header, затем закрепляем изображение логотипа как фон заголовка h1.

Мы воспользовались техникой «замена фонового изображения css», которая прикрепляет фоновое изображение к элементу и затем сдвигает текст элемента за пределы экрана с помощью text-indent: -9999px атрибут/значение.

Замена фоновым изображением обеспечивает некоторые выгоды для SEO и облегчает понимание контента для пользователей использующих screen readers.

Создание навигации

18 Чтобы создать блок навигации, добавьте следующий HTML код в файл index.html.

19 Добавьте следующий CSS код в файл style.css.

Все довольно просто: Мы сделали контейнер #nav плавающим ( float:right ) и также сдвинули его вниз на 72px с помощью атрибута margin. Элементы li также сделаны плавающими, (чтобы быть уверенным в том, что элементы расположатся друг напротив друга в одном ряду, а не друг под другом), но относительно левой стороны.

Остальная часть кода просто добавляет стиль ссылкам и разделитель «-» между названиями страниц.

Код первой контент секции

20 Чтобы создать эту секцию, нам необходимо вырезать несколько изображений из PSD. Первым будет заголовок. Мы будем применять тот же процесс, что и для нарезки логотипа. Выделите текст, предварительно выбрав нужный слой на панели слоев, затем жмите копировать, и создайте новый документ в фотошопе.

21 Вставь текст в новый документ и затем сохраните его в папке images через Save for Web & Devices и сохраните как featured-content-title.png.

22 Затем те же операции повторите с подзаголовком (назовите файл featured-content-subtitle.png ), пунктирной линией (имя horizontal-line.png ), и текстом ( featured-content-text.png ).

23 Сейчас, после того как мы извлекли все необходимые изображения, нам необходимо написать HTML код. Добавьте следующий код в контейнер #featured-content вашего index.html файла.

24 Затем добавьте CSS код, приведенный ниже, для оформления стиля наших элементов.

В этом блоке кода, мы сперва сдвинули вниз контейнер #featured-content на 65px с помощью атрибута margin .

Затем мы снова воспользовались техникой ‛замена фонового изображения CSS‛ для элементов h2, h3, и p, чтобы показать фоновые изображения, которые мы извлекли.

Стиль для пунктирной линии был написан отдельно (смотрите комментарии CSS), так как мы будем использовать его и в других контейнерах. Это также способствует упорядочиванию нашего кода.

Создание секции обслуживания

25 Сперва, как обычно, извлечем необходимые изображения из PSD файла. Нам потребуется синий фон блока (сохраним его как services-box-bg.png ), затем основные заголовки блоков (сохраним их как web-design-title.png , marketing-title.png , и optimization-title.png respectively ), пунктирная линия ( service-dotted-line.png ), и кнопки у основания каждого блока ( get-more-details-button.jpg , view-case-studies-button.jpg , и learn-more-button.jpg ). Воспользуйтесь тем же самым способом, который мы прошли в предыдущих пунктах, для извлечения и сохранения изображений.

26 Сейчас добавьте следующий HTML код внутрь контейнера #services в index.html.

В этом коде мы добавили три новых контейнера, каждый из которых получил класс .service-box . Внутри каждого из этих блоков присутствует заголовок, текст, пунктирная линия и кнопка.

Первому блоку также назначен класс .first ( ), это сделано для того чтобы немного изменить стиль этого контейнера от остальных.

27 Теперь добавьте следующий CSS код в ваш основной стилевой файл.

Там, где требуется, мы снова воспользовались «техникой замены фонового изображения».

К остальным элементам добавлены необходимые поля или отступы, с целью позиционировать и назначить элементам нужные интервалы.

Следует отметить, что блоку service-box присвоено левое поле шириной 46px. Это обеспечивает последовательный интервал между блоками обслуживания. Однако, если бы вы назначили и первому блоку левой поле в 46px, ты в шаблоне это выглядело бы неорганично.

Это исправить довольно легко: достаточно установить левому полю блоку .first значение 0, тем самым мы исключим значение атрибута margin класса .service-box и гарантировали приемлемое расположение блока.

Создание секции клиентских отзывов

28 Нам требуется вырезать заголовок из PSD файла. Воспользуйтесь тем же способом, что и раньше и сохраните изображение как client-testimonials-title.png .

29 Добавьте следующий HTML код в файл index.html внутрь контейнера #client-testimonials .

Здесь тоже все просто: мы имеем три контейнера .testimonial , которые содержат изображение автора, имя автора, текст, и название компании.

30 Теперь добавьте следующий CSS код в ваш основной стилевой файл.

Первые три строчки кода связаны с родительским контейнером #additional-info , которому в первой строчке задана высота и поля.

Важной деталью является ширина (425px) и поле (45px) контейнера #client-testimonials , они должны соответствовать соответственно ширине и полю проектного блока. Равная длина этих блоков позволит визуально отдать этим блокам по равной половине экрана.

31 Между этими двумя блоками нам необходимо добавить пунктирную линию, которая будет нашим разделителем. Вырежьте ее из PSD и сохраните как vertical-line.png .

32 Теперь добавьте следующую строчку кода между блоками #client-testimonials и #featured-project в вашем index.html файле.

33 Затем вставьте следующий блок кода CSS в ваш файл style.css.

Приведенный CSS гарантирует, что линия окажется между двумя различными секциями.

Создание секции под проект

34 Вырежьте заголовок из PSD, тем же способом, что и раньше, и сохраните его, как featured-project-title.png .

35 Добавьте ниже приведенный код HTML в ваш index.html.

36 Ниже приведенный блок кода отвечает за оформление секции проекта, добавьте его в свой CSS файл.

Ширина этого контейнера равна 425 px, ширина левой подложки 45 px. Также мы опять воспользовались техникой замены фонового изображения для заголовка и затем просто установили размер шрифта, цвета, и полей.

37 У футера очень простой код. Добавьте следующий код в ваш index.html.

В футере присутствует горизонтальная линия, как разделитель между блоком #additional-info и самим футером, и обычный текст о правах.

38 Теперь добавьте следующий CSS код, который отвечает за оформление футера.

Все просто: мы задали высоту футера и назначали нижнюю подложку в 30px, что создаст органичное пространство шаблону.

Затем мы задали шрифт, цвет и установили подложку, с целью отодвинуть текст от горизонтальной линии.

Конец!

Это все. Если вы делали все согласно плану, у вас должно получиться так, как на скриншоте ниже.

Источник sixrevisions.com/tutorials/web-development-tutorials

Файлы оригинального урока:

Файлы переводчика, по которым сделаны скриншоты статьи:

Документация сервиса автоматической HTML верстки сайтов

На этой странице подробно описаны возможности сервиса PSD to HTML Converter и как ими воспользоваться. Вы узнаете как создать веб страницу и сделать свой web сайт практически бесплатно.

Особенности конвертации Photoshop дизайна в CSS/HTML

Для эффективного использования сервиса PSD to HTML Converter необходимо знать следующие особенности Photoshop.

  • Слой Photoshop всегда имеет прямоугольную форму и его размер определяется размером его содержимого. Любая часть слоя может быть прозрачной. Например, слой, состоящий из одного пикселя, имеет размер 1×1 пиксель. Если слой состоит из двух пикселей, один из которых находится в левом верхнем углу документа, а второй — в правом нижнем, то размер слоя будет равен размеру всего документа Photoshop (но все пиксели, кроме данных двух, будут прозрачными).
  • Слои могут пересекаться и накладываться друг на друга. Если один слой в панели слоев Photoshop находится выше, чем другой слой, то содержимое первого слоя будет находиться поверх содержимого второго слоя. Порядок наложения слоев в Photoshop сохраняется для CSS слоев в сконвертированном HTML.
  • Если какой-либо слой накладывается на текст, то текст становится недоступным для кликов мышкой. Поэтому избегайте случаев, когда слой перекрывает текстовые слои или слои с интерактивными элементами (ссылки, поля ввода).
  • Слои можно объединять в группы. Они отображаются как папки на панели слоев Photoshop.
  • Размер группы слоев определяется прямоугольной областью, которая включает в себя все слои группы. Группа — это тоже слой, поэтому относительно нее действуют те же самые правила относительно порядка наложения слоев.
  • Чтобы изменить порядок следования слоев, либо перетаскивайте их мышью на панели слоев Photoshop, либо используйте комбинации «Ctrl + [» и «Ctrl + ]».
  • Чтобы изменить имя слоя, дважды кликните по нему в панели слоев Photoshop. Вам это понадобится для того, чтобы помечать слои Вашего дизайна тегами.
  • Не используйте в своем дизайне Adjustment layers, они не поддерживаются сервисом.

Правила, по которым PSD шаблон преобразовывается в HTML верстку

Видимость слоев

Любой Photoshop файл состоит из слоев (Layer). Любая блочная HTML верстка сайта также состоит из слоев, стиль которых задается через CSS. В процессе конвертации все видимые слои из PSD дизайна преобразуются в элементы CSS/HTML верстки: слои изображений перейдут в изображения, текстовые слои перейдут в текстовые блоки.

Если слой (Layer) или группа слоев (Layer Group) имеют в Photoshop аттрибут «невидимый» (“invisible”), то они будут пропущены и не попадут в CSS верстку. Таким образом, используя сервис автоматической генерации HTML и CSS верстки, вы всегда получите то, что видите в PSD файле (WYSIWYG — What You See Is What You Get).

Создание HTML элементов

HTML довольно богатый язык и HTML/CSS верстка обычно состоит не только из изображений и текста, но также содержит ссылки, различные формы, поля ввода текста, списки, таблицы и другие HTML элементы. Чтобы автоматически создать эти HTML элементы, требуется иметь больше информации, чем изначально содержится в PSD файле. Отличный способ дать нам эту информацию – сообщить ее в имени слоя (Layer Name) в Вашем PSD файле. В имени любого слоя в любом месте Вы можете указать один или несколько тегов, которые мы интерпретируем описанным ниже способом.

Каждый слой HTML/CSS верстки будет иметь такое же имя, какое этот слой имел в PSD шаблоне (за исключением тегов, мы удалим их из имен). При этом Вам нет необходимости думать об уникальности имен в Photoshop, заботу об этом мы берем на себя.

Сложные многослойные изображения

Как уже было упомянуто, из каждого Photoshop слоя в верстке получается отдельный HTML/CSS элемент. Таким образом, если в макете для создания одного изображения (логотип/бэкграунд/т.п.) использовано несколько слоев — это плохо отразится на автоматически созданной верстке сайта — вы получите излишние элементы с изображениями.
Справиться с этой проблемой легко. Выберите один из двух недеструктивных методов:

  1. Объедините все соответствующие слои одну группу слоев и пометьте группу тегом #merge. В процессе верстки такая группа слоев будет автоматически объединена в один слой.
  2. Объедините несколько слоев в один слой, сконвертировав их в Smart Object. Для этого выделите нужные слои на панели слоев и запустите команду «Layer» -> «Smart Objects» -> «Convert to Smart Object».

HTML5/CSS3 верстка

Верстка текста из слоев PSD-макета

Все текстовые слои в Photoshop преобразуются в текстовые блоки в HTML верстке. При этом сохраняются все стилевые параметры текста и параграфа, такие как:

  • Шрифт
  • Размер шрифта
  • Цвет текста
  • Эффект отбрасывания тени
  • Выравнивание текста (left, centered, right, justify)
  • Отступ сверху
  • Отступ снизу
  • Межстрочный интервал
  • Надстрочный/подстрочный текст
  • Направление текста (LTR или RTL)
  • и другие

Сервис поддерживает автоматическое встраивание всех (650+) WEB шрифтов от Google.

Текст, шрифт которого не является стандартным WEB шрифтом, верстается как изображение, имеющее в качестве альтернативного текста текст из слоя в Photoshop. Сервис создаст предупреждение при использовании нестандартных шрифтов в текстовых слоях.

Если вы все же хотите сверстать слой с нестандартным шрифтом как текст и затем подключить шрифт с помощью @font-face, пометьте такой слой тегом #text. После конвертации не забудьте вручную добавить директиву @font-face в сгенерированный сервисом .css файл. Заметьте, что т.к. на нашем сервере нет нестандартных шрифтов, то произойдет замена шрифта стандартным, отчего на сгенерированном скриншоте верстка будет не соответствовать оригинальному дизайну.
Если в вашем макете много текстовых слоев с нестандартными шрифтами, вы можете воспользоваться опцией «Конвертировать ВСЕ текстовые слои в текст» при конвертации PSD файла.

Для текстовых слоев в Photoshop разрешается устанавливать только следующие эффекты (Blending Options) :

  • Отбрасывание тени (Drop Shadow)
  • Наложение цвета (Color Overlay)

Только эти эффекты могут быть установлены с помощью CSS. Текстовые слои, для которых установлены какие-либо другие эффекты, будут сконвертированы в изображения.
Для создания заголовков различных уровней используйте теги #h1, #h2, #h3, #h4, #h5, #h6.

Границы текстового блока могут отличаться в браузере и в Photoshop. Для более точного управления границами текста переведите текстовый слой в режим «Paragraph Text» из режима «Point Text». В данном режиме редактирования Вы сможете точно установить границы текстового слоя. Для изменения режима редактирования, кликните правой кнопкой мыши по слою в панели слоев и выберите соответствующую опцию — «Convert to Paragraph Text» либо «Convert to Point Text».

Всегда отключайте сглаживание текста в своих PSD макетах. CSS не поддерживает сглаживание, поэтому даже при ручной верстке не получится сверстать текст того же размера и начертания, как у текстового слоя в Photoshop, имеющего сглаживание.

Поддерживаемые теги

Тег — это текстовая метка в имени слоя или группы слоев, при помощи которой Вы указываете, что слой (или группа слоев) в PSD файле должен быть сверстан в нечто большее, чем в обычное изображение или параграф текста. Тег слою можно задать несколькими способами:

  • добавить перед тегом хэш ‘#’, например: #bg,
  • добавить перед тегом тире ‘-‘, например: -bg,
  • заключить имя тега в символы ‘$’, например: $bg$.

Тегом можно пометить любой слой или группу слоев в дизайн-макете. Добавить тег в дизайн-макет Photoshop очень просто — нужно написать его в имени слоя в любом месте.
Например, если есть слой «Layer 1» и Вы хотите сделать его ссылкой, то нужно добавить тег #link в имя слоя, например, таким образом: «Layer 1#link», или «La$link$yer 1», или «-link Layer 1». В любом из случаев в получившейся верстке класс слоя будет: .

Имена Clipping mask слоев не должны содержать тегов — тегами следует помечать базовый слой, к которому применяется маска.

На данный момент в именах слоев можно использовать следующие теги:

  • #header, #footer, #section, #nav, #article, #as .
  • #link — если тегом помечен один слой, то он будет сверстан, как ссылка. Если тегом помечена группа слоев, то каждый слой группы будет сверстан как ссылка.
  • #link — если в качестве параметра тега передана ссылка, то она будет использоваться в качестве гиперссылки в сгенерированном коде. Пример: #link.
  • #nolink — текст или часть текста помеченного слоя, имеющий подчеркнутый стиль, не будет автоматически верстаться как ссылка. По умолчанию подчеркнутый текст конвертируется в гиперссылку.
  • #bg — этот тег используется как подсказка, что данное изображение надо сверстать, как background свойство блока, содержащего этот слой. Если у в группе слоев несколько слоев помечено тегом #bg, то они будут объединены в одно изображение. Если пометить тегом целую группу слоев, то все слои группы будут объединены в одно изображение и оно будет использовано как бэкграунд.
    Единичные слои в группе необязательно помечать данным тегом, т.к. сервис сам находит наиболее подходящий в качестве фона слой. Обычно, это изображение наибольшего размера в данной группе.
  • #bg<[тип повторения]>, где [тип повторения] — это одно из:
    repeat-x или rx — фон будет повторяться по оси x
    — repeat-y или ry — фон будет повторяться по оси y
    repeat или r или repeat-xy — фон будет повторяться по осям x и y
    Примеры: #bg; #bg, #bg.
  • #bg-size — позволяет вручную задать css стиль background-size для фонового изображения.
    Параметр size — это либо ‘cover‘, либо ‘contain’, либо пара значений в px или %.
    Примеры:
    #bg-size
    #bg-size
    #bg-size
  • #bg-pos — позволяет вручную задать css стиль background-position для фонового изображения.
    Параметр [HorizontalPosition] — одно из: left, right, center.
    Параметр [VerticalPosition] — одно из: top, bottom, center.
    Examples:
    #bg-pos
    #bg-pos
  • #h1, #h2, #h3, #h4, #h5, #h6 — из текста или изображения будет сверстан заголовок 1-го, 2, 3, 4, 5 или 6-го уровня. Если слой текстовый, то он должен обязательно состоять из одного параграфа.
  • #h1, . , #h6— из изображения будет сверстан заголовок 1-го, 2, 3, 4, 5 или 6-го уровня, при этом изображение будет иметь в качестве альтернативного текста заданное значение. Пример: «Logo#h1«. Также, для этой цели вы можете использовать тег #alt: «Logo#h1#alt«.
  • #in_text — Если пометить тегом одиночный слой, то из его изображения будет сверстана форма ввода текста (type=”text”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder. Остальные слои группы будут объединены в одно изображение.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_passw — из изображения будет сверстана форма ввода текста для ввода пароля (type=”password”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder. Остальные слои группы будут объединены в одно изображение.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #textarea — из изображения будет сверстана форма для ввода нескольких строк текста (textarea). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_button — из изображения будет сверстана форма ввода (input) типа «кнопка» (type=”button”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
  • #in_checkbox — будет сверстана форма ввода (input) типа «флажки» (type=”checkbox”). Добавьте тег #checked, чтобы checkbox или radio button были выделены по умолчанию.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_radio — будет сверстана форма ввода (input) типа «переключатель» (type=”radio”). Для того, чтобы объединить несколько переключателей в одну группу, задайте им идентичные имена в PSD шаблоне либо задайте имя переключателя как параметр тега: #in_radio . Добавьте тег #checked, чтобы checkbox или radio button были выделены по умолчанию.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_file — из изображения будет сверстана форма для ввода имени файла для отправки на сервер (type=”file”).
  • #in_image — из изображения будет сверстана форма ввода типа «поле с изображением» (type=”image”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
  • #in_submit — из изображения будет сверстана форма ввода для отправки данных формы на сервер (type=”submit”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #select — позволяет сверстать список опций. Чтобы сверстать список опций, отметьте группу, содержащую один или несколько текстовых слоев с текстом опций, данным тегом. В качестве опций будут сверстаны даже те текстовые слои группы, которые имеют флаг «невидимый» (чтобы явно указать, что не надо верстать текстовый слой, как опцию, отметьте его тегом #skip). Кроме текстовых слоев, группа может содержать фигуру (Shape), представляющую фон списка. Остальные слои группы будут проигнорированы. Чтобы выбрать, какая опция должна быть выбранной по умолчанию, отметьте соответствующий текстовый слой тегом #selected. Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #form — имеет смысл только когда установлен для группы слоев (Layer Group). В этом случае будет сверстан контейнер форм (form). Все формы ввода должны быть помещены внутрь группы контейнера форм. Если ни одна группа не помечена тегом формы, то форма будет создана автоматически.
  • #img — этим тегом можно пометить текстовый слой (Type Text Tool Layer). В этом случае текст будет сверстан как изображение. При этом в качестве альтернативного текста изображения (alt) будет задан текст слоя.
    Если пометить этим тегом фигуру, то она будет растеризована и сверстана как изображение, а не как CSS3 код.
  • #jpg — изображение данного слоя будет сохранено в JPEG формате вместо PNG формата, даже если изображение содержит прозрачные пиксели. Так как JPG формат не поддерживает прозрачность, прозрачные пиксели будет заменены содержимым нижележащих слоев. Используйте этот тег с осторожностью.
    Помните, что если слой не содержит прозрачных пикселей, то он будет сохранен в JPG формате автоматически. Таким образом, не надо помечать слои данным тегом без особой на то необходимости.
  • #gif — изображение данного слоя будет сохранено в GIF формате. Подробнее.
  • #text — текстовый слой, помеченный данным тегом, будет сверстан как текст в независимости от того, использует ли текст нестандартный для web шрифт или слою заданы недопустимые эффекты (т.е. отличные от Drop Shadow и Color Overlay). В данном случае текст будет перенесен в CSS верстку сайта без эффектов. При использовании нестандартного шрифта ответственностью пользователя будет добавить в HTML верстку описание этого шрифта с помощью @font-face. Заметьте, что на скриншоте web верстки сайта текст будет рисоваться шрифтом по умолчанию.
    Если в вашем макете много текстовых слоев с нестандартными шрифтами, вы можете воспользоваться опцией «Конвертировать ВСЕ текстовые слои в текст» при конвертации PSD файла.
  • #skip — любой слой или группа слоев, помеченная данным тегом, будет пропущена и не попадет в верстку. Удобен при создании списков. Внимание! Используйте с осторожностью.
  • #uladvanced tag . Применяется только к группе элементов (Layer Group). Из группы будет сверстан маркированный список ul. Все элементы данной группы станут элементами li этого списка. Внимание! Все слои с изображением маркера списка должны быть помечены тегом #limage (на самом деле, в качестве маркера будет взят первый встреченный элемент, помеченный этим тегом. Остальные будут пропущены). Это необходимо, чтобы изображения маркеров не стали элементами списка! Иногда в дизайн-макете все маркеры объединены в один слой. Чтобы облегчить себе работу, создайте слой с одним маркером (к примеру, для первого элемента списка). Пометьте его тегом #limage. Слой с оставшимися маркерами пометьте тегом #skip (тогда этот слой будет просто пропущен).
    Вы можете ознакомиться с использованием тега #ul для верстки горизонтального и вертикального меню на примере образцового PSD макета и сконвертированной из него верстки сайта).
  • #limageadvancedtag . Имеет смысл только для элемента внутри группы, помеченной тегом #ul. Первый встретившийся внутри группы элемент, отмеченный этим тегом, будет использован в качестве изображения маркера списка. Остальные элементы, помеченные этим тегом, будут пропущены.
  • #flex — если слой или группа помечены этим тегом, то сервис попытается сделать его ширину (а также ширину родительских и дочерних элементов) резиновой, т.е. их ширина будет задана в процентах от ширины родительского элемента.
  • #fix — если слой или группа помечены данным тегом, то сервис сделает его (ее) ширину фиксированной, т.е. ширина будет установлена в пикселях.
  • #min-width<[width]>, #max-width<[width]>
    где [width] это одно из:
    — значение в пикселях. Пример: #min-width <1000>или #min-width<1000px>
    — значение в процентах. Пример: #max-width
  • #min-height<[height]>, #max-height
    где [height] это одно из:
    — значение в пикселях. Пример: #min-height <1000>или #min-height<1000px>
    — значение в процентах. Пример: #max-height
  • #normal, #hover, #visited, #active, #selected — теги для верстки различных состояний текста, изображений, форм. Подробнее об их использовании читайте в статье.
  • #table, #thead, #tbody, #tfoot — используйте данные теги для верстки таблиц. Подробнее читайте в статье о верстке таблиц.
  • #pos_fixed — отметьте слой или группу слоев этим тегом, чтобы сверстать их, используя фиксированное позиционирование (CSS стиль «position: fixed;»).
  • #absolute — отметьте слой или группу слоев этим тегом, чтобы вынести их из общего потока документа и сверстать, используя абсолютное позиционирование (CSS стиль «position: absolute;»).
  • #hide — отметьте слой или группу слоев этим тегом, чтобы сверстать их невидимыми (CSS стиль «display: none;»).

Примеры

Несколько PSD макетов, на примере которых рекомендуется изучить использование тегов, вы можете скачать по ссылкам ниже:

Группировка CSS слоев в div блоки

Каждая группа слоев (Layer Group) в Photoshop конвертируется в div блок в результирующей HTML/CSS верстке.

Объединяйте логические группы элементов (такие, как заголовок, футер, основной контент, колонки и т.п.) в группы слоев (Layer Group) в Photoshop. Это поможет нам правильно объединить CSS элементы в гибкие div блоки HTML (таким образом, если кто-то добавит больше текста, ничего не испортится). Элементы будут сгруппированы в колонки и ряды, в которых выравниваться и располагаться друг относительно друга они будут используя такие css свойства, как ‘margin’, ‘padding’, ‘float’.

Использование «плавающей» верстки является наилучшим практически для любого сайта. Если элемент CSS верстки изменит свой размер (например, добавится еще один параграф текста), то при HTML вёрстке в абсолютных координатах текст «наедет» на соседние блоки. В «плавающей» же CSS верстке, расширившийся блок «подвинет» блоки, которые с ним граничат.

Photoshop CS4 (и более ранние версии) имеет ограничение на уровень вложенности групп (Layer Group) равное 5-ти. В Photoshop CS5 оно было увеличено до 10-ти. Такого количества вложенных групп вполне достаточно для большинства дизайнов любой сложности.

Группировка элементов не только поможет сверстать Ваш дизайн-макет более правильно, но и облегчит Вашу работу с макетом. PSD дизайн намного легче и удобнее модифицировать, когда все слои логически объединены в группы.

SEO (Search Engine Optimization)

Чтобы поисковые системы успешнее находили Вашу HTML страницу в интернете, на ней следует задать значения таким мета тегам, как title, description, keywords.

Сервис CSS верстки Psd 2 Html Converter поможет автоматически добавить эти мета теги на Вашу страницу. Откройте форму информации о PSD файле (нажмите ‘Alt + Shift + Ctrl + I’ или в меню ‘File’ выберите пункт ‘File Info. ‘ и выберите вкладку ‘Description’) и заполните поля ‘Document title’, ‘Description’, ‘Keywords’. Информация из этих полей автоматически попадет на сверстанную HTML/CSS страницу в качестве соответствующих мета тегов.

Для поисковой оптимизации важно следить за тем, чтобы информация на HTML странице была правильно структурирована. Текст HTML страницы состоит из заголовков различного уровня (в HTML таких уровней 6) и собственно из основного текста. Чтобы создать правильную структуру HTML документа, воспользуйтесь тегами #h1, #h2, #h3, #h4, #h5, #h6. Как понятно из названий, при их использовании будут созданы заголовки 1, 2, 3, 4, 5 или 6 уровня. Чем ниже уровень заголовка, тем он важнее. На правильно сформированной странице заголовки должны быть расположены сверху вниз в порядке возрастания уровня (т.е. уменьшения важности).

Порядок загрузки файла и оплаты конвертации

Процесс загрузки PSD макета, его конвертации в HTML/CSS верстку и оплаты состоит из нескольких шагов.

  1. Выберите предлагаемые опции конвертации.
  2. Загрузите файл на наш сервер. В зависимости от размера файла загрузка и конвертация может длиться разное время, вплоть до 10 минут.
  3. При наличии каких-либо замечаний к подготовке PSD файла, мы предложим Вам с ними ознакомиться. Рекомендуем исправить все замечания к подготовке макета и вернуться к пункту 1. Если замечания не исправлены, CSS верстка может не соответствовать загруженному дизайн-макету.
  4. Перед оплатой Вам будет доступен предпросмотр получившейся CSS верстки сайта (скриншот страницы), а также предпросмотр сгенерированного HTML кода. Ознакомьтесь с ними и только если Вас все устраивает, переходите к оплате.
  5. Если Вы вошли под свои аккаунтом и на Вашем счету есть доступные конвертации, будет предложено воспользоваться конвертацией со счета.
  6. Если Вы не вошли под своим аккаунтом, либо на Вашем счету нет доступных конвертаций, будет предложено воспользоваться одним из способов оплаты.
  7. При успешной оплате Вы будете перенаправлены на страницу загрузки CSS верстки сайта. На Ваш e-mail будет отправлено письмо с информацией о конвертации. Если Вы авторизованы, информация о конвертации станет доступна из личного кабинета.

Конвертировать HTML в PSD / URL в PSD онлайн

Продвинутый онлайн-сервис конвертации html файлов в PSD. Для mac & windows

  • Image
  • Document
  • Ebook
  • Audio
  • Archive
  • V >
  • abc
  • abw
  • csv
  • dbk
  • djvu
  • dng
  • doc
  • docm
  • docx
  • erf
  • ebm
  • ewm
  • emw
  • gzip
  • kwd
  • odt
  • oxps
  • ppt
  • pptx
  • pdf
  • rtf
  • rar
  • txt
  • wps
  • xls
  • xlsx
  • zip
  • Image
  • Document
  • Ebook
  • Audio
  • Archive
  • V >
  • abc
  • abw
  • csv
  • dbk
  • djvu
  • dng
  • doc
  • docm
  • docx
  • erf
  • ebm
  • ewm
  • emw
  • gzip
  • kwd
  • odt
  • oxps
  • ppt
  • pptx
  • pdf
  • rtf
  • rar
  • txt
  • wps
  • xls
  • xlsx
  • zip

Язык гипертекстовой разметки

HTML ― это файл веб-формата. Исходный код HTML можно изменить в текстовом редакторе. HTML-файлы разрабатываются для будущего использования в веб-браузерах пользователей и позволяют форматировать сайты с текстом, изображениями и другими необходимыми материалами. В файлах этого формата используются теги для создания веб-страниц. Интерпретация HTML-кода выполняется веб-браузером, и этот код, как правило, не показывается пользователю.

Adobe Photoshop bitmap

Формат предназначен для хранения растровых изображений в файле проекта Adobe Photoshop. Хранится в несжатом виде и содержит цветовые пространства, слои с масками, двухцветные настройки, структуры слоев и другие данные для тонкого редактирования растрового изображения.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL