Search the Community

Доброго времени суток. Eсть опыт в адаптивной кроссбраузерной верстке более 3-х лет. Присутствуют знания таких языков как: html(продвинутый уровень); css(продвинутый уровень); js(базовый уровень); jQuery(базовый уровень); php(базовый уровень); Так же имеются знания фреймворков, систем и препроцессоров: bootstrap; less; sass Владею навыками: Wordpress и соответствующей интеграцией под данную CMS. Joomla Одна из последних работ http://test1.ramos78h.beget.tech/ По всем вопросам в skype: sergio09931, ВК: id392591806, почта: ramos7691@gmail.com

Есть готовые PSD файлы. Вопросы можно задать тут или в скайп. skype: viktor_skype_go zakaz.zip

Техническое задание. Базовые требования Платформы: Windows, Mac OS X. Браузеры IE8 и выше Chrome последние 2 версии Firefox последнии 2 версии Opera последнии 2 версии (на базе движка Blink) Safari последнии 2 версии В качестве эталонного браузера использовать Chrome или Firefox. Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий. Соответствие макету Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера. Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них. Стандарты HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно. В кажестве исходного кода для CSS использовать препроцессор LESS или SASS. Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия. Сброс стилей В качестве сброса стилей браузера использовать Normalize.css. Javascript: За основу взять фреймворк jQuery версии 1.11.х или 2.x.x. Для поддержки HTML5 тегов в IE можно использовать код: <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]--> Допускается применение modernizr если потребуется. Ширина сайта Стандартная ширина сайта - 960px. Grid За основу взять любой распрастранненый инструмет для построения макета, например 960.gs или Bootstrap Grid System (требуются знания фреймворка) Изменение/наполнение контентом Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал". Особености макета 1. Шапка 1.1. Меню - Все как видно так и делать. Пунктов меню может быть больше -- это один список который выводится в 2 столбца. Текст пункта меню может быть длинее и распологатся в 2 строки. Обратить внимание на высоту строки в этом блоке, так как пункт в 2 строки будет выглядеть плотнее. 1.2. Учесть, что под ссылкой "Мы на Facebook" появятся в будущем еще несоклько аналогичных ссылок. 1.3. Возможно добавится пару языков. 1.4. Поле поиска 1.4.1. В поле поиска добавить placeholder с текстом "Искать...". 1.4.2. Поле поиска изначально должно быть на 1/3 меньше шириной. Поле прилегает к правому краю. 1.4.3. При клике на поле, средствами CSS оно должно растянутся на ширину, указанную на макете. 2. Слайдер в 4 колонки. Слайдер состоит из 4х колонок в слайде. Прокрутка осуществляется при помощи ползунка под ним. Требуется поддержка для touch-устройств для прокрутки контента. 3. Промо-слайдер 3.1. Табы слайдера -- первый и последний "затухают"с градиентом. Активный - крассный. На макете первый затухающий пункт меню содержит ошибку: градиент должен быть от светло-серого в прочрасный, слева на право (для последнего наоборот) 3.2. Кол-во слайдов может быть больше или меньше, чем на макете. 3.3. С прокруткой каждого слайда так же должны прокручиватся Табы (анимация при этом не обязательна). 3.4. В случае, если размер экрана меньше чем ширина макета, стрелка Предыдущий/Следующий слайд должны быть внутри области слайдера. 3.5. Кнопку управления слайдера должны поддерживать состояние "disabled". В случае если прокрутка далее/назад невозможна, стрелка должна быть не-активной. Визуально достаточно будет применить прозрачность 50% к кнопке. 3.6. Слайдер не влияет на 4 колонки под ним. 4. Контент 4.1. Меню слева. Пукты меню могут быть в несколько строк длиной. 4.2. Центральная колонка 4.2.1. Тут ничего особенного, фотография и статья, набранная контент-менеджером. 5. Футер 5.1. 3 колонки разибы по ширине области. Слева меню может наполнятся. Справа какой-то текст. По-центру виджет от Facebook. 5.2. Оступ снижу дл футера сделать высотой 20px. Дополнительно Кнопка "Отправить письмо", справа от макет -- закреплена всегда на одно расстоянии от верха. WYSIWYG Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит. Соотвественно весь контент который визуально отвечает таким критериям (статьи, информационные блоки), должен "уметь" корректно выводить результат набранный контент-менеджером в редакторе. В качестве примера такого редактора можно взять TinyMCE Масштабирование страниц Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение. Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem" HTML код Кодировка – utf-8 Структурный, не комментируемый код Семантическая разметка на уровне грамотного использования тегов. Имена классов и идентификаторов – осмысленные, на усмотрение разработчика. Классы служат для привязки оформления, идентификаторы – скриптов. LESS/SASS код Структурный, отбивка табами. Комментариями обозначены начало/конец крупных модулей/блоков разметки. Допускается использование вендорных префиксов. Стили для IE вынесены в отдельные CSS файлы, если они потребуются. Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation) Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика Javascript код Структурный, отбивка табами. Имена переменных осмысленные, на усмотрение разработчика. Снабжен комментариями: описаны назначения методов/классов функций условий. Для объемных задач используется ООП, для простых – обычные функции. Код должен быть без ошибок. При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика. Изображения Имена файлов осмысленные, на усмотрение разработчика. Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows) Малые изображения и иконки объеденить в спрайты. Для полноцветных RGBA картинок можно использовать инструмент Stitches Для векторных изображений иожно использовать IcoMoon Организация структуры файлов и папок HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов. Стили в папке - /css/ SASS/LESS в соответствующей папке - /sass/ или /less/ Javascript - /js/ Изображения оформления - /images/ Изображения содержания - /thumbs/ или /pic/ Шрифты - /fonts/ Наглядный пример Краткий вариант - только директории: Полный вариант -- директории и файлов: Удачи в обучении Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта design 1 - splat.zip

Ищу верстальщика который не успевает выполнять все заказы, готов оказывать помощь в верстке из PSD макетов, за смешную цену Почта: miskam.developer@yandex.ru

http://prntscr.com/fcm086 кто нибудь сталкивался с таким слайдером, подкиньте пример решения пожалуйста. В гугле не смог найти подобного слайдера.

СДЕЛАЮ САЙТ ПО НИЗКОЙ ЦЕНЕ. ЗНАНИЯ: HTML5, CSS, LESS, SASS, JADE, JS. ПО ВОПРОСАМ ПИСАТЬ НА ПОЧТУ mazay62rus@gmail.com МОЙ GITHUB: https://github.com/mazay62RUS МОЙ SKYPE: amosov_01 МОЙ VK: https://vk.com/wooooooowjs

Всем привет! Наткнулся на такой макет https://mega.nz/#!5XYwxYrK!CKPEpk5YklPP-_QThH67BoTQLVQfDvzt1cmVoO9hFRo На картинке проблемные элементы выделены синими стрелками: - листы с загнутыми уголками и тенями (Блоки с заголовками Documents и Photos) - иконки планшетов с тенями - линия разрыва (если так понятно о чем я) - иконки ноутбука с тенями Можно сверстать так: загнутые листы и иконки блоков docs и photos наверное можно в одну png сохранить. можно разбить на два файла. Планшеты(ноут) и тени сделать отдельными картинками. Т.е. тень будет фоном у компа и ноутов. Планшеты и ноут в SVG. Но больше всего интересна полоса разрыва))))Как? Просто взять и наложить фоном в виде картинки? А как бы вы сверстали эти элементы? Какое решение будет оптимальным?

Всем привет! Скиньте кто-нибудь psd макеты приютов для животных, вет.клиник и все что связано с данной тематикой. Нигде не нашел. Заранее СПАСИБО!!!

Вот на макете, не могу понять как экспортировать слайдер, самый первый под меню и лого, то ли объединить все в один слой или как нить по другому? вот макет site.psd

Добрый день.Как можно повторить, такой вот backgorund: http://savepic.ru/10905797.png Узор вырезал, с градиентом не могу справиться.

Сам макет и ТЗ находятся здесь http://htmlforum.ru/index.php?showtopic=47965 . Собственно хотел обсудить там, но злые админы запретили. Так вот, хотел бы выразить благодарность Klierik'у за отличный макет, много чему научился выполняя его ТЗ. По теме, за эталонный браузер был взят Chrome. В архиве лежит grunt, если кому захочется покопаться поглубже, livereload и компиляция запускаются с помощью команды: grunt splat, минификация, контагинация и т.д. - grunt production. Момент с шириной сайта в ТЗ я не совсем понял, написано стандартная ширина сайта 960px, а в макете 940px, делал по макету. Промо слайдер это что-то с чем-то. Насколько я понял сделать его именно таким как в макете, это задача настолько сложная, что можно сказать невыполнимая. Вся сложность заключается в корректной работе слайдера при условии, что ячейки в навигационной строке имеют разную длину (в зависимости от кол-ва символов в них), я использовал Royal Slider, вот мнение автора слайдера по этой проблеме http://help.dimsemenov.com/discussions/problems/11648-thumbnails-width-different-widths . Можно конечно с помощью подбора длины слов получить приемлемый результат вроде этого http://bestfuns.url.ph/Task1/ , но это костыли, да и если прокрутить этот слайдер до конца вправо будет виден зазор между ячейкой и границей навигационной строки. Если кто знает решение, или слайдер в котором данная возможность поддерживается, поделитесь пожалуйста. Отдельно прошу придираться к JS и Scss(использование ф-ий, примесей, написание собственных, переменные и т.д.). Заранее спасибо! Сам сайт: http://www.tech-drive.ru/sergey/splat/ Исходники

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

День добрый. Попался макет шириной 2800px, со словами заказчика: "Сайт будет адаптирован под мониторы различной ширины, минимальная ширина 1000 пикс." Не пойму как верстать) Шрифты, графика - просто огромные, к примеру размер заголовков по 40px (font-size), изображения, которые с виду должны быть около 200px имеют ширину по 600-700 Вопрос: верстать как моей душе угодно (думаю не стоит), делать фон на 100% контент на 1000px, или есть какой-то принцип масштабирования таких макетов (ну к примеру 2 к 1, но в таком случае рисовали бы тысячи на 2000-2400)?

Техническое задание. Базовые требования Платформы: Windows, Mac OS X. Браузеры IE8 и выше Chrome последние 2 версии Firefox последнии 2 версии Opera последнии 2 версии (на базе движка Blink) Safari последнии 2 версии В качестве эталонного браузера использовать Chrome или Firefox. Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий. Соответствие макету Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера. Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них. Стандарты HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно. В кажестве исходного кода для CSS использовать препроцессор LESS или SASS. Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия. Сброс стилей В качестве сброса стилей браузера использовать Normalize.css. Javascript: За основу взять фреймворк jQuery версии 1.11.х или 2.x.x. Для поддержки HTML5 тегов в IE можно использовать код: <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]--> Допускается применение modernizr если потребуется. Ширина сайта Стандартная ширина сайта - 100%. Изменение/наполнение контентом Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал". Особености макета Главная страница 1. Фоновое изображение должно занимать полностью область окна браузера. По умолчанию картинка имеет значение ширины 100%. 1.1. В случае если ширина окна браузера больше чем высота, ширина картинки 100%, высота "auto". Картинка приклеена к верху и обрезается снизу. 1.2. В случае если ширина окна браузера меньше чем высота, установить значение высоты для картинки 100%, а для ширины "auto". Картинка должна выравниватся по центру, тем самым обрезая края слева и справа. 1.3. Вышеуказанные пункты реализовать при помощи CSS3 2. Меню 2.1. Меню имее отступ сверху фиксированный. 2.2. Высота меню не фиксированна. Количество пунктов может менятся. Текст в пункте меню может быть в несколько строк -- такой пункт должен выглядеть более сжатым по отношении к другим за счет line-height. 2.3. Ширина меню фиксированна. 3. Слайдер 3.1. Блок с текстом всегда должен быть по-центру как вертикально так и горизонтально. Контент внутри может и будет менятся. 3.2. Ширина блока по-центру может занимать все доступное срастранство, но не может "налазить" на меню слева. Так же этот блок не должен "налазить" на индикацию в нижнем правом углу если там будет много слайдов. 3.3. Индикация слайдов размещается в нижнем правом углу. Отступы справа и снизу фиксированные. Элементы индикации могут выстраиваются в несколько строк при сужении экрана (в таком случае возможна ситуация конда индикация ложится поверх блока по-центру). Кликатебельная зона должна быть достаточной что бы в неё можно было тыкнуть пальцем на смартфоне. 3.4. Требуется поддержка touch-устройств. Внутреняя страница 1. Блок с белой рамкой имеет фиксированную высоту, выравнивается по-центру области в которой размещается. Его ширина может достигать ширины всей строки, за вычитом ширины меню. Текст внутри данного блока должен выравниватся вертикально по-центру. Строк может быть как одна так и две. Если контент превышает область -- прятать излишки. 2. Белая область на странице. 2.1. Данная область занимает всё пространство области, при этом имея фиксированный отступ сверху и слева. 2.2. Левая колонка имеет фиксированную ширину 2.3. Правая область, с картой, занимает все доступное пространство. Масштабирование страниц Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение. Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem" HTML код Кодировка – utf-8 Структурный, не комментируемый код Семантическая разметка на уровне грамотного использования тегов. Имена классов и идентификаторов – осмысленные, на усмотрение разработчика. Классы служат для привязки оформления, идентификаторы – скриптов. LESS/SASS код Структурный, отбивка табами. Комментариями обозначены начало/конец крупных модулей/блоков разметки. Допускается использование вендорных префиксов. Стили для IE вынесены в отдельные CSS файлы, если они потребуются. Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation) Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика Javascript код Структурный, отбивка табами. Имена переменных осмысленные, на усмотрение разработчика. Снабжен комментариями: описаны назначения методов/классов функций условий Для объемных задач используется ООП, для простых – обычные функции. Код должен быть без ошибок. При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика. Изображения Имена файлов осмысленные, на усмотрение разработчика. Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows) Малые изображения и иконки объеденить в спрайты. Для полноцветных RGBA картинок можно использовать инструмент Stitches Для векторных изображений иожно использовать IcoMoon Организация структуры файлов и папок HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов. Стили в папке - /css/ SASS/LESS в соответствующей папке - /sass/ или /less/ Javascript - /js/ Изображения оформления - /images/ Изображения содержания - /thumbs/ или /pic/ Шрифты - /fonts/ Наглядный пример Краткий вариант - только директории: Полный вариант -- директории и файлов: Удачи в обучении Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта design 2 - relax clinic.zip

Всем доброго времени суток! Хочу предложить свои услуги по верстке макетов из PSD, а также созданию и адаптации макетов под DLE. Код: кроссбраузерный (начиная с IE8, но если очень надо то и IE7); валидный. Цены: обычная html страница от 15$ шаблон под DLE от 35$ стоимость адаптации договорная Контакты: icq - 668045211 skype - diman_1990 email - sanda.webstudio@gmail.com, dima.house@list.ru Портфолио - http://www.weblancer...NDA-/portfolio/ Отзывы - http://talkwebber.ru/topic/33558-verstka-maketov-iz-psd/#entry317722 Опыт работы уже более года, однако в портфолио можете увидеть очень мало работ, так как основное время работаю в веб-студии и не могу продемонстрировать данные работы.

Здравствуйте. Буду краток. Хочу вам предложить свои услуги по созданию сайтов на wordpress "под ключ", создание лендингов "под ключ". Также сверстаю ваши PSD макеты сайтов. Гарантирую качество за приемлемую цену(если интересный для меня проект, возможно бесплатное сотрундичество). Мои контакты: Аккаунт weblancer: http://www.weblancer.net/users/psixodyb/ skype : psixodyb email : ks.emmure@gmail.com vk :http://vk.com/ks.emmure Также иногда читаю сообщения здесь. Пишите, с радостью отвечу на все ваши вопросы.

1) JavaScript / jQuery, (написание отдельных скпиртов, приложений, фикс багов ) 2) Angular js (написание отдельных скпиртов, приложений, фикс багов ) 3) Верстка , адаптация, фикс багов, psd to html 4) Css анимации, html5 5) twitter bootstrap Интересует удаленная работа по Front-end на part-time (совмещение, 2-3 часа). А также разовая либо стартап. Как найти: 1) skype: pawel_rosolko 2) rsk.pawel@gmail.com

Оцените верстку и написание кода. Возможно имеются ошибки, покритикуйте. Основной задачей для меня являлось, сделать как можно точно по PSD макету. Нужно было расширение фона блоков по ширине на 100% экрана, а контент в них по центру. Валидацию прошел.По кроссбраузерности, вроде все нормально, только в IE 8 не поддерживается background: cover; и фоновая заставка второго блока не расширяется. Пока ищу варианты для IE8.Вот ссылка на страницу.

Ситуация такая: есть меню навигации при наведении мыши должна быть подсветка у меню. Меню расположил, вот с подсветкой не могу сладится, решил реализовать все через псевдокласс hover,сохранить подсветочку из макета и наложить на меню.Проблема в том что photoshop сохраняет это все с белым фоном. Выделение слоя и сохранения дает тот же результат опять фон, как проще сделать? Одна подсветка всегда должна быть, другая с дополнительным подсветом при наведении мыши.

upd2: вот новая версия http://akorshun.e3w.ru/1/Basic-template.html

Ребята,объясните мне начинающему верстальщику,как сделать из PSD сделать сайт в HTML,CSS . Я понятия не имею как с фотошопа вырезать картики,иконки,текст,и как всё воплотить в HTML. Теоретически понимаю,а вот с чего начать не знаю. http://www.picshare.ru/view/3341745/

Доброго времени суток! Подскажите пожалуйста новичку,какой нибудь простой psd макет для того,что бы с него сверстать страницу, нужен именно простой что бы научиться ну и разумеется советы какие нибудь,если таковые имеются,заранее благодарен!

Здравствуйте,нужна ваша помощь!Подскажите как правильно нарезать psd шаблон,что бы впоследствии можно было получившиеся картинки использовать в создании сайта(фотошопом владею очень слабо,именно поэтому и спрашиваю)может кто нибудь знает самоучители,уроки,или просто сам расскажет,а возможно даже и покажет как это делается) в общем надеюсь на вашу помощь,заранее благодарен!

Появилось желание немного разобраться в PSD Шаблонах. Представляю себе это так: в Фотошопе, или в чем-то похожем из PSD файла вырезаются нужнее элементы и вставляются на страницу. А в с самом PSD можно прикинуть как будет выглядеть страница. Понимаю, что для этого нужны навыки, но вопрос сейчас не об этом. Также удалось обнаружить, что есть просто некоторые компоненты: Кнопки, списки и т.д. Возьмем, к примеру вот этот http://www.freepik.com/free-psd/amazing-clean-web-ui-elements-kit-psd_596993.htm Допустим, вырежу я кнопку? и что дальше? ведь она будет иметь фиксированные размеры X*Y пикселей. Как я смогу написать более длинный текст? Дальше: сам прогресс-бар? А с ним-то как? ведь картинка то статическая, ползунок на ней на одном месте, а смысл прогресса, чтобы ползунок бегал. То же самое с текстовыми полями. Ну вырежу я его, укажу background в стилях, но опять же размер поля придется фиксировать под размеры картинки. Может я чего-то не знаю? Но я не понимаю зачем все эти элементы. Может кто-то сможет объяснить мне?

Подскажите, как вырезать логотип (два кружочка и надпись Creative Studio), чтобы сохранить полупрозрачность желтого круга. Слой с текстом я могу убрать, конечно, в этом трудности нет никакой. А вот с полупрозрачностью - проблема. Не могу понять, как это сделать? Макет такой: https://www.dropbox....dio-minimal.psd И попутный вопрос. Хочу уточнить для себя. Для правильной, грамотной верстки текст на логотипе, центральной картинке - должен оформляться через код. Это касается не только этого макета, но и в общем. Я правильно понимаю?