Jump to content
  • 0

Проблема с фоном и осветлением вокруг элемента


themailz
 Share

Question

Добрый день!

Проблема в следующем:

Есть дизайн сайта, который нужно сверстать, в рисунке применены такие способы выделения элементов, как осветление (вокруг цветка) и затемнение (в шапке). Не могу придумать как это сверстать.

Что пробовал касательно затемнения в шапке: сделал основной фон для body (из узоров) и над ним повесил фон-затемнитель (градиент) в div'е. Это не дало нужного результата, т.к. узор на темном фоне попросту пропал.

Касательно первой проблемы - осветления вокруг цветка - вообще мыслей нет как реализовать.

Файл с дизайном (все лишнее убрал, чтобы не мешало, но все-равно файл весит 12,5 Мб) выложил сюда - www.masterspb.com/new/index.psd

Поможете?

Edited by themailz
Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

Не выходит. Все-равно получается закрашивание верхним фоном нижнего.Скриншот с тем что выходит здесь - www.masterspb.com/new/bg.jpg

А по поводу осветленных участков (в psd-файле вокруг цветка) ничего не можете посоветовать?

Link to comment
Share on other sites

  • 0

:) В том-то и дело, что не так. Я понимаю, что исходный файл довольно много весит (12 Мб), потому выложил чисто кусочек верхнего фона (как должно быть) сюда - http://masterspb.com/new/tbg.jpg

Здесь видно (если присмотреться, т.к. jpg немного подпортил качество), что узор накладывается поверх. Можно, конечно, верхний фон отдельно вырезать - но тогда встанет проблема состыковать верхний вырезанный фон с нижним

Edited by themailz
Link to comment
Share on other sites

  • 0
:) В том-то и дело, что не так. Я понимаю, что исходный файл довольно много весит (12 Мб), потому выложил чисто кусочек верхнего фона (как должно быть) сюда - http://masterspb.com/new/tbg.jpg

Здесь видно (если присмотреться, т.к. jpg немного подпортил качество), что узор накладывается поверх. Можно, конечно, верхний фон отдельно вырезать - но тогда встанет проблема состыковать верхний вырезанный фон с нижним

Я вот одного не пойму, к чему такие трудности, ведь верхний слой полупрозрачный,а значит через него полюбому будет просвечиваться фон, почему так не устраивает?

Если я правильно понял, ты хочешь чтобы Общий фон(сиреневый, узорчатый) накладывался НА верхний градиентный полупрозрачный фон, а НЕ наоборот?

Link to comment
Share on other sites

  • 0

Не просвечивает - в этом и проблема :)

Моя цель - получить то же самое, что есть на картинке, а на картинке узор на градиенте виден. Если я узор ставлю поверх градиента (узор на div, а градиент на body) - получается неверный эффект.

Сейчас я сделал так: нижний фон - узорчатый, а верхний - градиент. И получается, что на градиенте не видно узора.

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

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

Edited by themailz
Link to comment
Share on other sites

  • 0
Видимо можно :) Не подскажете, где этот параметр настраивается?

в фотошопе открываешь верхний фон - слои - дальше справа в меню должна быть галочка "Непрозрачный"(типа того) и ставишь такую, которая тебе нужна B)

Link to comment
Share on other sites

  • 0

Спасибо! :) Начал пробовать менять эти параметры - и вижу, что в принципе, нужного результата добиться таким образом можно. Потыкаюсь еще - доведу до ума.

А что касается высветления фона? Не подскажете? B) Я сделал скриншот только слоя с высветлением - вот http://masterspb.com/new/svet.jpg

Самое интересное, что высветление не отделить от фона - их дизайнер вместе нарисовал, одним слоем

Link to comment
Share on other sites

  • 0
Спасибо! :) Начал пробовать менять эти параметры - и вижу, что в принципе, нужного результата добиться таким образом можно. Потыкаюсь еще - доведу до ума.

А что касается высветления фона? Не подскажете? B) Я сделал скриншот только слоя с высветлением - вот http://masterspb.com/new/svet.jpg

Самое интересное, что высветление не отделить от фона - их дизайнер вместе нарисовал, одним слоем

Ну, если дезигнер склеил 2 таких слоя, то он д...ёб. Я с такими дезигнерами тож постоянно сталкиваюсь. "А у меня уже не сохранилось".

P.S.: Если б слои не были склеяны, то можно было бы фон сделать обычным репитом из маленького фрагмента и поверх уже эту букашку положить в PNG24.

Edited by Justnewone
Link to comment
Share on other sites

  • 0

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

Может, есть решение на JS? B) Хотя, конечно, вряд ли.

Link to comment
Share on other sites

  • 0

Есть решение, дать подзатыльник дизайнеру, за то что он тебе всю тему запорол своим косяком, причём такую подлянку сделал неприятную я бы сказал, теперь думать будешь 10 лет, как исправить :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy