Создаём красивый дизайн сайта с темным фоном и тонах

разработка дизайна сайта

От автора: из этого учебника мы узнаем, как разработать качественный дизайн веб-сайта в темных тонах в Adobe Photoshop. По мере прохождения учебного пособия по разработке сайта с темным фоном мы поработаем с простыми формами (прямоугольники, линии, стрелки и т.д.), эффектами слоя, шаблонами, импортированием и стилями параграфа, а также множеством других дизайнерских техник Photoshop’а, которые можно приспособить к дизайну интерфейсов своих вебсайтов.

Программа: Adobe Photoshop

Версия: CS4 (или выше)

Сложность: средняя

Примерное время выполнения: 2 часа

Скачать исходники

Конечный продукт (что Вы получите)

разработка дизайна сайта

Об авторе

Джулиан Шанилло (Julian Chaniolleau), также известный как Devilcantburn, графический и веб-дизайнер на фрилансе. Он также является автором статей на ThemeForest, его «перу» принадлежат такие шаблоны, как 96Display или Stereoline, его работы можно посмотреть на devilcantburn.com.

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

Давайте примемся за работу!

Шаг 1. Определяем документ

Начните с создания в Photoshop’е нового документа размером 1200px x 1600px. Удостоверьтесь, что разрешение установлено на 72 pxs/дюйм, а фон определен белым. Нам нужно раскрыть фоновый слой так, чтобы можно было добавить эффекты слоя, щелкните по фону правой кнопкой мыши и выберите "Layer from Background" (Слой из фона). Потом вы можете снова переименовать layer в background..

Заполните фон цветом #101010.

Теперь создайте следующие направляющие (Menu (Меню) > View (Вид) > New guide (Новая направляющая)…) :

120px по вертикали

600px по вертикали

1080px по вертикали

У вас теперь есть границы и середина области интерфейса.

Шаг 2. Организуйте группы…

Для рабочего процесса очень важна организация – так что следующим шагом мы начнем создавать группы слоев (Layer Groups). Организованное начало важно по одной основной причине: большинство огромных проектов вебсайтов при завершении работы имеют сотни слоев, так что если не начать с умной организации, то легко потеряться, если вы не потратите некоторое время на группирование элементов в папки ("folders") и тщательное наименование всего и вся.

В панели слоев (Layers panel) щелкните на иконку для создания новой папки, дважды щелкните на название папки для его редактирования. Сделайте то же самое для всех папок.

разработка дизайна сайта

Нам нужны следующие основные папки для слоев:

Header (заголовок)

Slider (слайдер)

Main (основная часть)

Footer (нижний колонтитул)

разработка дизайна сайта

Шаг 3. Создайте заголовок

Выберите папку "header" в панели слоев. Затем выберите прямоугольник (rectangle tool) из области векторных форм (Vector Shapes) инструментального ящика:

разработка дизайна сайта

Начертите прямоугольник. Назовите его вроде "Top bar bg". Нажмите Ctrl+T или Cmd+T (для Mac) и установите его свойства на 1200px ширины на 10px высоты:

разработка дизайна сайта

Теперь добавим несколько тонких стилей; дважды щелкните на цветное контрольное изображение в панели слоев для установления цвета на #252525. Дважды щелкните на слой, чтобы установить эффекты слоя как здесь:

разработка дизайна сайта

Эта тонкая внутренняя тень ("inner shadow") добавит к низу прямоугольника эффект кромки – нам важно отделить его от остальной схемы заголовка.

Шаг 4. Создайте меню

Создайте в группе HEADER новую папку под именем "Top Menu".

Начертите новый прямоугольник. Назовите его типа "Top Menu bg". Нажмите Ctrl+T или Apple+T для установления свойств как в "Top bar bg", но с высотой 90px и 10px в осевой линии Y. Так, этот прямоугольник будет находиться в панели слоев прямо под слоем "Top nar bg".

разработка дизайна сайта

Создайте нужный вам текст пунктов меню. Я использую для создания меню шрифт "Droid Serif", но вы можете то, что хотите. Расположите его в 20px от правой направляющей линии.

разработка дизайна сайта

Я вставляю по 4 пробела ("spaces") (4 раза нажмите на клавишу пробела) между каждым пунктом и выбираю размер шрифта 18px.

Шаг 5. Разместите логотип

Создайте в группе HEADER над всеми группами новую папку с названием "Top Logo". Выберите ее и перейдите к Menu (Меню) > Files (Файлы) > Import (Импорт). Я включил в папку исходных данных образец логотипа под названием "logo_zombie.psd". Выберите его и расположите в 130px слева и 5px сверху.

Можете добавить к логотипу какие угодно новые эффекты стиля.

Шаг 6. Создайте слайдер

Выберите группу SLIDER, создайте прямоугольник как в Шаге 3, и установите свойства на 400px высоты и 100px в осевой линии Y.

Назовите его примерно "Gradient" и дважды щелкните на цветное контрольное изображение в панели слоев для определения цвета #77b400. Дважды щелкните на слой для установления эффектов слоя как здесь:

разработка дизайна сайта

Градиент от черного (#00000) с непрозрачностью 100% до черного с непрозрачностью 0

разработка дизайна сайта

Теперь у вас должен получиться эскиз вроде этого:

разработка дизайна сайта

Стратегия добавления теневого градиента ("shadow gradient") вместо использования фиксированных цветов очень важна, потому что позволит нам позднее легко менять цвета путем регулировки основного цвета прямоугольника.

Далее создайте новую папку с названием "slider_block". Создайте прямоугольник (как обычно, при помощи векторного инструмента Закругленный прямоугольник (U)), в этой группе под именем "Transparency".

разработка дизайна сайта

Расположите его согласно этим значениям: дважды щелкните на слой в панели слоев, чтобы открыть опции эффектов слоя, и установите его как тут:

разработка дизайна сайта

Скопируйте слой "Transparency", удалите опции эффектов слоя и назовите его "picture area". Установите непрозрачность фона на 100% и уменьшите согласно этим значениям для создания эффекта многослойности:

разработка дизайна сайта

Шаг 7. Создайте управляющие элементы слайдера

Создайте новый документ 100px на 100px. Выберите из инструментария пользовательскую векторную фигуру Закругленный прямоугольник (U) и щелкните правой кнопкой мыши на документ, чтобы открыть список пользовательских векторных фигур. Чтобы создать стрелку, я начну с фигуры стрелки по умолчанию, а затем мы ее модифицируем под себя:

разработка дизайна сайта

Создайте фигуру шириной примерно 50px. Назовите слой "Arrow slider". Преобразуйте ее, как захотите… при помощи инструмента white arrow (A), вы можете приспособить векторные дорожки и сделать любую собственную стрелку…

разработка дизайна сайта

Наложите на слой эффекты при помощи этих параметров:

разработка дизайна сайта

Удалите фон этого документа и сохраните его как: ArrowSlider.psd в папке PSD.

Поместите стрелку в группу "slider_block". Чтобы сделать это: Menu (Меню) > File (Файл) > Import (Импорт)… Выберите ArrowSlider.psd и поместите его в любую, какую захотите, позицию рядом со слайдером.

разработка дизайна сайта

Скопируйте слой стрелки (Ctrl+J или Cmd+J) для создания стрелки слева и разместите его.

Используйте для вращения стрелки до нужного положения Menu (Меню) > Edit (Редактировать) > Transform (Трансформирование) > Rotate on horizontal axis (Повернуть по горизонтальной оси).

Шаг 8. Подсветите слайдер

Скройте группу "slider_block".

Создайте новый пустой слой и возьмите инструмент Выделение окружностью (Circle selection (M)) для создания окружности примерно в 200px.

Заполните ее белым цветом.

разработка дизайна сайта

Реализуйте выделение, затем используйте Filter (Фильтр) > Gaussian Blur (Размытие Гаусса) и установите на 50px.

разработка дизайна сайта

Установите слияние слоя на "overlay" (наложение) и передвиньте наверх слайдера.

Дважды скопируйте этот слой и разместите слои внизу областьи слайдера слева и справа…

разработка дизайна сайта

Шаг 9. Выделите слайдер

Скопируйте слой "gradient" и переименуйте в "dark bar". Уменьшите высоту до 20px и разместите внизу слоя "gradient".

разработка дизайна сайта

Измените цвет слоя на черный вместо цвета градиента и установите непрозрачность фона слоя на 60%.

Дважды щелкните, чтобы открыть опции эффектов слоя и создайте Отбросить тень (dropshadow) и Внутреннюю тень (innershadow), как здесь:

разработка дизайна сайта

разработка дизайна сайта

Сдвиньте слой вниз на 1px.

Теперь у вас между слайдером и черным фоном есть красиво выделенная линия.

разработка дизайна сайта

Шаг 10. Заставьте слайдер парить над поверхностью!

Откройте файл background.jpg из папки с исходниками (из скачанных файлов) и перейдите к Menu (Меню) > Edit (Редактировать) > Define pattern (Задать шаблон)…. Затем закройте файл.

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

Теперь сделайте выделение слоя прозрачности (Transparency) (Ctrl + щелчок или Cmd + щелчок на слой).

Создайте новый слой с названием "Shadow", поместите его под слой "Transparency".

Заполните его черным цветом и добавьте Размытие Гаусса (Gaussian Blur).

Menu (Меню) > Filters (Фильтры) > Blurs (Размытия) > Gaussian Blur (Размытие Гаусса)… и сделайте его длиной 20px.

Теперь преобразуйте его, чтобы смотрелось как отбрасываемая тень (dropshadow)….

разработка дизайна сайта

Снова используйте Menu (Меню) > Filters (Фильтры) > Blurs (Размытия) > Gaussian Blur (Размытие Гаусса)… но уже с длиной 5px.

И снова преобразуйте его, чтобы размер подходил под слой прозрачности (transparency)….

разработка дизайна сайта

Выберите слой "Shadow" и одновременно сделайте выделение слоя "Transparency" (Ctrl+ щелчок или Cmd+ щелчок на слой в панели слоев).

Теперь переверните выделение Ctrl+i или Cmd+i и щелкните на иконку для создания маски непрозрачности в слое "Shadow". Тень сейчас скрыта под областью прозрачности.

разработка дизайна сайта

Шаг 11. Улучшите логотип

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

Создайте под слоем логотипа новый пустой слой и назовите его "shadow logo". Сделайте выделение слоя логотипа и заполните слой "shadow logo" черным.

Добавьте Размытие Гаусса (Gaussian Blur) длиной 1,5px.

Трансформируйте его. Ctrl + T или Cmd + T, чтобы трансформировать, сдвиньте контрольную точку полностью влево и передвиньте правый идентификатор вниз на 20px…

разработка дизайна сайта

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

Шаг 12. Определите колонки

Теперь мы добавим дополнительные направляющие, чтобы создать 4 колонки, в которые планируется поместить остальной контент…

Создайте следующие направляющие (Menu (Меню)> View (Вид)> New guide (Новая направляющая)…) :

355px по вертикали

375px по вертикали

590px по вертикали l

610px по вертикали

825px по вертикали

845px по вертикали

У нас есть теперь 4 колонки по 215px каждая и по 20px между ними.

Шаг 13. Блок девиза

Импортируйте geek_zombie.png из папки с исходными данными и разместите его посредине первой колонки.

Создайте большую строку девиза с нужным вам текстом. Я использовал шрифт "Droid Serif" размером 30px и высотой строки 42pt. Конечно, вы можете пользоваться своей собственной разметкой текста

Начертите под девизом прямоугольник высотой 7px.

Импортируйте geek_zombie.png из папки с исходными данными и разместите его посредине первой колонки.

Создайте большую строку девиза с нужным вам текстом. Я использовал шрифт "Droid Serif" размером 30px и высотой строки 42pt. Конечно, вы можете пользоваться своей собственной разметкой текста

Начертите под девизом прямоугольник высотой 7px.

разработка дизайна сайта

Создайте на черном прямоугольнике эффекты слоя, как здесь:

разработка дизайна сайта

У вас получилась полоса с красивой фаской (эффектом объемности).

разработка дизайна сайта

Выберите 3 слоя (Зомби + Девиз + черная полоса) и нажмите Ctrl + G или Cmd + G, чтобы их сгруппировать. Переименуйте группу "Slogan". Обратите внимание, насколько организованными мы остаемся в процессе работы!

Шаг 14. Блок первой колонки

Возьмите инструмент Текст (Text) и создайте название. Я снова использую шрифт 30pt – заметьте, как он похож на девиз, чтобы оформление было схожим. Таким образом достигается последовательный, профессиональный облик всего дизайна.

Определите область текста примерно в 128px от заголовка и вставьте в нее маленький текст – "заполнитель". Я пользуюсь 13pt Arial, но вы можете взять любой, который вам нравится.

Скопируйте созданную нами ранее для девиза черную полосу и вставьте ее под текстом в 20px от низа текста.
Измените размер так, чтобы он заполнил первую колонку.

разработка дизайна сайта

Создайте при помощи векторной формы (Vector Shape (U) область рисунка 215 x 88px.

Скопируйте ее, переименуйте в "Tranparency_1col"и растяните в длину, чтобы получился блок 215 x 108px.

Нажмите Ctrl+, или Cmd+, чтобы сдвинуть слой в панели слоев вниз.

Выберите слой "Transparency" и скопируйте эффекты стиля, чтобы применить их к только что скопированному слою ("Tranparency_1col").

Теперь можно вставить в область рисунка свое изображение. Щелкните правой кнопкой мыши на изображение и выберите "Create clipping mask" (Создать отсекающую маску).

разработка дизайна сайта

Шаг 15. Создайте остальные колонки

Теперь можно скопировать первую колонку (группа слоя), а затем сдвинуть ее к второй колонке. Смените содержимое (изображение/текст) на нужное вам.

Сделайте то же самое для колонок 3 и 4…

разработка дизайна сайта

Шаг 16. Нижний колонтитул

Перейдите к Menu (Меню) > Image (Изображение) > Canvas size (Размер области) и отредактируйте размер области как тут:

разработка дизайна сайта

Начертите прямоугольник. Назовите его вроде "Footer bg". Нажмите Ctrl+T или Cmd+T (для Mac) и установите свойства на:

разработка дизайна сайта

Дважды щелкните на цветное контрольное изображение в панели слоев, чтобы установить цвет на #101010. Дважды щелкните на слой, чтобы установить эффекты слоя, как здесь:

разработка дизайна сайта

Выберите и скопируйте слои "dark bar" и "Gradient" из группы Slider.

Сгруппируйте слои и разместите их в панели слоев под "footer bg".

Передвиньте их вниз документа.

Измените размер, чтобы создать нужный стиль.

В своем примере я сделал слой градиента высотой 35px и слой "Dark bar" – высотой 8px …

Вставьте логотип вниз прямо в 20px от направляющей справа.

разработка дизайна сайта

Скопируйте пункты верхнего меню, чтобы вставить их в нижний колонтитул поверх слоя "footer bg".

Создайте строку copyright шрифтом Arial, 11pt, черного цвета.

разработка дизайна сайта

Скопируйте "footer bg" и уменьшите его высоту до 10px.

Сдвиньте его прямо на "footer bg". Так вы создадите для нижнего меню красивый эффект фаски.

разработка дизайна сайта

Готово! Создавайте собственные пользовательские версии!

разработка дизайна сайта

разработка дизайна сайта

разработка дизайна сайта

Заключение

Спасибо за внимание, на этом урок по созданияю красивого дизайна веб-сайта в темных тонах окончен! Надеюсь, вы сможете воспользоваться приемами и техниками этого учебного пособия в своих собственных проектах. Если вы, надеюсь, запомнили, в создании хорошо спроектированного сайта ключевой момент – это организация. Такие же точно комплекты слоев можно использовать для создания структуры HTML/CSS в начале кодирования. Еще раз спасибо!

киберсант-вебмастер

Автор: DevilCantBurn

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Комментарии Вконтакте:

Комментарии Facebook:

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

  1. Андрей Родионов

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

  2. Андруша

    Друзья, приветствую вас. Привлекающий внимание дизайн — отличная реклама своих продуктов в сети интернет. Однако.
    Что есть дизайн без обычной поисковой оптимизации сайта? Да, в общем-то, ровно ничего. Кто увидит ваш сайт, если он отсутствует в первой десятке поисковых систем? Согласен с вами — 0% посетителей.
    Но совершенно другой поворот сайт получает после грамотно отредактированной внутренней оптимизации сайта. Пишу сейчас не по наслышке. Сам вывел не один сайт в топ. Если будут вопросы — обращайтесь. Помогу.
    А пока советую просмотреть видео, после которого абсолютно каждый сможет начать применять seo на своём сайте, что значительно увеличит посещаемость, за счёт индексации сайта в первой десятке поисковых машин.

    • Серж

      Где посмотреть видео?

    • Марина

      Интересно, как ты нам поможешь в топе? И задать пару вопросов?

    • Ростислав

      «Согласен с вами – 0% посетителей.»
      Неправда! Поисковики — далеко не единственный источник посетителей. И потом «грамотная оптимизация» врят ли выведет ваш сайт в первую десятку, или точнее сказать — редко по каким тематикам сайтов такой вывод возможен.

    • Ростислав

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

  3. labintech

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

  4. дмитрий

    здорово!!!уже осваиваю!

  5. Алла

    Спасибо большое за вашу работу!!!

  6. Progressor

    Спасибо за статью, сложновато правда, но что поделаешь, объем не позволяет сделать более подробно и доступно. Но попробуем следовать всем шагам и сделать свое.

  7. Rafael

    Отлично.Удачи вам!

  8. Маруся

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

  9. Наталья

    Ребята Вы такие молодцы. Спасибо Вам большое за помощь. Всё просто и понятно.

  10. НАдежда

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

  11. Devil_Shurik

    Спасибо огромное за урок, очень полезно.
    Вот только как все это перевести в HTML и CSS.
    А еще лучше, как из этого сделать шаблон для wordpress или joomla.

  12. Тенгиз Кучава

    Большое спасибо. Виктор и Андрей. Материал изложен по принципу «простенько о сложном». Надо взять на «вооружение». Как и Ваш уважаемый читатель Андрей Родионов, объезательно сделаю сайт, чтобы на практике «обкатать» материал. Виктор и Андрей, может как нибудь, поместите статью: какие приемы еще надо использовать в Photoshop-е помимо CSS в Dreamweawer, чтобы сверстать «резиновую» по ширине сайт. Я всегда выбираю расширяющийся по ширине шаблоны. фиксированный размер документа 1200px x 1600px как в вышеизложенном примере, не для каждого монитора приемлим. Отсюда и тяга к «резинам».
    с уважением Тенгиз Кучава.

    • Дмитрий

      Да, а вот как «резина» сочетается с дизайном, в котором границы и фоны блоков сайта содержат изображения?

  13. Денежный сайт

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

  14. Отец Виктор

    Супер! Спасибо.

  15. Анна Зинченко

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

  16. Сергей

    Спасибо за статью, всегда приятно учиться у мастеров!
    Статья полезная и доступная.

  17. Анюта

    Спасибо огромное!!!!!!

  18. Марина

    Спасибо, ребята, здорово и понятно написано. Осталось попробовать!

  19. Михаил

    Спасибо за статью,если б была ещё и на русском цены б ей не было.

  20. Helga

    Спасибо, парни! Очень понравилось. По крайней мере для моих целей (создание макета сайта) этого урока вполне достаточно. Очень наглядно.

  21. Yasam

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

  22. AlexMoe

    Очень интересная статья! В ближайшее время попробую обязательно.

  23. Андрей

    Очень интересно,я с этим мало знаком,нужная вещь,спасибо

  24. Александр

    Классно!Свежие идеи всегда приятно изучать.

  25. Елена

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

  26. Петр

    Очень интересно, спасибо!

  27. MMIIPPOO

    Очень интересная статья! Буду возпользоватся от того,что я научил.Спосибо авторов.

  28. Олег

    Немного сложновато для меня, многое не понятно, да еще фотошоп у вас на английском, а от этого вообше запутался. Хотелось бы уроков попроще, доступных без специального образования програмиста.
    Несмотря на все это, вам большое спасибо за ваши труды.
    Очень хотелось бы чтоб вы в своих занятиях рассмотрели темы:
    1. Как привязать сайт к платежной системе.
    2. Как на сайте организовать RSS подписку на новости.
    3. Как создать и разместить новостную ленту, например на Рамблере в топ100

  29. Олег

    Ребята. Это просто перевод с сайта Джулиана Шанилло или Ваша расширенная версия учебного пособия?

  30. Сазонов Александр

    Спасибо огромное! Начну освивать. Надеюсь все получиться.

  31. Юрий

    Это можно сделать и в другой программе. И гораздо проще. А вообщем, спасибо за информацию.

  32. Des

    Спасибо за статью. Хотелось бы побольше тематических дизайнов для сайтов (кулинария, книжный, графика и т.д). И ещё у меня к вам вопрос: как правильно расчитывать размер каждого элемента при дизайне сайта или они произвольного размера? А то у меня пока в голове всё не укладывается.

  33. Маша

    Ребята! Молодцы! Только, вот я воспринимаю лучше уроки видео! А на текстовом, меня хватает на 2/3. Меня поражает и сам урок, своей последовательностью и лаконичностью, и Ваша работоспособность. Удачи Вам!

  34. Людмила

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

  35. Андрей

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

  36. Android

    Сколько не осваивай фотошоп дизайнером, к сожалению, не станешь. Макет рождается в голове причем неделю может на ум ничего ни приходить и вдруг раз! Идея посетила. А если идея не приходит — придется готовый шаблон дорабатывать :(

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

    По-поводу статьи. Подобное чтиво есть у небезызвестного Е.Попова. Там кстати в видео-формате а еще верстка блочная прилагается :)

    • Виктор Рог

      Там совершенно иное чтиво.

    • aiko2011

      Приятная преданность партнёра. Респект и уважуха. Только чтиво действительно отличается.

      • aiko2011

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

        • Android

          Разумно, правда чем больше нанимаешь сторонних спецов, тем больше возрастает конечная стоимость проекта. Увеличивается и шанс того, что кто-то извините, банально схалтурит, или просто не поспеет к сроку. Понятное дело, клиент от всего этого в восторге не останется. Из личного опыта: лучше как можно больше делать самому, привлекать фрилансеров стоит лишь когда совсем не справляешься.

  37. Iskander

    Здорово! только…
    А как же потом это все привязать к стилям? Например настроить под wordpress

  38. Алла

    Спасибо! Очень доходчиво, отличный перевод. Хотелось бы для wordpress что-то.

  39. Вадим

    Такой вопрос. Если я при оформлении комментария заполню поле «Web-сайт», оно будет отображаться в качестве подписи или будет скрыто как E-mail?

    • Виктор Рог

      При нажатии на Ваше име «Вадим» будет переход на ссылку Вашего сайта.

  40. Олег Алексеевич

    Очень полезный урок!Грамотно перевели ребята!Сейчас модно делать такие сайты(в таком стиле)Если есть возможность больше таких уроков.Но и не забывайте о PHP.Меня в часности интересует внедрение своего шаблона в CMS таких движков как WP,Joomla,Drupal как правильно интегрировать свой шаблон,и куда что распределять.
    С уважением к Вашей команде Олег Алексеевич.

  41. Fsingle

    спасибо каждый ваш урок интересен)…

  42. Евгений

    Спасибо очень полезный урок. Я собрался разрабатывать новый сайт, и надеюсь, применить полученные в этом уроке знания, при разработке его дизайна. Все очень понятно и подробно изложено! Еще раз спасибо!

  43. Galina

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

  44. Ильдарик Бурханов

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

  45. viewmind

    Профессионал — это прежде всего тот, кто знает, что такое лопата. Ребята, вы великие труженики!

  46. Елена

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

  47. dilya

    esli chesno skazat mne ponravilos to’lka ne vse tak delayut

  48. Enka

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

  49. дмитрий

    очень пригодиться нужно подробнее изучить

  50. Мария

    Мне понравился дизайн сайта kvinta-a.ru/razrabotka-dizayna-sayta/.
    Также там написана неплохая статья по дизайну.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree