Question

我正在尝试将CSS中制作的徽标转换为Photoshop。由于我都不擅长这两种方法，因此我尝试过使用“复制CSS”功能中的Photoshop版本，但失败了。

我试图通过我有限的知识来重做CSS，但是失败了。

logo ps copy css output


.Group_5 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 47;
}
.Group_4 {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 1924px;
  height: 1084px;
  z-index: 46;
}
.Ellipse_3 {
  border-width: 6.25px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-radius: 50%;
  position: absolute;
  left: 1119px;
  top: 486px;
  width: 168.5px;
  height: 174.5px;
  z-index: 45;
}
.Ellipse_2 {
  border-width: 6.25px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-radius: 50%;
  position: absolute;
  left: 1122px;
  top: 505px;
  width: 139.5px;
  height: 139.5px;
  z-index: 44;
}
.Ellipse_1_copy {
  border-width: 6.25px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-radius: 50%;
  position: absolute;
  left: 1109px;
  top: 512px;
  width: 139.5px;
  height: 139.5px;
  z-index: 43;
}
.Ellipse_1 {
  border-width: 6.25px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-radius: 50%;
  position: absolute;
  left: 1091px;
  top: 492px;
  width: 176.5px;
  height: 176.5px;
  z-index: 42;
}
.Shape_26 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1358px;
  top: 409px;
  width: 10px;
  height: 7px;
  z-index: 41;
}
.Shape_25 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1347px;
  top: 409px;
  width: 18px;
  height: 17px;
  z-index: 40;
}
.Shape_24 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1394px;
  top: 409px;
  width: 11px;
  height: 7px;
  z-index: 39;
}
.Shape_23 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1385px;
  top: 408px;
  width: 21px;
  height: 20px;
  z-index: 38;
}
.Shape_22 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1386px;
  top: 430px;
  width: 20px;
  height: 20px;
  z-index: 37;
}
.Group_2 {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 1920px;
  height: 1080px;
  z-index: 36;
}
.Shape_16_copy_2 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1395px;
  top: 410px;
  width: 8px;
  height: 26px;
  z-index: 35;
}
.Shape_16_copy {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1384px;
  top: 419px;
  width: 8px;
  height: 25px;
  z-index: 34;
}
.Shape_16 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1346px;
  top: 419px;
  width: 8px;
  height: 25px;
  z-index: 33;
}
.Shape_15 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1346px;
  top: 439px;
  width: 46px;
  height: 8px;
  z-index: 32;
}
.Shape_19 {
  border-width: 4.167px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  position: absolute;
  left: 1357px;
  top: 407px;
  width: 37.666px;
  height: 0;
  z-index: 31;
}
.Shape_21_copy {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1344px;
  top: 407px;
  width: 19px;
  height: 18px;
  z-index: 30;
}
.Shape_21 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1383px;
  top: 407px;
  width: 20px;
  height: 18px;
  z-index: 29;
}
.Shape_20 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1395px;
  top: 409px;
  width: 8px;
  height: 7px;
  z-index: 28;
}
.Shape_18 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1346px;
  top: 417px;
  width: 46px;
  height: 8px;
  z-index: 27;
}
.Shape_17_copy {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1381px;
  top: 408px;
  width: 20px;
  height: 19px;
  z-index: 26;
}
.Shape_17 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1384px;
  top: 428px;
  width: 19px;
  height: 19px;
  z-index: 25;
}
.Group_1 {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 1920px;
  height: 1080px;
  z-index: 23;
}
.Rectangle_1 {
  border-width: 4.167px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  position: absolute;
  left: 1325px;
  top: 472px;
  width: 48.666px;
  height: 19.666px;
  z-index: 22;
}
.Shape_10 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1132px;
  top: 656px;
  width: 11px;
  height: 8px;
  z-index: 21;
}
.Shape_9 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1394px;
  top: 423px;
  width: 41px;
  height: 242px;
  z-index: 20;
}
.Shape_8 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1132px;
  top: 451px;
  width: 271px;
  height: 213px;
  z-index: 19;
}
.Shape_11 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1132px;
  top: 450px;
  width: 17px;
  height: 8px;
  z-index: 18;
}
.Shape_7 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1132px;
  top: 416px;
  width: 64px;
  height: 41px;
  z-index: 17;
}
.Shape_14 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1427px;
  top: 417px;
  width: 8px;
  height: 215px;
  z-index: 16;
}
.Shape_13 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1393px;
  top: 415px;
  width: 44px;
  height: 44px;
  z-index: 15;
}
.Shape_12 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1144px;
  top: 416px;
  width: 302px;
  height: 42px;
  z-index: 14;
}
.Group_3 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 11;
}
.Shape_3 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 577px;
  top: 684px;
  width: 710px;
  height: 12px;
  z-index: 10;
}
.Shape_2 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 571px;
  top: 301px;
  width: 137px;
  height: 403px;
  z-index: 9;
}
.I {
  font-size: 283.333px;
  font-family: "Kozuka Gothic Pr6N";
  color: rgb(0, 0, 0);
  line-height: 1.2;
  text-align: center;
  -moz-transform: matrix( 1,0,0,0.76592618857706,0,0);
  -webkit-transform: matrix( 1,0,0,0.76592618857706,0,0);
  -ms-transform: matrix( 1,0,0,0.76592618857706,0,0);
  position: absolute;
  left: 1043.001px;
  top: 406px;
  z-index: 7;
}
.C_copy_2 {
  font-size: 283.333px;
  font-family: "Kozuka Gothic Pro";
  color: rgb(0, 0, 0);
  line-height: 1.2;
  text-align: center;
  -moz-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  -webkit-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  -ms-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  position: absolute;
  left: 869.507px;
  top: 406.5px;
  z-index: 6;
}
.C {
  font-size: 283.333px;
  font-family: "Kozuka Gothic Pro";
  color: rgb(0, 0, 0);
  line-height: 1.2;
  text-align: center;
  -moz-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  -webkit-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  -ms-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  position: absolute;
  left: 711.507px;
  top: 406.5px;
  z-index: 5;
}
.Shape_4 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 685px;
  top: 289px;
  width: 98px;
  height: 212px;
  z-index: 4;
}
.Shape_1 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 693px;
  top: 309px;
  width: 89px;
  height: 191px;
  z-index: 3;
}

我可能只是放错了位置，或者给定的CSS结果不能正常工作，就像我做的任何事情和/或尝试将结果放入空白页一样。

我不确定我如何才能转换此徽标，如上所述，我在这两个方面都不是高手。

徽标由圆圈/线条和2“ C”文字组成。有些图层在其上具有蒙版以提高透明度（重叠之处）

这不是最好的产品，因为它总体上应该具有相同的厚度，但是我想要一种进入CSS形式的方法。

如何将Photoshop制作的徽标正确转换为CSS？

0 个答案: