Mockup > "Slice"

[jameshoty]

I was told to do a mock of a home page (contains logo, login, search, carousell, about us, privacy, sitemap) and was asked to "slice" it and should product the HTMl that is "bootstrap"-friendly.

What does he mean by "slice" and how to do?

[Mylenium]

Just a crazy idea: You could read the Photoshop help on these particular web features?

Slice web pages in Adobe Photoshop

Mylenium

[jameshoty]

I have tried this and produce the HTML and the images but how then I "make it bootstrap-friendly". Or is there not such a feature in the first place. I am getting crazy over this

[Dynamic Office]

I could regurgitate what’s written in the below article, but honestly, they’ve explained it better than I could have,

Happy to answer any follow-up questions after you’ve read it though!

https://helpx.adobe.com/photoshop/using/slicing-web-pages.html

Edit:

Same link as above, I was 2 minutes off!

[jameshoty]

So just to "ensure" that I am doing it correctly, say I slice the page into 3 portions (top, middle and bottom), then I will choose menu File > Export > Save for Web (legacy)... and I get the HTML and the images folder. Am I doing "slicing" this way?

[Dynamic Office]

“I have tried this and produce the HTML and the images but how then I "make it Bootstrap-friendly". Or is there not such a feature in the first place. I am getting crazy over this.”

Bootstrap is a program for coding HTML, CSS, and JavaScript.

Photoshop is only going to give you HTML, whether this is friendly for Bootstrap or not is really a matter of opinion for your client, however since bootstrap supports HTML, one could assume it would be okay.

“So just to "ensure" that I am doing it correctly, say I slice the page into 3 portions (top, middle and bottom), then I will choose menu File > Export > Save for Web (legacy)... and I get the HTML and the images folder. Am I doing "slicing" this way?”

Yes. Please refer to the guide above if anything is unclear

[jameshoty]

With my 2-day old knowledge on bootstrap, I can vaguely "imagine" that it is possible but I need to put them into a "practical piece"... I can see the light in the tunnel, just need a little patience

[cmgap]

Do you have the page mocked up in Ps? Depending on how complex the design is there are likely other ways to do this.

Is this for a school assignment?

[jameshoty]

It is indeed a school assignment and so it is not complex Do you want the PSD file or just the screen capture?