27
В этом учебнике вы узнаете, как разработать красочный дизайн для вашего сайта на WordPress.
Вы можете использовать его как тему WordPress, если хотите.
Если вы хотите скачать этот макет PSD, вам необходимо присоединиться к нашим VIP пользователям и тогда вы сможете скачать нашу огромную библиотеку Premium загрузок.
У нас есть более 50,000 файлов доступных для скачивания: стили слоя, Photoshop градиенты, векторы, кисточки, PSD макеты, и т.д. …
Для повторения этой учебной статьи хорошо иметь следующий комплекты:
1. 30,000 стили слоя Photoshop
2. 27,000 Photoshop градиенты
Я покажу вам, как создать стили слоя, которые будут использоваться, и я дам вам все цветовые коды, которые нужны, но будет хорошо, если у вас будет больше возможностей для тестирования разных цветов.
Для начала Вы можете открыть новый документ со следующим размером: 960 × 900 пикселов.
Выберите фоновый слой и нажмите Ctrl + J. Этот ярлык будет дублировать фоновый слой.Выберите этот второй слой и добавьте следующие стили слоя.
С Rounded Rectangle Tool я создам 4 формы, такие как на следующем изображении
Для всех этих форм я добавлю же стили слоя.
С Rectangle Tool я создал некоторые вертикальные фигуры. Легкий способ создать единую форму, а затем вы можете повторить его несколько раз.
Вот как я буду делать формы над моего макета
Эти стили слоя я использовал
Я буду дублировать малые формы несколько раз, пока буду заполнять все верхняя часть макета.
Выделить все эти малые вертикальные фигуры в палитре слоев, а затем нажмите на Ctrl + E, чтобы объединить их в один слой. Для наших VIP члены я оставлю эти малые вертикальные фигуры в отдельной папке вы можете изменить цвета легко) можно использовать единый стиль слой нашего огромного множества 30,000 стили слоя. Я уверен, вы найдете тот, который вы хотели.
Следующим шагом является загрузка отбора на втором белая форма. Чтобы загрузить выделение, удерживая клавишу CTRL и левой кнопкой мыши на «Миниатюра маски вектор».
Вы увидите выделение вокруг вашей форме.
Выберите слой с оранжевым цветом вертикальной формы, и нажмите на Ctrl + J. Photoshop создаст новый слой из выбранного вами, и он будет помещена над первоначальным слоем. Нажмите на Ctrl + D чтобы снять выделение. Теперь вы можете скрыть первоначальный слой, и вы получите такой результат.
Создайте новый слой, именно над этим. Простейший способ это скопировать большую белую форму и перетащите выше желтый слой в палитре слоев.
Для этой формы я добавлю следующие стили слоя
Это мой текущий результат
С Rounded Rectangle Tool я создам другую форму, как на следующем изображении
Для этих форм 2 Я добавлю следующее стили слоев
Вставим случайные текств в контуры, и получим такое изображении
На верхней части веб-сайта я добавить логотип с Grafpedia и текст для кнопок
Здесь слои стиля, используемые для логотипа
Теперь я буду показывать большую белую форму за слоем с оранжевым вертикальными линиями. Между полосами оранжевого вы увидите темную линию, которые выглядят намного лучше белого.
Я буду выберите Line Tool (установить ширину 1 пиксель) и сделать некоторые вертикальные линии
С Rounded Rectangle Tool я создам несколько кнопок. Все кнопки будут иметь следующие стили слоя которой можно применять после вы будете создавать кнопки
Это, как моя кнопка будет выглядеть
Теперь я добавлю заполнение макета текстом и милое изображение глобуса.
На средней части макета Я намерен создать форму, как на следующем изображении
Я нажимаю правую кнопку мыши на слое в моей палитре слоев, и выбираю Rasterize форму, а затем Eraser Tool чтобы удалить верхнюю часть и слева от формы, пока он подойдет на другую форму.
Я добавлю в том же стиле слой оранжевого который использовал для вертикальных полос, и тогда я буду использовать Horizontal Type Tool, чтобы добавить какой-нибудь текст. Вот мой результат.
Я надеюсь, вам нравится этот учебник и конечный результат.
Если вы хотите скачать этот макет, который мы учились делать, то, пожалуйста, зарегистрироваться как VIP. За 9,95 $ вы сможете скачать все наши PSD макетов плюс все наши VIP ресурсов: векторы, градиенты, стили слоя т.д.
Перевод статьи
http://www.grafpedia.com/tutorials/design-colorful-theme-wordpress