Semantic-ui: [UI] Add PSD graphics to Website

Created on 17 Jan 2015  路  18Comments  路  Source: Semantic-Org/Semantic-UI

Hi

Where I can find the PSD graphics files of semantic-ui?

thanks

Build Tools Enhancement stale

Most helpful comment

Semantic UI 2 PSDs

I've exported the Semantic UI kitchen sink with the Pagelayers tool. You can download the four PSDs here: https://drive.google.com/file/d/0B4i8Z3KNCWnlZDVaTW1YWFNKaUk/view?usp=sharing. I license this files under the MIT license.

How I have done it:

Do the following for each tab in the kitchen sink:

  1. Open the page in the Pagelayers tool.
  2. Set the screen size setting to 1920 x infinite.
  3. Set the scale to "x 2 (Retina)". This option is in the screen size dropdown.
  4. Export the PSD via the menu "Screenshot" -> "Save as..". Make sure to tick "Generate text layers". Choose the format "Photoshop (CS5 or newer)".
  5. Open the PSD and remove the unnecessary layers for the left sidebar and top section. This will decrease the file size drastically (~ 800MB -> 20MB).

All 18 comments

I don't think there are any, at least officially.

@anestv thanks for your reply.
In this case, we can start work on some part.
anyone interested to contribute?

Just wanted to confirm, as far as I know no one has done anything like this before.

@jlukic I will start with http://semantic-ui.com/kitchen-sink.html then I hope someone else can help because there are a lot of things.

@jlukic @macagoraga well look what I just found:

http://www.pagelayers.com

Maybe thats good enough for the beginning?

Hey this is great! Yeah if someone had time they could probably create PSDs quite easily

+1

Yes please, if someone could create a PSD for this that'd be great!
+1

Semantic UI 1 PSDs

I've exported the Semantic UI kitchen sink with the Pagelayers tool. You can download the four PSDs here: https://drive.google.com/file/d/0B4i8Z3KNCWnlR2JDaTdFOEhvdHM/view?usp=sharing. I license this files under the MIT license.

How I have done it:

Do the following for each tab in the kitchen sink:

  1. Open the page in the Pagelayers tool.
  2. Set the screen size setting to 1280 x infinite.
  3. Set the scale to "x 2 (Retina)". This option is in the screen size dropdown.
  4. Export the PSD via the menu "Screenshot" -> "Save as..". Make sure to tick "Generate text layers". Choose the format "Photoshop (CS5 or newer)".
  5. Open the PSD and remove the unnecessary layers for the left sidebar and top section. This will decrease the file size drastically (~ 800MB -> 20MB).

EDIT: I've updated the files to include text layers. I've also added details to the instructions.

Great, thank you so much Sanjo, this saved me hours! Also, have added the Mac Layer Tool onto ToBuy list.

@Sanjo Any chance to get these re-exported with 2.0 styles? Wanted to include this in our guide.

@jlukic Yeah sure. I can export and upload it tomorrow.

Hey @Sanjo . Any update on this?

Semantic UI 2 PSDs

I've exported the Semantic UI kitchen sink with the Pagelayers tool. You can download the four PSDs here: https://drive.google.com/file/d/0B4i8Z3KNCWnlZDVaTW1YWFNKaUk/view?usp=sharing. I license this files under the MIT license.

How I have done it:

Do the following for each tab in the kitchen sink:

  1. Open the page in the Pagelayers tool.
  2. Set the screen size setting to 1920 x infinite.
  3. Set the scale to "x 2 (Retina)". This option is in the screen size dropdown.
  4. Export the PSD via the menu "Screenshot" -> "Save as..". Make sure to tick "Generate text layers". Choose the format "Photoshop (CS5 or newer)".
  5. Open the PSD and remove the unnecessary layers for the left sidebar and top section. This will decrease the file size drastically (~ 800MB -> 20MB).

Will get these up in the docs shortly..

+1

+1

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

batata004 picture batata004  路  3Comments

ghost picture ghost  路  3Comments

vinhtq picture vinhtq  路  3Comments

playgithub picture playgithub  路  3Comments

kntmrkm picture kntmrkm  路  3Comments