большая картинка для фона к фото

Фон градиентом | уроки photoshop

Фон градиентом в веб дизайне

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

Градиенты в фоне и отдельных блоках сайта можно использовать практически любые. Важно только помнить о том, что при верстке ваш градиент может быть слишком “тяжелым”. Например если использовать в фоне сайта вертикальный либо горизонтальный градиент, пусть даже сложный и многоцветный – его всегда можно сжать по вертикали или горизонтали, для того чтобы файл с ним занимал небольшой объем. Примеры таких градиентов и полос, в которые можно их сжать, на иллюстрациях. Верстальщику будет очень удобно сделать полосу толщиной в 1 пиксель с таким градиентом.

Если же градиент проходит под углом, то сделать файл фона толщиной в 1 пиксель не удастся. Это приведет к тому, что файл фона будет объемным, что иногда не допустимо. Одно дело, когда градиент выходит из угла и простирается на небольшое расстояние. Такой макет решается очень просто – вырезается кусок градиента, где идет изменение цвета, и бэкграундом вставляется в фон, все незанятое место заливается одним цветом.

Другое дело, когда фон состоит из нескольких градиентов – такой фон заверстать без больших файлов очень сложно и иногда нецелесообразно. Потому их лучше избегать.

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

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

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

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

source