Ещё макет для вёрстки

[BSandro]

ой моя ошибочка

CTRL+LCLICK по слою с картинкой

CTRL+C  (Скопировать в буфер то забыли )

CTRL+N

ENTER

CTRL+V

CTRL+E

CTRL+S

сохраняем в нужном формате

CTRL+W

Не копирует в буфер обмен :-)

Просто стало интересно я по другому вырезаю

Edited November 18, 2013 by BSandro

[swandev]

 

ой моя ошибочка

CTRL+LCLICK по слою с картинкой

CTRL+C  (Скопировать в буфер то забыли )

CTRL+N

ENTER

CTRL+V

CTRL+E

CTRL+S

сохраняем в нужном формате

CTRL+W

Не копирует в буфер обмен :-)

Просто стало интересно я по другому вырезаю

 

я иногда тоже по-другому) Выделяю, "кропаю", сохраняю как веб, и стрл+шифт+z откатываюсь назад

но, тот вариант быстрее

 

P.S Проверил еще раз, все нормально) Может проблема у вас в фотошопе?

Edited November 18, 2013 by ALEEX SWN

[BSandro]

 

 

ой моя ошибочка

CTRL+LCLICK по слою с картинкой

CTRL+C  (Скопировать в буфер то забыли )

CTRL+N

ENTER

CTRL+V

CTRL+E

CTRL+S

сохраняем в нужном формате

CTRL+W

Не копирует в буфер обмен :-)

Просто стало интересно я по другому вырезаю

 

я иногда тоже по-другому) Выделяю, "кропаю", сохраняю как веб, и стрл+шифт+z откатываюсь назад

но, тот вариант быстрее

 

P.S Проверил еще раз, все нормально) Может проблема у вас в фотошопе?

 

Не знаю вроде все норм, у меня последний пробник Adobe photoshop CC (64bit)

 

В принципе все делает кроме вот в буфер обмен, это как бы я еще в самом начале догадался что копировать надо...

 

Да этот вариант быстрее на много

 

а я через инструмент рамка вырезаю, долго получается..

———————————————————

Странно у меня вообще не копирует группы и не вставляет по ctrl+c и ctrl+v

Edited November 18, 2013 by BSandro

[Ludwig Voltman]

Спасибо за макет. Как разберусь с текущим, примусь верстать этот.

Один вопрос вдогонку: года два назад на этом форуме была тема с подборкой макетов для новичков (около 10 штук) по нарастающей сложности. Помню что первой темой в подборке была эта:

К каждому макету было написано ТЗ. Не могу найти эту тему! Кто знает, скиньте, пожалуйста, ссылку (можно в ПМ)!

[Vlad]

Все макеты здесь.

http://htmlforum.ru/index.php?showforum=31

[Aidos_astana]

 

А страница должна быть резиновая или фиксированная?

Фиксированный.

 

 

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

Спасибо тебе Дима, почаще бы так

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

[swandev]

 

 

А страница должна быть резиновая или фиксированная?

Фиксированный.

 

 

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

Спасибо тебе Дима, почаще бы так

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

 

Да, не обязательно.

У меня вообще почти все мое портфолио на моем домене, хотя у работ есть рабочие аналоги.

Edited November 25, 2013 by ALEEX SWN

[sigma77]

Подскажите новичку, как я понял, я могу верстать любые макеты из раздела "Макеты для верстки" и не только, и добавлять их в свое портфолио.

 

Читайте комментарии к макетам. Несколько макетов было, которые выставлять в своем портфолио не разрешалась, т.к. они принадлежали лично человеку, выложившему их.

[Ludwig Voltman]

Я сверстал этот макет и кое-что заметил.

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

Вот картинка макета с включенными слоями:

[swandev]

Я сверстал этот макет и кое-что заметил.

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

Вот картинка макета с включенными слоями:

 

 

Обычно если в открытом макете есть какие-то скрытые слои, то их не верстаем ( есть исключения, в виде всплывающих окон, элементов при наведении мыши и т.п).

Edited November 25, 2013 by ALEEX SWN

[Crystal-3]

Здравствуйте!

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

[Aleksandr.L]

Здравствуйте!

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

 

Вырезаете полоску с градиентом и повторяете ее по горизонтали, затем вырезаете небоскреб с облаками и вставляете вторым слоем. Я так делал.

[Crystal-3]

 

Здравствуйте!

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

 

Вырезаете полоску с градиентом и повторяете ее по горизонтали, затем вырезаете небоскреб с облаками и вставляете вторым слоем. Я так делал.

 

Да, этот вариант я тоже пробовала, но мне не удаётся добиться плавного перехода основного фона к небоскрёбу, слишком очерчены границы начала небоскрёба.

А что значит "вторым слоем"? 

Полоску с градиентом я вставляла background в body, а небоскрёб - аналогично в wrapper. 

[Aleksandr.L]

Ну у меня вот так получилось:

[Crystal-3]

 Aleksandr.L, спасибо Вам огромное за помощь. У меня всё получилось  !!! 

 

А вот это для меня стало открытием: 

background: url(img/bg_wrapper.png) no-repeat 50% 0, url(img/bg.png) repeat-x 0 0 #d4e3ee;

Теперь буду знать.

[Aleksandr.L]

 Aleksandr.L, спасибо Вам огромное за помощь. У меня всё получилось  !!! 

 

А вот это для меня стало открытием: 

background: url(img/bg_wrapper.png) no-repeat 50% 0, url(img/bg.png) repeat-x 0 0 #d4e3ee;

Теперь буду знать.

http://htmlbook.ru/css3-na-primerakh/neskolko-fonovykh-risunkov

[kattiperk]

Я тоже поучаствую.

[pavel_martin]

Господа профи, оцените пожалуйста мое творение

 

http://bestfuns.url.ph/alex_two/

[bobchinskiy]

Макет простой и здоровский, а фикс ширина какая?

[Alphataurus]

Приветствую Всех!

Верстаю сайты недавно, пока на любительском уровне. Взялся за этот макет, любезно предоставленный Dimitry Wolotko. И решил тут по максимуму использовать возможности CSS3, но возникла проблемка с градиентами. Хотелось бы их также сделать средствами CSS, а не картинками. Проблема в следующем - не могу найти нормальный способ как-то конвертировать градиенты из макета PSD в правила CSS3? И вообще, существует ли такой способ?

 

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

Пробовал также плагин для фотошопа CSS3Ps, но он определяет градиент только у одного слоя, а здесь еще идут какие-то дополнительные слои или наложения кардинально меняющие градиент, которые этот плагин никак не воспринимает. Загружал и градиентную картинку на сайт colorzilla где результат сгенерированного CSS по цветовым переходам оказался весьма далек от оригинала.

Может в подобных случаях и не пытаться создавать CSS градиенты, а использовать картинки? Или же существует все-таки какое-то более простое решение для преобразования градиентов из PSD макета в CSS код?

[Vlad]

Colorzilla в помощь.

http://www.colorzilla.com/gradient-editor/

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

[Alphataurus]

Спасибо за ответ, Vlad.

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

[antishock]

Редактор Brackets умеет определять градиент из псд файла и генерировать css код

[swandev]

еще это умеет делать css hat (плагин для фотошопа) в том случае если вы не используете brackets

Edited February 21, 2015 by swandev

[forest79]

еще это умеет делать css hat (плагин для фотошопа) в том случае если вы не используете brackets

 Только он стоит около 30$ . А для начинающего верстальщика не так-то легко отдать вот так сразу такую сумму.

 

Вот моя верстка. http://forestsites.16mb.com/mysites/uta/