Как сделать сайт — режем шаблон в Photoshop

Как сделать сайт — режем шаблон в Photoshop

Как сделать сайт - режем шаблон в Photoshop

Как сделать сайт - режем шаблон в Photoshop

Итак, вы умеете рисовать в программе Adobe Photoshop и нарисовали себе шаблон сайта, но не знаете, что же делать дальше, как сделать сайт из шаблона?
Современные технологии создания сайта требуют минимального веса страницы и поэтому часть изображений вставляется в шаблон сайта отдельно, часть рисунка вырезается и вставляется как элемент фона.
Данная статья посвящена тому, как вырезать части изображения инструментом Slice Tool (K).

Попытка не пытка?
Сохраняем копию вашего файла с шаблоном и начинаем его разрезать.



Последовательность действий

1. Открыв рисунок в программе Adobe Photoshop, выбираем инструмент Slice Tool (K) или просто нажимаем на английскую букву K.
Обратите внимание, что вы должны представить свой рисунок в виде таблицы, с вставленными в ее ячейки рисунками.

Разрезаем фрагмент шаблона в Photoshop

Разрезаем фрагмент шаблона в Photoshop


(рисунок 1)

2. Выделяем инструментом Slice Tool (K) части рисунка.
Обратите внимание, что первый фрагмент у меня выделен одним блоком – это логотип (1), я еще не сохраняю страничку, а буду выделять и дальше.
Там где будет заливка выделяйте кусочек рисунка шириной 1 пиксель (2) и он став фоном ячейки таблицы или блока div даст нам тот же вид, что и большой фрагмент.

Обратите внимание на пункт (3) – это уголок горизонтального меню, его мы разрежем отдельно, остальные пункты меню (4) мы можем сделать рисунками, а можем сделать текстовыми, а рисунок шириной 1 пиксель, будет фоном.
Так же наши ячейки должны быть на одном уровне, чтобы потом было легче все редактировать самим.
Обращаю так же внимание на пункт (5) – это ваша будущая ячейка которая будет растягиваться, ведь фрагмент где находится баннер (баннер) будет иметь постоянную ширину и высоту, а фрагмент текст может из-за большого количества текста растягивать ячейку вниз, значит будут тянуться и другие ячейки и будут образовываться белые полоски. Чтобы этого не было сразу предусматривайте ячейки по горизонтали высота которых будет определяться содержимым ячейки с текстом.

Новичкам лучше разрезать большими блоками

Новичкам лучше разрезать большими блоками


(рисунок 2)

3. Когда вы разрежете весь свой шаблон, то можно приступить к сохранению.
Переходим «File» — «Save for Web & Devices» или нажимаем Alt+Sift+Ctrl+S

Переходим «File» - «Save for Web & Devices»

Переходим «File» - «Save for Web & Devices»


(рисунок 3)

4. Проверяем настройки, смотрим, чтобы качество было 100% и сохраняем,

5. Теперь проверяем, что у нас в папке сохраненным шаблоном.
В папке с вашим будущим сайтом будет папка images – в которой находятся те самые кусочки рисунков.

В папке с вашим будущим сайтом будет папка images

В папке с вашим будущим сайтом будет папка images


(рисунок 4)

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

Спасибо за внимание.
Автор: Титов Сергей.



Понравилась статья?
Закажи бесплатную подписку!

Сообщения по теме:

  • Как сделать сайт с помощью FrontPage — видео урок
  • Компьютер для чайников – отчет за июль
  • Как сделать сайт в ворде (Word)

  • Метки: , , , ,

    Комментарии (7)

    1. Аноним 11.08.2009 #

      Разрезаю шаблон в фотошопе, получается сильно много картинок, можно уменьшить количество?

    2. admin 11.08.2009 #

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

    3. Как сделать сайт с помощью FrontPage « компьютер для чайников : 11.08.2009 #

      […] По плану у нас сегодня главный вопрос – как создать сайт с помощью Frontpage и шаблона. […]

    4. Николай 19.10.2009 #

      Привет.Я мало что понял,объясните по ICQ плз.Основый HTML знаю,мало,ну всетаки,хочу разрезать шаб в фотошопе и поставить на Dle.Админ,напиши плз

    5. admin 19.10.2009 #

      Николай: я шаблоны движков целиком не рисую… беру например логотипчик, открываю в фотошопе и его меняю…
      Что касается вашего случая, то нужно понять как вообще выглядит структура страницы на DLE, там ведь некоторые страницы отличаются…
      Я бы вам советовал скачать шаблон DLE вместе с PSD, посмотрите как сделано там, может даже свой рисунок подложите, а он при сохранении будет уже порезанным…(можно сделать полупрозранчым, чтобы легче было подогнать…)

      Что касается аськи, то я не думаю, что смогу Вам действительно помочь…

    6. alexeyey 14.02.2012 #

      А как разрезать вот такой макет?

    7. admin 14.02.2012 #

      alexeyey, урок довольно древний, поэтому лучше не резать вообще, а верстать на блоках div с помощью CSS.
      Почитайте по поводу CSS верстки, она Вам больше должна понравиться, но понять ее сложнее.

    Оставить комментарий

    

    0.47MB/0.00043 sec