aaron

спасибо за подсказку. на данный момент серьезно изучал только joomla и там speedbar упоминался как breadcrums.

а, это breadcrums ("хлебные крошки")! )))

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

Подскажите, правильно ли все сделал? Under construction У меня слой wallpaper не центруется по вертикали почему-то. Скорее всего дело в Photoshop - не так вырезал?

Все абсолютно верно сказано. Но! Для новичка в изучении основ видеоуроки хорошо помогают. Именно для старта. В одном таком уроке может содержаться много информации в доступном виде. Но выучить по видеоурокам что-то невозможно. Они хороши именно как дополнение к книгам. Ну и чтение кода - это не обсуждается. )

Да, как раз про CSS3Ps и читал. Правда, через день после его установки Photoshop у меня перестал запускаться вообще. Но причина, скорее всего не в этом плагине. Все заработало после переустановки программы.

Недавно по рассылке получил новость о плагине для Photoshop. Этот плагин в автоматическом режиме преобразовывает выбранные слои макета в CSS правила. Почитал еще немного и узнал, что такие плагины существуют уже давно их немалое кол-во. Подскажите, действительно ли такие плагины работоспособны и стоит ли их применять на практике?

Вопрос неконкретно задан. Если все неясно - то значит продолжать учить дальше. )) Смотрел я эти видеоуроки. Лично мне очень понравились и на данном этапе мне кажутся самыми лучшими.

Настоящая "магия" горячих клавиш! ))) Ctrl+E - еще ладно, подзабыл. А вот про Alt+ЛКМ - вообще не знал. Сделал так, как Вы описали. Все получилось, кроме одного момента. При объединении слоев у меня в один слой сливается и фоновый рисунок. А когда crop'ом вырезаю логотип, он остается вместе с ним. Как избавиться от фона в этом случае - не знаю. У меня получился результат так, как показал mrnobody. Правда, в конце я так и не понял, почему в продублированных слоях я могу безболезненно избавиться от слоя с фоном, а вот в исходном документе - нет (

Блин, уголки не закруглились: левый верхний и левый нижний (((. Не знаю как уголки скруглить . Вот видео http://zalil.ru/33635283 Видео просмотрел и все получилось. Большое спасибо! Но есть пара вопросов. 1. На последнем этапе вы слой Shape2 просто удалили? Несколько раз просмотрел этот момент - очень уж там незаметно было действие выполнено. По крайней мере, у меня получилось так, как у Вас, когда я удалил Shape2. 2. Я так и не понял, почему, когда я дублирую эти три слоя в новый документ, то слой с фоном там я могу свободно удалить. А вот когда пробую это делать в исходном документе, то он у меня удаляется, но флаг остается, причем еще какой! )) 3. А что за рамочка возникает вокруг курсора, когда Вы кликаете на шапке макета? Для чего она нужна и как ее включить, если она нужна? http://savepic.net/3154623.htm P.S. Ну ведь это не беда? Картинка ложится фоном в шапку, поэтому скругление легко сделать с помощью border-radius? Наполовину разобрался, что это за рамочка ("Показать управление трансформацией на выбранных слоях"): http://savepic.su/2268286.htm И даже "потаскал" ее во все стороны на разных слоях. Но вот для чего она - так и не понял. ))

Выложил - http://rghost.ru/39519743

Здесь есть какое-либо специальное место, куда их выкладывать? Или пользоваться типа Dropbox?

Большое спасибо за ценные для меня подсказки. Да, действительно, щелкнул по стрелке и эффекты отобразились. По поводу обводки хотел как раз спросить и уточнить. Сегодня пробовал выполнить обводку для вырезанной картинки. Реально получается действительно только с помощью border: border:2px solid #fff; Пробовал с padding: background:#fff; padding:2px; Результат тот же. Я это пишу к вопросу, который хочу задать. Если к вырезанной картинке с размерами 50х50px добавить рамку 2px, то ее реальные размеры на шаблоне будут больше, чем на макете - 54x54px. Тоже относится и к padding. Ведь так? Насколько я понял, в CSS невозможно выполнить обводку так, как это сделано в Photoshop - чтобы она накладывалась на изображение поверх него, не изменяя при этом конечные размеры самого изображения? Я правильно понимаю? P.S. Толщину Вы указали наверное только в качестве примера? У меня в свойствах стоит 2px: http://savepic.su/2265166.htm Подскажите еще, пожалуйста на один вопрос. Имеется шапка на psd-макете. Фрагмент ее привожу ниже: http://savepic.org/2408125.png Вот картина на Панели слоев. Рамкой обвел слои, отвечающие за прорисовку этого фрагмента: http://savepic.net/3185499.htm У меня не получается вырезать логотип шапки. Мне необходимо получить в результате шапку такого вида: один файл с прозрачным фоном, на котором значок флага + Formula В готовом html-шаблоне находится именно такой файл с расширением png. Пробовал вырезать, манипулируя объединением или отменой связей между слоями. Самое лучшее, что получал в результате - файл со "значок флага + Formula" и фоновой заливкой красного цвета. Или значок флага с фоном, но без "Formula". Помогите разобраться. P.S.S. Конечно, наивно и глуповато звучит, но я просто в восторге от подсказки по поводу раскрытия и скрытия эффектов слоя. Раньше просто выискивал их на самом макете - на боксах, шрифтах и т. п. Можно только представить! ))))) Еще учиться и учиться...

Большое спасибо за подсказку. Все получилось. Начал разбираться дальше и столкнулся еще с одной небольшой проблемой. Есть еще одна картинка: http://savepic.su/2248727.htm И слои, отвечающие за нее: http://savepic.org/2369170.png Однако на самом слое нет отображения эффектов почему-то. Догадался открыть свойства слоя и найти в нем эффект "Обводка". http://savepic.net/3169266.htm В нем отключил эффект "Обводка" и получилось тоже самое, что и в предыдущем случае, как подсказали вы. Затем вырезал изображение Crop'ом. Думаю, я сделал все правильно? В CSS мне теперь нужно дорисовать обводку с помощью border и padding, я правильно понимаю?

Подскажите, пожалуйста. Имеется макет в psd, фрагмент которого привожу ниже. Точнее - это кусок макета с проблемным для меня местом. http://savepic.su/2233598.htm Стоит задача вырезать фотографию, причем без рамки (ее доделаю в CSS). В панели слоев Photoshop такая "картина": http://savepic.org/2402954.png Рамкой обвел те слои, которые рисуют это изображение. Но, насколько я понимаю, один слой связан с другим. И отделить один от другого, чтобы вырезать картинку, у меня не получается. Подскажите, как правильно это сделать? P.S. Когда писал, пришла мысль - может воспользоваться Crop? Все равно подскажите, как нужно выполнить эту операцию? До этого с такими замысловатыми слоями не сталкивался - все изображения были каждый на отдельном слое. Просто объединял нужные и выделением копировал в новый документ, где отключал фон а потом сохранял "Как web..." Вот так - Вырезание объекта из макета

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>index</title> <style type="text/css"> body { background-color:gray; } </style> </head> <body> <div id="warp"> <div id="head"></div> </div> </body> </html> Body залился серым цветом. У тебя еще стили подключены - может там что есть?

Имхо, лучше думать о нем как о внутристрочном блоке или блоке, встраиваемом (встроенном) в строку. Как картинка или кнопка. Нет. Как раз в случае встроенных блоков дописывать это имеет смысл (если надо сделать кликабельной всю ширину пункта меню). А при inline это, как правило, бессмысленно — блок, насильно впихнутый посреди строки обычного текста, попросту разорвет ее. Наглядный пример разницы: http://jsfiddle.net/4NrXF/ Спасибо за простое и доступное объяснение.

Меня поражает тот факт, что когда учил CSS - да, было тяжеловато сначала, но потом освоил. Перечитал горы литературы (Мержевич - всю его литературу, Тиге, половину Рейчел и Мейера и еще других авторов), пересмотрел видеокурсы ("Специалист", Попов), накопал в Инете видеоуроки по верстке (хотя их и мало как таковых). Считал, что теоретически создал для себя более чем хорошую основу. А вот попробовал самостоятельно свертать (пускай и по готовому примеру) что-то - и все! Как будто ничего и не учил, ничего и не знаю вообще. Вроде смотришь на макет - ага, здесь все просто, там так сделать, тут так. А начинаешь делать - то одно не получается, то другое не знаешь как правильно или вообще не знаешь как сделать. Firebug еще только хорошо помогает изучить готовый шаблон, разобраться, что к чему. (((

При display:inline-block элемент ведет себя, как встроенный, но его внутренняя часть форматируется так, как будто это блочный элемент. Это позволяет, например, добавить вертикальные паддинги. Наверное, все-таки лучше действительно начать с азов, чтобы понимать, что происходит, а не заучивать "если у родителя inline, значит - у потомка display:block" (что, кстати, никак друг от друга не зависит, а только от ситуации). И вообще, не понятно откуда такой вывод сделан Мда... Значит, действительно еще не все знаю... Печально... (((

inline - это строковый элемент, inline-block - строчно-блочный элемент. Азы я знаю. Может даже больше, чем нужно на начальном этапе (как мне кажется). А вот с практикой у меня дела обстоят гораздо хуже. Пытаюсь верстать по готовому примеру. И в чужом коде увидел, что горизонтальное меню делается таким образом: display:inline-block Во всех учебниках и у Мержевича горизонтальное меню создается через: display:inline Так понимаю, что в первом случае элементы li представляют из себя блочные элементы, а во втором случае - просто строка. В первом случае тогда мне нет необходимости дописывать: ul li a { display:block } Я правильно понимаю?

Подскажите новичку. Стоит задача создать горизонтальное меню. Имеются такие строки: ul li { ... display:inline; ... } А чем отличается вышеприведенная строка от следующей: ul li { ... display:inline-block; ... }

Недавно надо было сверстать макет psd, открывал в Gimp и потом в Photoshop, разница колоссальная! Но можно попробовать установить Photoshop в wine, например, http://san-i.org.ua/linux/adobe-photoshop-cs6-ubuntu-linux-wine/ А также можно поставить в виртуальную машину, если вам удобнее работать в linux. (ИМХО, быстрее винды работает) Да, под Wine знаю, что можно установить. Но пока поработаю под Windows.

Подскажите, как в Photoshop на макете узнать радиус скругления какого-либо бокса? Сейчас делаю это так, что тупо масштабирую макет и считаю пиксели, которые входят в закругление бокса.

В html-коде эти строки никак друг на друга не накладываются, конечно. Да, теперь мне понятно, почему у меня не получалось установить для блока фон, такой же, как на psd-макете. Первоначально у меня стояла только первая строка и получалась какая-то ерунда. "... Десятичные значения для rgb можно посмотреть в фотошопе напротив соответствующего цветового канала." Альфа-канал можно увидеть там же? Смотрел и что-то не увидел его. Может, плохо смотрел?