Шаблон сайта карандаш HTML, CSS, Шрифты, Photoshop (psd), 1 страница

Содержание

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

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

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

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

Создание дизайна сайта в фотошопе с нуля

Прежде чем верстать шаблон сайта в HTML/CSS, его надо проработать. Отрисовывать дизайн принято в программе Photoshop. Готовый макет сохраняется в файл формата .PSD.

В качестве примера создадим дизайн сайта на рисунке ниже.

1. Открываем Photoshop и создаём в нём новый документ (Файл -> Создать или Ctrl+N).

2. Устанавливаем начальные параметры. На практике продумать дизайн с точностью до пикселя практически невозможно — в процессе вёрстки обязательно нужно будет что-то поменять, переместить, переделать. Поэтому размеры можно задавать приблизительные, причём ширину и высоту документа желательно указывать заведомо больше планируемых размеров сайта, чтобы в макете точно уместились все элементы. Наш документ сделаем 1000 пикселей шириной и 1500 пикселей высотой. Обратите внимание: пикселей, а не сантиметров. Другие параметры можно не трогать.

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

Если линеек нет — включите их (Просмотр -> Линейки или Ctrl+R).

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

4. Проверяем, чтобы размер шрифта был указан в пикселях, а не в пунктах. Если настроено не так, идём в Редактирование -> Настройки -> Основные, в отобразившемся окне переходим на вкладку Единицы измерения и линейки, в выпадающем списке Текст выбираем Пиксели и нажимаем OK.

5. Сразу делаем подложку сайта. У нас это градиентная заливка оранжевого, переходящего в жёлтый цвет. На панели слева выбираем инструмент Градиент.

На появившейся вверху панели жмём кнопку Зеркальный градиент, выбираем цвет на палитре левее.

Используя инструменты открывшегося окна Редактор градиентов, выбираем нужные цвета. Чтобы задать точный цвет контрольной точки, щёлкните на ней, нажмите кнопку Цвет и в окне палитры цветов укажите его в формате RGB, HSB, CSS или любом другом из доступных.

В результате манипуляций градиент получился следующим.

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

6. Сохраняем подложку в файл. То, что мы сделали, должно отображаться под основной страницей и занимать всё окно браузера целиком — своего рода подложка. Например, ширина сайта — 800 пикселей, а разрешение экрана у пользователя гораздо больше. Оставшееся пространство (всё, кроме тех самых 800px, которые будут заняты блоком страницы) заполнится градиентным фоном.

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

Сохранить такую узкую полоску несложно.

6.1. Выбираем инструмент Прямоугольная область.

6.2. Выделяем полоску произвольной ширины, но по всей длине слоя.

6.3. Копируем выделенную область (Ctrl+C).

6.4. Создаём новый документ (Ctrl+N), устанавливаем для него ширину 1 пиксель и вставляем скопированное (Ctrl+V).

6.5. Сохраняем файл в JPG-формате.

7. Создаём фон страницы. Фоном будет простой белый цвет. Выбираем инструмент Прямоугольник и в окне свойств задаём нужные параметры. У нас получился прямоугольник 800×1100 пикселей, левый верхний угол которого лежит в точке 100,0.

8. Делаем фон шапки. Градиентная заливка, похожая на подложку, размерами 780x80px.

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

9. Создаём верхнее меню. С помощью инструмента Горизонтальный текст добавляем на макет первый пункт меню — Главная. Слой создастся и даже переименуется автоматически, так что с ним можно ничего не делать.

Здесь важно, чтобы все пункты распределились равномерно, поэтому крайне рекомендуется использовать линейки. Чтобы вытянуть вертикальную, проведите указателем, удерживая при этом нажатой кнопку мыши, слева направо. С помощью линеек отмеряйте расстояние, учитывая, что каждый пункт меню должен занимать в нашем случае 120 пикселей.

10. Аналогично вставляем остальные пункты меню.

11. Добавляем логотип. У нас уже есть готовый, поэтому его остаётся только аккуратно вставить в макет. Для этого нажимаем Файл -> Открыть, затем щёлкаем на изображении и, удерживая нажатой кнопку мыши, перемещаем его на заголовок документа-шаблона, когда он откроется, перетаскиваем картинку в нужное место макета и отпускаем кнопку мыши.

12. Пишем имя и слоган сайта. Уже известным нам инструментом Горизонтальный текст дополняем уже почти созданный логотип надписями.

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

14. Добавляем на только что созданный градиент текст-заголовок информационного блока.

15. Рисуем обрамление области. Для этого достаточно использовать прозрачный прямоугольник с чёрными линиями контура. Выбираем инструмент Прямоугольник, задаём тип заливки фигуры Нет цвета, щёлкаем значок Задать тип штриха фигуры и выбираем чёрный цвет, иначе линий не будет. Если контур получился слишком толстым, устанавливаем ширине линий значение 0,5 пт.

16. Ниже добавляем заголовок блока с градиентной заливкой, как в п. 12-13.

17. Создаём блок меню левой панели. Добавляем оранжевый прямоугольник шириной 100px с жёлтым контуром 0,2 пт.

18. Добавляем на него текст.

19. С помощью дублирования слоёв и линеек создаём ещё пять пунктов меню левой панели.

20. Прописываем текст в основной части страницы, используя всё тот же инструмент Горизонтальный текст.

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

22. Рисуем фон нижней части сайта — оранжевый градиент длиной 64 пикселя.

23. Сохраняем полоску нижнего фона шириной 1 пиксель в отдельный графический файл.

24. Уменьшаем высоту страницы. Получилось так, что все элементы уже прорисованы, а лишнее место ещё осталось. Вот тут-то нам и пригодились осмысленные имена слоёв. Среди прочих выбираем фоновый слой (у нас он так и называется — Фон) и с помощью инструмента Трансформация уменьшаем высоту нашего белого прямоугольника до нижнего края футера страницы.

25. Сохраняем шаблон в файл формата .PSD (Файл -> Сохранить).

26. Результатом сего действа и стал ещё простой, но уже нормально выглядящий шаблон сайта.

Теперь из PSD-макета остаётся средствами HTML/CSS сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

Шаблон сайта карандаш: HTML, CSS, Шрифты, Photoshop (psd), 1 страница

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

Статья предназначена для пользователей, знакомых с 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>>

76 ресурсов для тех, кому нужен бесплатный дизайнерский контент: иконки, шрифты, шаблоны, логотипы

Время чтения: 24 минуты Нет времени читать? Нет времени?

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

В статье мы собрали:

49 специализированных ресурсов: 31 – с иконками, 12 – со шрифтами, 6 – с PSD-шаблонами.

20 огромных архивов, где можно сразу найти всю необходимую графику.

7 сервисов по созданию логотипов и фавиконов.

Прежде чем использовать дизайнерский контент, проверьте лицензию. Разрешено коммерческое использование – смело обновляйте сайт. Если видите перечеркнутый доллар и надпись Non-Commercial или NC, ограничьтесь оформлением обучающих материалов и портфолио. Или обратитесь к правообладателю за разрешением.

Большинство контента в интернете распространяется по лицензиям Creative Commons. Если необходимо поставить ссылку на автора, добавьте ее в нижний колонтитул или на страницу «О нас».

31 сайт с бесплатными иконками

Captain Icon

Марио из Испании предлагает вам бесплатно скачать 350 векторных иконок. Здесь нет определенной тематики, но много категорий: design, sports, social и др.

Иконки доступны в EPS, PSD, PNG, SVG, SKETCH форматах. По отдельности скачивать нельзя, все наборы – в одном архиве.

Dryicons

Dryicons – сервис, созданный командой энтузиастов: дизайнеров и программистов. Здесь представлено свыше 5 000 иконок в 77 сетах.

Условия бесплатного использования: простановка обратной ссылки.

Ego Icons

Ego Icons созданы на основе базовых геометрических фигур: треугольников, шестиугольников, ломаных линий. Они представлены на сайте в форматах SVG, PDF, AI, SKETCH, EPS и ICONJAR.

Бесплатно можно использовать только 100 иконок. Платный доступ ко всем 3 600 значкам стоит 127 долларов.

Endless Icons

Мин Ким основал Endless Icons, чтобы делиться креативом с дизайнерским сообществом. В его библиотеке – сотни бесплатных черно-белых иконок в PNG и SVG.

Вы можете использовать Endless Icons и в личных, и в коммерческих целях.

Entypo

На entypo.com – свыше 400 премиум-иконок от Дэниэля Брюса.

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

Find Icons

Find Icons – каталог бесплатных иконок для сайтов и презентаций. Иконки представлены в форматах PNG и ISO.

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

Flaticon

Flaticon – огромное хранилище иконок от создателей Freepik.

Сайт предлагает свыше 500 000 векторных иконок, объединенных в 9 700 наборов. Они доступны для скачивания в форматах PNG, SVG, EPS, PSD и BASE 64. Прежде чем загрузить иконку, вы можете поменять цвет и выбрать размер.

Бесплатное использование – только с указанием авторства. Подписка за 10 долларов в месяц позволит использовать 400 обычных и 88 премиум-значков без обратных ссылок.

Glyphicons

Ищете минималистичные и монохромные иконки – посмотрите на glyphicons.com, там их более 800. Благодаря веб-шрифту и формату SVG иконки можно использовать при разработке сайтов, инфографики, мобильных приложений под iOS и Android.

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

Good stuff no nonsense

Основатель проекта – Агата, дизайн-иллюстратор из Польши. Разработка иконок – ее хобби.

На goodstuffnononsence.com можно скачать 5 наборов бесплатных иконок. Кажется, что контента мало, но он – высочайшего качества. Автор оформляет иконки вручную, они выглядят прекрасно.

Если вам понравится стиль, можно нажать “See All” и перейти к выбору платных сетов.

Icojam

Icojam.com принадлежит команде дизайнеров, создающих иконки более 10 лет. Часть наборов продают, часть – раздают бесплатно.

Умного поиска нет, иконки опубликованы в блоге.

Последнее сообщение оставлено почти год назад, но, возможно, вас заинтересуют ранние записи. На Icojam опубликованы тысячи ярких и красочных иконок.

Icon Archive

На iconarchive.com представлено более полумиллиона бесплатных иконок и почти 2 500 наборов. Так как библиотека большая, пользуйтесь фильтрами – ищите нужные иконки по стилю, категории и размеру, типу лицензии.

Сохранить иконку на компьютер можно в форматах PNG, ICO и ICNS.

Iconfinder

Пользователям iconfinder.com открыт доступ к 1 926 000 бесплатных и премиум-иконок.

Здесь большой выбор размеров, форматов и тем.

Iconmonstr

В библиотеке немецкого дизайнера Alexander Kahlkopf собрано более 3 800 черно-белых иконок. Они хорошо оптимизированы для веба и доступны в форматах SVG, EPS, PSD и PNG.

Иконки предназначены для коммерческого использования. Указывать автора не обязательно.

Icons8

На icons8.com – почти 57 000 иконок, база пополняется ежедневно. Интерфейс дружественный: удобно искать иконки, ходить по категориям, выбирать размеры и форматы.

Бесплатный тариф предусматривает ограничения на размер файла (максимум – 100 пикселей), выбор формата (только PNG) и способ использования (ссылка – обязательна). Хотите без ограничений – покупайте подписку от 20 долларов в месяц.

Фишка icons8 – мобильное приложение. Оно включает всю базу иконок, позволяет их окрашивать в любой цвет и перетаскивать в один клик в Photoshop.

Iconshok

Iconshock – это два миллиона иконок, 800 наборов и 30 стилей.

Скачивайте иконки для личного пользования (например, для оформления резюме) и коммерческих целей (с указанием ссылки) абсолютно бесплатно. Другие лимиты free pack: размер до 72 пикселей, отсутствие исходных файлов, запрет редактирования. Чтобы снять все ограничения, нужно купить годовую подписку за 79 долларов.

Mr.Icons

Mr.Icons – агрегатор, ищущий качественные иконки в интернете. В библиотеке – более 100 000 иконок.

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

Noun Project

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

Бесплатные иконки требуют указания автора. Если не хотите ставить ссылку, покупайте поштучно или оформите подписку за 10 долларов в месяц.

Oxygenna

Oxygenna – небольшое дизайнерское агентство, которое специализируется на темах WordPress. Кроме платного контента, там есть раздел freebies с бесплатными наборами иконок.

Скачивайте с oxygenna.com уникальные наборы иконок в PNG, PSD и AI.

Round Icons

Команда Round Icons любит создавать креативные иконки: «жирные», изометрические, круглые и другие. Всего на сайте их – 30 500 штук, но доступ ко всей коллекции стоит денег. Если не готовы платить, получите на email бесплатные наборы.

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

Squid Ink

На «Чернилах Кальмара» – красивые векторные иконки. Бесплатно вы получаете доступ к 50 файлам для неограниченного использования в личных и коммерческих проектах.

Весь набор от Squid Ink, включающий 2 000 иконок, продается за 65 долларов.

Tilda

Команда «Тильды» предлагает владельцам лендингов в обмен на обратную ссылку свыше 400 иконок по 27 бизнес-темам («образование», «вебинар», «фотостудия» и др.). Иконки разрешено использовать в коммерческих проектах.

Если вы не нашли подходящий вариант, напишите пожелания в специальную форму. Она находится в нижней части страницы.

Ionicons

Ionicons – это около 400 красивых черно-белых дизайнерских иконок. Коллекция предназначена для использования в вебе, андроид- и iOS-приложениях, десктопных программах.

Можно скачивать отдельные иконки в формате SVG или все сразу – архивом.

Контент распространяется по MIT, лицензии открытого программного обеспечения. То есть иконки можно свободно использовать, в том числе для коммерческих целей.

Feathericons

На feathericons.com – набор из 250+ простых и черно-белых, но красивых опенсорс-иконок. Автор – Cole Bemis, дизайнер и фронтенд-разработчик.

Иконки отсортированы по алфавиту, также есть поиск по названию. Понравившийся контент можно скачать в 1 клик в формате SVG.

Все иконки можно использовать свободно, однако если хочется поблагодарить автора – в верхнем меню есть кнопка «Donate».

Ikonate

Ikonate – не просто набор из 200+ иконок, это целый конструктор иконок. Можно поменять размер, толщину линий, стиль и цвет – сделать дизайнерский контент, наиболее подходящий для вашего проекта.

Иконки экспортируются в SVG, а затем их можно использовать абсолютно свободно.

Icofont

На icofont.com собрано свыше 2 000 черно-белых иконок, распределенных по десяткам различных тем: медицина, еда, редактура, навигация, бренды и др. Можно скачивать контент по отдельности или сначала собрать в коллекцию.

Чтобы не скролить страницу в поиске нужной иконки, воспользуйтесь поиском.

Иконки с icofont не простые, а шрифтовые. Поэтому в архиве будут не SVG-файлы, а CSS и TTF. Подробная инструкция по установке на сайт и использованию в графических редакторах – в разделе «how to use».

Boxicons

Boxicons – это почти 800 векторных иконок: высококачественных и дружелюбных к вебу. Чтобы облегчить задачу дизайнерам и блогерам, на сайте есть сортировка по категориям. Всего их больше двадцати (code, social, editors, business, e-commerce и др.).

Иконки можно напрямую встраивать на сайт, использовать в качестве шрифта или скачивать в формате SVG. Контент подходит для коммерческих проектов, на это нет никаких запретов.

Ikons

Ikons – это 300 бесплатных масштабируемых векторных иконок от Piotr Adam Kwiatkowski, продуктового дизайнера. По отдельности они не скачиваются, только архивом.

Набор предназначен для дизайнеров и разработчиков.

Форматы иконок: VG, AI, ESP, PSD, CSH и PNG. Весь контент доступен для личного и коммерческого использования.

IconBros

IconBros – 950+ иконок, объединенных в десятки коллекций (SEO & marketing, business, emoticons и др.). Есть поиск, но нет возможности скачать все архивом или хотя бы одну коллекцию целиком.

Иконки можно скачать в двух форматах: SVG и PNG. Лицензия позволяет использовать продукт и в некоммерческих, и в коммерческих целях. Однако нельзя делать иконку частью логотипа, торговой или сервисной марки.

To icon

To icon – проект дизайнерского агентства из Амстердама. На сайте вы найдете 20 коллекций с 4 000+ иконками. Есть и черно-белые, и цветные.

Дизайнерский контент доступен для скачивания в формате SVG. Иконки бесплатные и их можно использовать как угодно, главное – поставить ссылку на toicon.com.

Iconstore

Iconstore – набор из 200+ иконок в 28 категориях: travel, sport, social media, communication и др. Контента не очень много, но он – от первоклассных дизайнеров.

Иконки доступны в SVG, разрешены и для личного, и для коммерческого использования. Атрибуция необязательна.

Jam Icons

Jam – набор из 900 иконок в 5 категориях: web, player, arrows, text, social. Скачать их можно только сразу в общем архиве.

В скачанном файле контент будет представлен в трех форматах: JavaScript, CSS / Font, SVG. На jam-icons.com есть подробная инструкция, как работать с каждым. Использовать иконки можно как угодно, лицензия – MIT.

12 ресурсов с бесплатными шрифтами

«Бесплатные шрифты» (VK)

Пользователям «Вконтакте» удобнее будет искать бесплатные шрифты не покидая соцсеть. Подобрать нужный шрифт в сообществе vk.com/shrift можно по хештегам. К каждому посту прикреплен файл в формате OTF / TTF или архив с несколькими файлами.

Если вы хотите поделиться бесплатными шрифтами, предложите новость в группу. Лента сообщества обновляется регулярно.

1001 Fonts

Библиотека 1001 Fonts насчитывает свыше 15 000 шрифтов. Ищите нужные шрифты по размеру, типу лицензии и теме.

1001fonts.com позволяет настроить каждый шрифт, как вам хочется: меняйте цвет, размер и текст в пару кликов.

Abstract Fonts

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

В коллекции Abstract Fonts – около 13 000 бесплатных шрифтов, доступных для скачивания. Среди них 150 – кириллических.

Dafont

Ищете большую коллекцию бесплатных легальных шрифтов? На сайте dafont.com их более 30 000.

На главной странице проекта – простая и понятная инструкция по установке шрифтов.

Font Fabric

Большинство шрифтов на сайте, кроме “Baron” и “Muller Narrow”, можно использовать бесплатно для личных и коммерческих проектов.

Всего на fontfabric.com представлено 125 шрифтов, 59 из которых поддерживают кириллицу.

Font Squirrel

Font Squirrel – агрегатор шрифтов, разрешенных для коммерческого использования. Если видите значок в виде земного шара, значит, шрифт можно встроить на сайт через CSS.

Еще на fontsquirrel.com есть полезный инструмент Matcherator. Загрузите туда любую картинку с текстом и узнайте названия шрифтов.

Font Storage

В коллекции Font Storage – 650 шрифтов. Шрифты распределены по следующим категориям: без засечек, с засечками, моноширинные, декоративные. Также каждому шрифту присвоены теги (retro, gothic и пр.).

У сайта есть русская версия, что удобно.

FontSpace

На fontspace.com размещено более 30 000 бесплатных шрифтов. Есть поиск по тегам и удобный предпросмотр. Если вам нужно показать результаты поиска другому человеку, сгенерируйте постоянную ссылку.

Чтобы узнать тип лицензии, достаточно навести курсор.

Google Fonts

Библиотека шрифтов от Alphabet Inc. Этот популярный сервис поможет подобрать и скачать шрифты на все случаи жизни.

Google Fonts сразу покажет, если шрифт поддерживает кириллицу.

Befonts

Befonts – каталог бесплатных авторских шрифтов. Всего их представлено больше 5 000, кириллических – около 100. Постоянно появляются новые.

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

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

SmartFonts

SmartFonts – не обычный каталог, а целый поисковик. В каталоге – свыше 56 000 различных шрифтов, из них 1380 – с поддержкой русского языка и разрешенные для коммерческого использования.

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

На ресурсе есть шрифты с разными типами лицензий. Просто отсортируйте по «commercial free» и не переживайте.

Pinspiry

На pinspiry.com – в разделе «Free Fonts» – представлено почти 900 бесплатных шрифтов, предназначенных для личного и / или коммерческого использования. Кириллических – около 80.

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

6 ресурсов с бесплатными PSD-шаблонами

DesignLazy

DesignLazy – один из проектов Ishmam, мультидисциплинарного дизайнера. На сайте он вместе со своими друзьями публикует шаблоны сайтов, мокапы и UI-киты.

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

PsdBox (VK)

Psdbox – авторский проект дизайнера Сергея Данильченко. Он ничего не копирует, сам создает PSD-шаблоны для социальных сетей и размещает в открытом доступе. Ссылки на «Яндекс.Диск» и описания – на стене сообщества.

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

Mockup Download

На сайте mockupdownload.ru – сотни PSD-шаблонов в десятках категорий («Баннеры», «Визитные карточки», «Компьютеры», «Одежда» и др.). Их можно скачать бесплатно, без регистрации и эсэмэс.

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

PSD HTML CSS

На сайте psd-html-css.ru – уроки по верстке и HTML и бесплатные PSD-файлы. На страницах проекта уже опубликовано 200 мокапов, шаблонов сайтов и элементов пользовательского интерфейса.

Здесь сложно найти что-то редкое: команда psd-html-css.ru берет работы CSS Author, Pixeden и других крупных дизайнерских сообществ.

FreePSDFiles

Free PSD Files – это сотни бесплатных файлов: фонов, веб-элементов, макетов сайтов.

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

365psd

На 365psd.com – свыше 5 000 бесплатных PSD-шаблонов: UI-киты, фоны, карты и др. Контент распределен по 30 категориям (abstract, education, technology и др.).

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

20 сайтов с самой разнообразной графикой

1001 Free Downloads

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

Есть лимит: с 1001freedownloads.com нельзя скачать больше 50 файлов в день.

Behance

Behance – сетевая платформа, на которой люди творческих профессий делятся своими работами. По запросу «free» на сайте дочерней компании Adobe можно найти тысячи бесплатных иконок, шрифтов, шаблонов и прочей графики.

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

Best PSD Freebies

Графический дизайнер Michael Reimer решил помочь коллегам и основал bestpsdfreebies.com. На сайте можно скачать лучший дизайнерский контент – темы, кнопки, стили, иконки – абсолютно бесплатно.

Разрешено коммерческое использование, ссылки ставить не обязательно.

Free Design Resources

Проект Free Design Resources создан благодаря художникам и дизайнерам по всему миру. Здесь собирают и распространяют лучший дизайнерский контент: шаблоны, мокапы, шрифты и прочее.

Команда Free Design Resources призывает помогать друг другу, так как это свойственно человеческой природе.

Creative Tail

Creativetail.com – сайт дизайнерского сообщества. Изображений мало, но они интересные и необычные.

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

CSS Author

На CSS Author – подборки с бесплатным контентом от Smashing Magazine, Graphics Fuel и других ресурсов.

Новые подборки с иконками, UI-китами и PSD-макетами для верстки появляются регулярно.

Designbeep

Designbeep публикует наборы иконок, шрифты и мокапы, найденные на других площадках (Freepik, Behance и др.). Поиска нет, всюду подстерегают рекламные баннеры.

Всего на designbeep.com свыше 1 000 различных freebies-подборок.

Dreamstale

На dreamstale.com есть полезные статьи по веб-дизайну, уроки по Photoshop и контент премиум-качества. В разделе “Freebies” вы найдете бесплатные текстуры, фоны, иконки и шрифты.

Раздел обновляется редко, а жаль.

Freebiesbug

Freebiesbug – проект графического дизайнера Pasquale Vitiello. На его сайте вы найдете 300 наборов иконок, 400 бесплатных шрифтов и 750 PSD-шаблонов.

Подпишитесь на рассылку Freebiesbug, чтобы получать информацию о новинках на email.

Freepik

Freepik – огромная библиотека с бесплатным дизайнерским контентом. Условие использования – указание авторства. Файлы доступны в форматах PNG, EPS, SVG.

С русской версией проще искать иконки, но перевод ужасный, как у Aliexpress.

Fribly

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

Fribly – агрегатор. Чтобы скачать конкретный набор, придется переходить на другие ресурсы.

Graphic Burger

На graphicburger.com вас ждут эксклюзивные высококачественные файлы в форматах PSD (мокапы, наборы иконок и элементов пользовательского интерфейса) и JPG (текстуры, фоны).

Архивы небольшие, например, иконок на сайте чуть больше 100 наборов. Весь контент разрешено использовать в личных и коммерческих целях.

Graphicsfuel

Рафи – художник, блогер, графический дизайнер – с 2010 года делится полезным контентом для дизайнеров. Всего на graphicsfuel.com более 25 миллионов графических элементов.

На портале вы найдете текстуры, фоны, иконки и многое другое.

Pixeden

Команда сообщества Pixeden предлагает большой выбор графики: иконки, темы WordPress, текстуры и так далее. Используйте бесплатный контент или купите подписку за 6 долларов в месяц, чтобы получить доступ к премиум-наборам.

Pixeden не обязывает ставить ссылку (при этом, конечно, запрещено, например, перепродавать контент).

Smashing Magazine

Издание Smashing Magazine в своем блоге предлагает качественные коллекции иконок, шрифтов и шаблонов по самым разным тематикам.

Новые посты выходят редко, но в архиве их сотни.

Vecteezy

Сайт Vecteezy призывает посетителей получать вдохновение, помогать другим и участвовать в обсуждениях. В базе vecteezy.com – 37 000 бесплатных векторных изображений.

Иконки, фоны и текстуры обозначены тегами, что облегчает навигацию по сайту.

Infogra

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

Новые материалы на infogra.ru выходят регулярно. Чтобы не пропустить ничего, подпишитесь на RSS-ленту.

PixelBuddha

Команда PixelBuddha увлечена разработкой профессиональных и качественных продуктов для дизайнерского сообщества. На сайте можно купить премиум-контент или скачать бесплатные иконки, UI-киты, фотографии, шрифты.

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

PNGTree

PNGTree – это 3 миллиона растровых и векторных изображений, 685 000 фонов, 96 000 иконок.

На бесплатном тарифе можно загрузить максимум 3 картинки в день. Подписка на месяц, снимающая ограничения и открывающая доступ к премиум-контенту, стоит 9 долларов.

Dbfreebies

Dbfreebies.co – подборка лучшего дизайнерского контента (мокапов, фонов, шаблонов, UI-китов и др.) с двух крупных ресурсов: Behance и Dribbble. Всего в каталоге 1 250 позиций.

Поиска нет, можно только отсортировать контент по свежести и популярности. Еще, к сожалению, многие превью плохо грузятся, приходится искать почти вслепую.

Сведения о лицензии можно узнать только после перехода на ресурс, на котором сам контент представлен непосредственно.

7 сервисов для создания лого и фавиконов

Logaster

Logaster – сервис для создания логотипов и элементов фирменного стиля в форматах JPEG, PNG, PDF и SVG. Создатели гарантируют, что качества изображения хватит даже для широкоформатной печати.

Недостаток: бесплатно можно скачать только маленькое лого. Полный дизайн-пакет стоит 30 долларов. Кроме фавикона и логотипа (в SVG, PDF, PNG, JPEG и ICO), в него входят макеты визитки, конверта и бланка (в PDF, PNG и DOCX).

Logo Editor Tool Ucraft

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

Пользоваться сервисом можно бесплатно и без ограничений. После регистрации готовый логотип открыт для скачивания в формате PNG с разрешением до 1028 пикселей.

Logomakr

Logomakr – простой сервис, напоминает Paint. Добавляйте текст и геометрические фигуры, красьте элементы заливкой и создавайте простые логотипы за полчаса.

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

Online Logomaker

Бесплатный сервис, который использовали уже 2 миллиона человек. Online Logomaker – это тысячи шаблонов, десятки шрифтов, простой и понятный интерфейс.

Есть руководство на русском.

Shopify

Используйте сервис для разработки простых минималистичных логотипов. На shopify.com вы найдете красивые иконки и не встретите ограничений на размер изображения.

Готовый логотип приходит на email.

Canva

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

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

Доступные форматы для скачивания готового логотипа: PDF, JPG, PNG. Стандартный размер изображения: 500 x 500 пикселей. Если нужно сохранить картинку в другом размере или использовать корпоративные шрифты, придется покупать подписку от 10 долларов в месяц.

Designimo

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

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

Бесплатно можно лишь скачать изображение в формате PNG и маленького размера – 150 пикселей в ширину. Чтобы сохранять лого также в JPG и EPS и в высоком разрешении, нужно платить. Около 30 долларов за каждый дизайн.

Надеемся, что статья будет вам полезна. Хотите поблагодарить – сделайте репост в социальных сетях. Если в подборке есть пиратские ресурсы, нарушающие законодательство, сообщите в комментариях.

Шрифты для Photoshop

Много людей обращаются к нам с вопросами касательно работы шрифтов в программе Photoshop. Мы собрали эти вопросы вместе и изложили ответы в отдельной статье.

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

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

Некорректно отображаются русские шрифты в Photoshop. Программа Photoshop русские шрифты отображает абсолютно корректно. Если Вы подключили шрифт, а вместо русских символов отображается пустое место, квадратики или символы другого шрифта, проблема может быть именно с файлом шрифта, а не с программой. Иногда восстановить неработающий щрифт помогает программа FontCreator, в ней нужно открыть поломанный шрифт и сохранить его в новый файл.

Как установить шрифт в Photoshop. Для Photoshop шрифты устанавливаются точно так же, как и для других программ. Инструкцию Вы можете посмотреть в статье Как устанавливать шрифты.

Шаблон сайта Starnight (HTML5 + .PSD)

Быстрая и бесплатная загрузка:

Если вы находите проект полезным и хотите помочь в развитии:

. или можно клацнуть по рекламе:

Инструкция по посещению сайта:

Шаблон сайта Starnight (HTML5 + .PSD) я нашел, отлично! Надо бы ещё тут осмотреться.
. спустя пару минут:
Ого, как много всего нужного-то! Ещё и по тегам удобно разбито. Кайфовый сайт, + за обновлениями можно в Вк следить. Так, а теперь пора за работу.

20+ креативных эффектов текста в фотошопе, скачать PSD исходник + Шрифты

↓ Также Вам будет интересно ↓

Мы продолжаем серию коллекцию с материалами для веб-дизайнера. И сегодня это эффекты текста в фотошопе. Использование красивого текста является важным фактором в процессе создания хорошей графики и привлекательного оформления.
Созданные эффекты представляют из себя исходные файлы формата psd, с редактируемыми слоями. В некоторых случаях это даже редактируемый текст, так что не делая особых изменений, вы можете применить представленные эффект к своему тексту. Ниже представлен список эффектов, которые находятся в вашем распоряжении.

1 → Золотой + Стеклянный эффект

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

2 → Размытый текст

Ещё один эффект размытых слов в объёме. Макет представляет из себя mock-up файлы, что позволяет сделать любой текст таким в автоматическом режиме.

3 → Металлический текст + шрифт к нему

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

4 → Ещё исходник стиля букв в приятных тонах

Тоже неплохой стиль, с небольшим 3D

5 → В стиле Glamour

Простой, но привлекательный текст в красном стиле, без применения дополнительных слоёв, только параметры наложения.

6 → Вдавленные буквы с 3D эффектом: PSD + шрифт

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

7 → Вдавленный текст

Самый простой пример применения такого эффекта. Всё манипуляции в параметрах наложения. Исходник ниже.

8 → В стиле Retro school

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

9 → Превосходный 3D текст “Grand”

Очень профессиональная работа. Реалистичные эффекты в автоматическом режиме, исходник mock-up типа. К архиву прилагается 2 используемых шрифта, и сами эффекты в двух вариантах.

10 → Рукописный текст

Хорошее сочетание рукописного шрифта и стиля текста. Сам файл шрифта прилагается.

11 → Эффект “Authentic”

На любителя. Mock-up PSD исходник.

12 → Элегантный белый в стиле “Soft”

Привлекательный эффект, простой, но в то же время интересный результат получается.

13 → Расписной зеркальный текст

Элегантный шрифт (прилагается), красивый зеркальный текст.

14 → Золотые буквы с зеркальным отражением

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

15 → Отражающийся глянец

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

16 → Морозный эффект в ледниковом стиле

Довольно интересный ледяной текст, очень подходящий шрифт + параметры в фотошопе позволили добиться такого морозного стиля.

17 → Буквы в стиле мыльных пузырей

Мыльные пузыри на фоне, а также полупрозрачные “мыльные” буквы. Реалистичный внешний вид, а также специфический шрифт.

18 → Мокрые буквы в зелёной цветовой схеме

Очень интересный стиль, как бы написанных на мокром стекле букв. В зелёных цветах.

19 → Штамп

Текст в стиле штампа, с сочетающейся обводкой.

20 → Эффект неонового свечения текста

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

21 → Сетчатый металл

Ещё один креативный эффект сетчатого металлического текста.

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 шаблона была ужасная и нелогичная и как я удивился когда сервис все равно умудрился сделать из этого хоть что-то человеческое.

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

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

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

40+Premium & Free PSD 3D Amazing Text Style Effects 2020 for the best design!

Do you love Text Effects? We are very glad to draw your attention to our new fresh article of 40+Premium & Free PSD 3D Amazing Text Style Effects for the best design!

There are lots of opportunities for designers and developers to get professional design absolutely Free and save a lot of time for creating the necessary design and implementing lots of interesting ideas into life.

You are free to choose from very professional and modern PSD text style effects that can bring originality and style to your design. All of them are fully layered PSD files that can be easily customize in Photoshop. Smart object replacement will allow you to make the best results.

To create a professional design for an advertising campaign, a website or mobile app, branding identity or print products, it is important to follow clear instructions, trends and have a plan. The secret of the success of this method is that there is a clear algorithm of actions, the adherence to which will lead to a good result.

Choose any Premium or Free Version of these interesting and very professional Isolated 3d paper objects – Scene Generator! You can make a really cool scene in Photoshop. Use graphics for private and commercial projects. Select any color for the image. All objects are divided into .PSD with layers and can be customized!

If you have already worked as a designer for many years or just at the beginning of your creative career, it is important to have some ready-made professional PSD text style effects in your designer’s collections. It can be much easy for you to see the final outcome of your work when you have plenty to choose from. Also, they can bring you inspiration at the most crucial and necessary moment.

Choose any of these beautiful and professional free PSD text effects and develop your imagination together with Free PSD Templates. Let your projects be successful and come back for new materials and fresh inspiration. Using Photoshop Get Photoshop as part of a Creative Cloud single-app plan for just US$19.99/mo anyone can change all the elements and replace the details on these PSD free text styles.

If you want to have more Print templates in PSD absolutely free, you can come back and visit us again! And follow us on Facebook https://www.facebook.com/freepsdtemplates/ to be friends with Free-PSD-Templates!

The article was updated in January 2020.

Ice Cubes Text Style freebie PSD

Realistic Text Effects Bundle II

With high quality and premium effects can produce the effect of a more perfect and interesting to all your texts and all style effects work only with one click.

Features

  • Easy to use
  • Work with any font
  • 100 Scalable
  • Flares included
  • One click
  • 300DPI

Freebie: Typography PSD Text Effect

Retro Text Effect

This is a pack of 10 different retro text effcets for Adobe Photoshop. You can apply these styles to your text/artwork with just one click. So enhance your artwork with these styles and give it a vintage look. These styles are suitable for book vintage logo style, flyer, banner,poster, retro style, Book cover, game text your next project. Styles you can re-size them without losing quality.

1.10 PSD files (one working file and preview of style)

2.Help file (one PDF file with documentation on using this style and one html file with font links)

Vintage text effects Free Psd

3D Chrome Metal Text FX 04 of 05

GET THE FIRST 10 TEXT FX! – This style pack is the fourth part of 5. When you purchase this pack, you obtain the fourth 10 Text Effects.

50 3D Chrome Metal Text FX. Get the five packs and complete the collection!

Strips 3D Shadow Text Effect

3D Text Effects Bundle Two

Change the text into 3D. Created with high-quality professional and very detailed. There is no requirement of skills to transform your design into 3D, everything works just with smart object. In this set includes source .PSD, .ASL & Help! file.

  • Easy to use
  • Fully editable
  • 100% Scalable
  • 50 Different styles
  • High resolution 300 DPI
  • Well organized layers
  • Smart object replacement
  • Work with any font & shapes
  • No skill requirement

Seventies Style FREE Text Effect

Back to the 80s Retro Text Effects

  • 10 PSD files
  • 2535px1950px
  • 300dpi, RGB
  • Fully editable
  • Easy to use
  • Well organized layers
  • Free fonts
  • Help file

Retro 3D Text Effect

Modern Text Styles V19

  • ASL File (20 Styles). All styles are easy to edit.
  • RTF Help File
  • PSD File
  • Light effects in the PSD.

FREE Jelly PSD Text Effect

3D Golden & Silver Layer Styles

– 6 Fully layered PSDs
– Smart object replacement
– Super easy to edit text and elements
– 2000×1400 px
– Well organized layers
– Works on text, shape and any layers
– Perfect for jewelery store, covers, etc
– Easily modify text colors and patterns

Retro text effects Free Psd

Professional 10 Text Effects Bundle

  • 10 Fully layered PSDs
  • Highly Organized Layers (Labeled & grouped)
  • Easy to EDIT
  • 300 DPI High Resolution
  • Smart object replacement
  • 2000×1500 px
  • Well organized layers
  • Works on text, shape and any layers
  • PDF help file with instructions included

FREE Glass Text Style

Here is a fresh and original Glass Text Style you can use to add some excitement to any plain text or vector shape. Just open the smart object, type in the text or paste the shape, apply the changes and you’re done. Download this new PSD resource, the Glass Text Style and use it in all your projects, both personal and commercial.

Three Modes of 3D Effect of text & Shapes

  • Three Modes of 3D Effect of text & Shapes
  • 11x – PSD files for Photoshop CC in Smart Objects – 3000×2400 pixels
  • 11x – PSD files for Photoshop CC in Smart Objects – 1800×1200 pixels
  • Works great in 300Dpi!
  • The 3D Text is made in SMART OBJECT – very easy to change the tekst, font and size
  • Help file with all instructions and fonts!
  • 4different Styles: freestyle color – gold– metal – light
  • Very organized layers with groups easy to move and close

Retro Nights Text Effect

Isometric Colorful 3D Text Effect – 3 Angles

Battle Photoshop Fonts Style

Battle Photoshop Font Style What’s in the Package? 10 Different Text Effect Styles Mockups work great in 300 Dpi Work With any font and Shapes PSD Document size is 590×2600 pixels Psd Files with shiny effect mockups you can modify each styles Free fonts used Files Include 1.Psd file 2.Asl file 3.Help file FONTS USED Voice In My Head , AG Foreigner, Bang 4 Ya Buck, Super Comman,NFL RedZone, CollegiateFLF, Longhaul, XXII DIRTY-ARMY, BadaBoom BB, Minimum Adobe CS 6 Version

Free Majestic Text Effect

With this Photoshop text effect you will be able to give any text or shape a majestic text effect appearance and make them stand out on any kind of background. The PSD file contains smart layers to make it easy to use and modify.

10 3D Text Styles

Fantasy shine text effects for photoshop, just one click applicable photoshop text effects.

10 photoshop styles just one click applicable

-Photoshop PSD -Photoshop ASL -Readme.txt

FREE Sparky Text Effect PSD

This PSD file will help you convert your normal text into a sparkling and beautiful effect. This will be highly useful for posters, flyers, headings, headers, and wallpapers. Using the smart-object layer, you can easily replace your text or typographic design and save to achieve the Sparky effect.

10 3D Text Styles

Fantasy shine text effects for photoshop, just one click applicable photoshop text effects.

10 photoshop styles just one click applicable

-Photoshop PSD -Photoshop ASL -Readme.txt

Free Retro Style Text Effect

Use this fun retro style text effect to transform a plain type into a beautiful, distinctive one that will match your vintage design projects. Get the desired result just by typing your text inside the smart object.

File Format: .PSD
Editable Vector: Yes
Smart Object: Smart-Object
File Size: 7.57 MB

30 Text Styles

Fantasy shine text effects for photoshop, just one click applicable photoshop text effects.

10 photoshop styles just one click applicable

Photoshop PSD Photoshop ASL Readme.txt

FREE PSD Fire Text Effect

10 3d Text Styles

Fantasy shine text effects for photoshop, just one click applicable photoshop text effects.

10 photoshop styles just one click applicable

Photoshop PSD Photoshop ASL Readme.txt

Glitter Text Style Freebie PSD

Bring a little light and joy to your projects with this new freebie! This Glitter Text Style will make your designs stand out and sparkle like no other. And more than that, it’s very easy to use. You can just copy and paste the layer style on any shape or text you want to customize, or you could open the smart object with the text, place your content there, save it and you’re good to go!

20 3D Text Styles

Fantasy shine text effects for photoshop, just one click applicable photoshop text effects.

10 photoshop styles just one click applicable

Photoshop PSD Photoshop ASL Readme.txt

Free Western Style Text Effect PSD

30 Electric Text Effects

– 8 Fully layered PSDs
– Smart object replacement
– Super easy to edit text and elements
– 2500×1750 px
– Well organized layers
– Works on text, shape and any layers
– Perfect for movies, games, covers, etc
– Easily modify text colors and patterns

Cinematic Trailer FREE PSD Text Effect

Now turn your text titles, logos, symbols into realistic cinematic titles with a couple of clicks and be creative. The PSD file uses smart-object layer that allows you to add your text or icon and save to see the result.

12 Silver Metal

This Text Effect is a Professional Photoshop Layer Styles, in this set, includes sources files Psd, ASL, and Help file, There Text Effect is no requirement off skills to edit and trasform your design into anything, this photoshop layer styles is 100% scalable and Just One click for to apply.

  • Easy to Use and edit
  • Full Layered Organized
  • 12 Different Text Effect Styles
  • Work With any font and Shapes
  • No skill requirement
  • One click for apply all Styles

Free Paper Cut PSD Text Effect

This freebie consists of a paper cut style text effect, which can add a cool effect to your text. You get a PSD file upon downloading this freebie, in which you can make changes according to your needs.

Gold Text Effects

  • 8 Fully layered PSDs
  • 300 dpi
  • Background included
  • Smart object replacement
  • Super easy to edit text and elements
  • 2600×1900 px
  • Well organized layers
  • Help file with all instructions and fonts
  • Works on text, shape and any layers
  • Perfect for movies, games, posters, etc
  • Easily modify text colors and patterns

10 3D Text Styles

Fantasy shine text effects for photoshop, just one click applicable photoshop text effects.

10 photoshop styles just one click applicable

Photoshop PSD Photoshop ASL Readme.txt

New 3D Ice Font

Create beautiful designs with this easy to use font. Perfect for invites, cards and posters. 26 Capital Letters Transparent PNG 26 Small Letters Transparent PNG 10 numbers Transparent PNG 18 basic symbols Transparent PNG

20 3D Styles

Fantasy shine text effects for photoshop, just one click applicable photoshop text effects.

20 photoshop styles just one click applicable

Photoshop PSD Photoshop ASL Readme.txt

Designer Essentials Ultra Text Effect

This is a very realistic Double Layered Fire Effect, created from 2 base Smart Objects and holding 115 separate layers to create a very realistic 3D effect. There are 2 Normal Shadow layers added to enhance the 3D effect. Last but not least there are 32 extra layers with a Flat Shadow effect added. So there are in total more then 115 layers to create this effect!

Thank you very much for your attention. Have a nice day!

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