Вырезать изображение в Photoshop

[aaron]

Подскажите, пожалуйста.

Имеется макет в psd, фрагмент которого привожу ниже. Точнее - это кусок макета с проблемным для меня местом.

http://savepic.su/2233598.htm

Стоит задача вырезать фотографию, причем без рамки (ее доделаю в CSS).

В панели слоев Photoshop такая "картина":

http://savepic.org/2402954.png

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

Подскажите, как правильно это сделать?

P.S.

Когда писал, пришла мысль - может воспользоваться Crop?

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

Вот так - Вырезание объекта из макета

Edited July 30, 2012 by aaron

[tius]

Если убрать "Эффект - Выполнить обводку", то это уберет рамки.

Layer17 лежит сверху Shape 14 copy 2 и точно входит в границы фигуры, нарисованной на слое Shape14copy2.

Действия:

1. Убрать "Эффекты" (кликнуть по иконке глаза).

2. Воспользоваться Crop'ом.

[aaron]

Если убрать "Эффект - Выполнить обводку", то это уберет рамки.

Layer17 лежит сверху Shape 14 copy 2 и точно входит в границы фигуры, нарисованной на слое Shape14copy2.

Действия:

1. Убрать "Эффекты" (кликнуть по иконке глаза).

2. Воспользоваться Crop'ом.

Большое спасибо за подсказку. Все получилось.

Начал разбираться дальше и столкнулся еще с одной небольшой проблемой.

Есть еще одна картинка:

http://savepic.su/2248727.htm

И слои, отвечающие за нее:

http://savepic.org/2369170.png

Однако на самом слое нет отображения эффектов почему-то. Догадался открыть свойства слоя и найти в нем эффект "Обводка".

http://savepic.net/3169266.htm

В нем отключил эффект "Обводка" и получилось тоже самое, что и в предыдущем случае, как подсказали вы. Затем вырезал изображение Crop'ом.

Думаю, я сделал все правильно?

В CSS мне теперь нужно дорисовать обводку с помощью border и padding, я правильно понимаю?

[tius]

>Однако на самом слое нет отображения эффектов почему-то.

На самом деле есть. Видите надпись fx и стрелку вниз справа от названия слоя Shape14? Это и есть эффекты (нажать на стрелку, они отобразятся под слоем).

Обводку в хтмл делать {border: 10px solid #fff;} где 10px — толщина обводки. padding не нужен.

[aaron]

>Однако на самом слое нет отображения эффектов почему-то.

На самом деле есть. Видите надпись fx и стрелку вниз справа от названия слоя Shape14? Это и есть эффекты (нажать на стрелку, они отобразятся под слоем).

Обводку в хтмл делать {border: 10px solid #fff;} где 10px — толщина обводки. padding не нужен.

Большое спасибо за ценные для меня подсказки. Да, действительно, щелкнул по стрелке и эффекты отобразились.

По поводу обводки хотел как раз спросить и уточнить. Сегодня пробовал выполнить обводку для вырезанной картинки.

Реально получается действительно только с помощью border:

border:2px solid #fff;

Пробовал с padding:

background:#fff;
padding:2px;

Результат тот же.

Я это пишу к вопросу, который хочу задать. Если к вырезанной картинке с размерами 50х50px добавить рамку 2px, то ее реальные размеры на шаблоне будут больше, чем на макете - 54x54px. Тоже относится и к padding. Ведь так?

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

Я правильно понимаю?

P.S.

Обводку в хтмл делать {border: 10px solid #fff;} где 10px — толщина обводки. padding не нужен.

Толщину Вы указали наверное только в качестве примера? У меня в свойствах стоит 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.

Конечно, наивно и глуповато звучит, но я просто в восторге от подсказки по поводу раскрытия и скрытия эффектов слоя. Раньше просто выискивал их на самом макете - на боксах, шрифтах и т. п. Можно только представить! ))))) Еще учиться и учиться...

Edited August 1, 2012 by aaron

[mrnobody]

А вы можете макет выложить? Я попробую сделать. Если получится, то отпишусь.

[aaron]

А вы можете макет выложить? Я попробую сделать. Если получится, то отпишусь.

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

[mrnobody]

dropbox или можно rghost.ru (без регистрации).

Edited August 1, 2012 by mrnobody

[aaron]

dropbox или можно rghost.ru (без регистрации).

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

[mrnobody]

Вот как получилось:

Блин, уголки не закруглились: левый верхний и левый нижний (((. Не знаю как уголки скруглить .

Вот видео

http://zalil.ru/33635283

Edited August 1, 2012 by mrnobody

[tius]

Макет не качала, но судя по скринам:

1. выделите нужные слои и склейте их в один, в этом случае эффекты растеризуются (ctrl+ЛКМ на нужных слоях, потом нажать ctrl+e для слияния слоев. получится один слой. клик ЛКМ с зажатым alt по глазику слева от названия слоя скроет все остальные слои в псд-документе, оставив текущий на прозрачном фоне. crop'аете кусок с флагом и заголовком, сохраняете в пнг с прозрачностью)

2. из картинки с шапкой вам нужен только кусок с флагом и названием. остальное сделать на css, это уменьшит килобайты при верстке

header {

background: #bf1919 url('путь_к_куску_с_флагом_и_названием.png') no-repeat 0 0;

border-radius: 16px; /*цифры на угад*/

border-top: 1px solid #d25e5e;

}

и так далее для тех элементов, которые внутри шапки.

[aaron]

Вот как получилось:

Блин, уголки не закруглились: левый верхний и левый нижний (((. Не знаю как уголки скруглить .

Вот видео

http://zalil.ru/33635283

Видео просмотрел и все получилось. Большое спасибо!

Но есть пара вопросов.

1. На последнем этапе вы слой Shape2 просто удалили? Несколько раз просмотрел этот момент - очень уж там незаметно было действие выполнено. По крайней мере, у меня получилось так, как у Вас, когда я удалил Shape2.

2. Я так и не понял, почему, когда я дублирую эти три слоя в новый документ, то слой с фоном там я могу свободно удалить. А вот когда пробую это делать в исходном документе, то он у меня удаляется, но флаг остается, причем еще какой! ))

3. А что за рамочка возникает вокруг курсора, когда Вы кликаете на шапке макета? Для чего она нужна и как ее включить, если она нужна?

http://savepic.net/3154623.htm

P.S.

Блин, уголки не закруглились: левый верхний и левый нижний (((. Не знаю как уголки скруглить .

Ну ведь это не беда? Картинка ложится фоном в шапку, поэтому скругление легко сделать с помощью border-radius?

Наполовину разобрался, что это за рамочка ("Показать управление трансформацией на выбранных слоях"):

http://savepic.su/2268286.htm

И даже "потаскал" ее во все стороны на разных слоях.

Но вот для чего она - так и не понял. ))

Edited August 2, 2012 by aaron

[aaron]

Макет не качала, но судя по скринам:

1. выделите нужные слои и склейте их в один, в этом случае эффекты растеризуются (ctrl+ЛКМ на нужных слоях, потом нажать ctrl+e для слияния слоев. получится один слой. клик ЛКМ с зажатым alt по глазику слева от названия слоя скроет все остальные слои в псд-документе, оставив текущий на прозрачном фоне. crop'аете кусок с флагом и заголовком, сохраняете в пнг с прозрачностью)

2. из картинки с шапкой вам нужен только кусок с флагом и названием. остальное сделать на css, это уменьшит килобайты при верстке

header {

background: #bf1919 url('путь_к_куску_с_флагом_и_названием.png') no-repeat 0 0;

border-radius: 16px; /*цифры на угад*/

border-top: 1px solid #d25e5e;

}

и так далее для тех элементов, которые внутри шапки.

Настоящая "магия" горячих клавиш! ))) Ctrl+E - еще ладно, подзабыл. А вот про Alt+ЛКМ - вообще не знал.

Сделал так, как Вы описали. Все получилось, кроме одного момента. При объединении слоев у меня в один слой сливается и фоновый рисунок. А когда crop'ом вырезаю логотип, он остается вместе с ним. Как избавиться от фона в этом случае - не знаю.

У меня получился результат так, как показал mrnobody. Правда, в конце я так и не понял, почему в продублированных слоях я могу безболезненно избавиться от слоя с фоном, а вот в исходном документе - нет (